Introduction to CSS

CSS Exercises

Jen Kramer

AnnieCannons
Introduction to CSS

Check out a free preview of the full Introduction to CSS course

The "CSS Exercises" Lesson is part of the full, Introduction to CSS course featured in this preview video. Here's what you'd learn in this lesson:

Jen instructs students to apply styles to their previous HTML exercise, the book markup.

Preview
Close

Transcript from the "CSS Exercises" Lesson

[00:00:00]
>> Jen Kramer: Fabulous. So let me go through your exercises for you to work on today. We'll scroll on down here to the bottom of our CSS document today. [COUGH] So as always, I've given you some references for some reading some things that we've talked about today, I'll add the reference to the Cclor picker color zilla.

[00:00:22]
So we've got the link to color it out adobe.com there. We've got the link to the validator. We've got some more reading on CSS. So your exercises include to style your book chapter. So you did all that work on your book chapter yesterday. You've got some amazing HTML markup.

[00:00:38]
Now we wanna go through and try to start making it pretty. So, think about colors and background images, styling text, and think about elements, classes, IDs and descendant selectors, and make your styles and an external style sheet. Okay, do whatever you want, whatever makes you happy. Whatever is pretty as you know it's a book about photography.

[00:01:00]
Maybe that'll give you some ideas. And then we have some additional practice here for you just like we did yesterday. So this is the W3Schools. There are some links here that will talk to you about the inline styles, the embedded style. So you get a little practice with those.

[00:01:18]
Also, some limited styling exercises here. And then much more extensive styling exercises here, in terms of syntax, backgrounds, text links, and fonts. And then if you get through all that, and you still need more to do, or you're still having fun, and you wanna do some more remember those pages that we put together yesterday about you and the hobby page?

[00:01:42]
Keep on styling those too. Go grab pictures, start putting some pictures in those, start changing some colors and make it pretty as you can. There's only so far you're gonna be able to get it pretty today because you don't know how to do layouts yet. Right? Don't know how to do any columns, don't know how to make your text wrap around your images.

[00:02:04]
That is all stuff we're going to be talking about next time. Okay? But this this will be plenty of stuff to get you thinking about things. The other thing you should not hesitate to do is look up more CSS styling beyond what I've talked to you about. So feel free to dig into some of the CSS references that are out there and try out new properties and values as well, okay.

[00:02:28]
>> Student1: I just recommend both MDN and CSS tricks as great places.
>> Jen Kramer: Perfect, CSS tricks and Mozilla Developer Network or MDN as you'll often hear it referred to those are two great places to read up on CSS styling and Jenna you had a question?
>> Student2: Was why you're using W3Schools over?

[00:02:49]
>> Jen Kramer: I'm using W3 schools for because they have these lovely exercises. Okay, W3Schools is a very controversial resource in a lot of ways. Because if you actually read the W3Schools website, it will tell you that they don't guarantee that any of the information they tell you is correct.

[00:03:08]
[LAUGH] As opposed to the Mozilla Developer Network, which does promise that they give correct answers. However W3Schools does have a lovely way of presenting the information. It's much more beginner friendly, I think over the Mozilla Developer Network, which is kinda hardcore professional kinda thing. Plus W3Schools has these exercises which are really nice.

[00:03:31]
That you can try this out write code right there in the browser and get answers as to whether you're right or wrong. So that's why I've pointed you there to those.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now