Layout ] Multimedia ] Programming ] Scripting ] Communicate ] Navigation ]

How to Use CSS

Up ] Where to Use CSS ] [ How to Use CSS ] More CSS Info ]

To link in an external stylesheet, here is the format:
<LINK REL="stylesheet" TYPE="text/css" HREF="filename">

The filename should end in the extension .css.  Inside the file, you have a selector (what you want to affect) and then braces containing the rules for the element. The rules should contain first the rule name, then a colon, then the value, and then a semicolon.  The final semicolon is optional. Ex:

P { text-indent: 1in; font-size: normal }

To specify relationships between elements, put one following the other.  To only effect italic text in paragraphs, use this:

P I { font-size: smaller }

To start a comment, use "/*" and to end a comment, use "*/".   Anything within these is comment text.  Comments CANNOT be put within each other, while comments CAN span lines.

Classes are noted using .classname.  It is not necessary to specify an element for a class.  In that case, it affects any element of the specified class.

EM.super { color: red } /* would not affect
                                    <P CLASS="super"> */
.super { color: red } /* WOULD affect
                                    <P CLASS="super"> */

To specify an ID, use the #idname format.

There are five special selectors which can be used, and are not really classes or elements.  Thus, they are called pseudo-classes and pseudo-elements.  The three pseudo-classes are all in relation to the anchor element.  They are:

  1. A:link
  2. A:active
  3. A:visited

These three pseudo-classes allow you to specify different formatting for different varieties of links.  You can still use the A element to format all links, but this allows more control.

The two pseudo-elements are first-line and first-letter.  They would be used as follows:

P:first-line { font-variant: small-caps; }
H3:first-letter {font-size: xx-large; }

They can be used with any block-level element, not just paragraphs.  However, the pseudo-elements are not supported in any browser to date.

Back ] Up ] Next ]
Layout ] Multimedia ] Programming ] Scripting ] Communicate ] Navigation ]
Where to Use CSS ] [ How to Use CSS ] More CSS Info ]

The Web Wizard's Spellbook © 1998, Team WWS