CSS: Coding with Style
Style it up!

HTML is like a very smart friend who has very poor taste in fashion. HTML is all business and no fun: he always gives paragraphs 16 pixel margins, always makes <strong> elements bold, and it never, ever, occurs to him to add a splash of color... except for links--which he always dresses up in exactly the same way: blue text with an underline. How drab!

CSS, on the other hand, is like a friend with style and pizzazz. CSS doesn't care a bit whether a link works correctly and he doesn't know the difference between a paragraph and a heading--all he cares about is what it looks like and what it feels like.

You wouldn't know it, but the two are actually best friends, and when they get together they make amazing things happen.

Let's look at how CSS can be used to add style to the basic HTML page here containing one paragraph. Notice that the <p> tag has an attribute named style in it!

  1. Find the style="" attribute in the <p> tag.
  2. Put the cursor in the empty space between the two quotes, and type color:green.
  3. Check out what CSS has done! Then click "Save and Submit" to finish the lesson.
View Preview