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 de
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>
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.