HTMLisEasy.com
HTML tutorials for the rest of us...
CSS Tutor - Lesson 4

As you browse through the CSS Properties section of the CSS Reference, you'll find that there is more than one way to get a job done. We've already covered #ff0000 vs red. You'll find the same thing when dealing with other measures as well. (This is what happens when a bunch of computer people get together to simplify something... you get an even BIGGER mess.)

The best way to learn about various properties is to experiment with them. One handy property that can be applied to a paragraph tag is padding...

<html>
<head>
<title></title>

<style type="text/css">
p.josh { padding-left:10px; }
p.jeff { padding-left:20px; padding-top:30px; }
</style>

</head>
<body>

<p>This paragraph is normal.</p>
<p class="josh">This paragraph is padded on the left by about 10 pixels.</p>
<p class="jeff">This paragraph is padded on the left by about 20 pixels,
                and on the top by an extra 30 pixels.</p>
<p>This paragraph is back to normal.</p>

</body>
</html>

VIEW IT

I think now is a good time to talk about syntax. The basic syntax is this...

   element { property:value }

More than one property being affected...

   element { property1:value; property2:value; property3:value }

Can also be written like a set of programming instructions...

   element
   {
      property1:value;
      property2:value;
      property3:value;
   }
     or     
 element {
    property1:value;
    property2:value;
    property3:value;
 }

And, of course, attributing properties to a class of a particular element...

   element.myclass { property:value }

Exercise: Build a page from scratch and place one paragraph in it. Using style sheets, pad that paragraph 20 pixels on the left, make it's background color dark red and it's text yellow.

Here is a solution.

<< BACK NEXT >>
CSS Tutor
Lessons:   Intro   1   2   3   4   5   6     CSS Reference
HTML 4.0 Reference      Google Groups (Advanced Search)