This will conclude the Introduction to Cascading Style Sheets.

With CSS, you can set many properties once, either in the HEAD section of each HTML document or in a remote file, and have it control every instance of that tag on your page. For example:

<style type="text/css">
<!--

P {padding-left: 20px;
padding-right: 20px;
text-align: justify;
font-family: Arial;
font-size: 16px;}

-->
</style>

If that code were placed in the head section of your HTML page, every time you use a paragraph tag your text would have 20 pixels of space (padding) on the left and right side of the of the page, and the text would be justified. The font would be Arial font and precisely 16 pixels high.

By now you should be starting to see all the new possibilities in learning CSS code. In plain HTML you can't program in padding so easily, you have to use tables or image spacers or other tricks. You'd also have to justify the text every time you used a paragraph tag (unless you're one of the rare individuals that actually uses the division tag). And with HTML you can't set the font size to the EXACT height you want by naming the pixel size! There are many, many other CSS tips and tricks, which I'll continue adding to this site.

But what if I don't want all my paragraphs to work that way?

Good question. CSS offers you the ability to create your own classes of code. Stay with me here, it's not as hard as it sounds.

Naming your own class of code is really quite easy. Suppose you want to have the above paragraph style for your main page area, but need something different for the left border. Let's say you need a smaller font and less padding, and want the text aligned to the right just for fun:

<style type="text/css">
<!--

p.border {padding-left: 3px;
padding-right: 3px;
text-align: right;
font-family: Arial;
font-size: 9px;}

--> </style>

You can probably see that all we did is change the padding to 3 pixels, the alignment to right, and the font size to 9 pixels. So what makes it different? The .border after the "P" selector. By changing

p

to

p.border

...we've created our own class of paragraph tag. The word "border" could be any word, I chose border because in this example we were creating a different set of rules for paragraph tags used in the border of our page. Next time I'll call it frooberniggle just to make you scratch your head and say huh.

Now, to use that paragraph class in your border area, you'd code:

<p class="border">

See how easy that was? Just add a period then a name to any legitimate selector tag and you can create your own class of code with it's own rules for the browser to follow. As long as the properties and values you give the selector tag are legal, you're in business. (If you've forgotten what the selector, property and value are in CSS, please refresh your memory by reviewing the Introduction to CSS links listed above).

Now, what if you wanted another paragraph class for images so you can have padding at the top and bottom of an image? No problem! Create as many classes as you need.

<style type="text/css">

<!--

p.image {padding-top: 40px; padding-bottom: 40px;}

-->

</style>  

Call it into play with it's own class.

<p class="image">

Piece of cake, eh?

This concludes the Introduction to CSS.