Define CSS styles

In this instance, H3 is the selector (in this case, an HTML element), and font-family: Arial is its defined style. The definition is a combination of a property and its value, separated by a colon. (Properties are the characteristics an element can have--such as font type, font size, or color--while values are specific traits those properties can have--such as Arial, 24-point, or red.)

To include multiple properties in the same definition, simply separate them with semicolons:

H3 { font-family: Arial; font-style: italic; color: green }

To make a style easier to read, you can stack the properties:

H3 { font-family: Arial;
    font-style: italic;
    color: green }

And to define more than one value for a single property, just add them on, separated by commas:

H3 { font-family: Arial, Helvetica, sans-serif;
    font-style: italic;
    color: green }

The font-family property in the code above offers the browser several values to choose from; the browser will go down the line until it finds a typeface it recognizes. The first item listed (Arial) is the preferred typeface, and the second item (Helvetica) is an alternate typeface in case the user's system doesn't have Arial. The third item (sans-serif) is a generic style of font rather than a specific one--this is recommended as a last alternative because most systems have at least one typeface in that generic family. If the browser doesn't find any matches, it will use its default font.

Using Classes and IDs as Selectors

Any HTML element can be a selector, but sometimes you want to be more specific in your style definitions. For example, suppose you have a huge table with many rows, and you want to format the rows four different ways. Using the <TR> element as your selector limits you to one style definition, which would make all the rows look alike.

This is where classes and IDs come in handy. Once you define a class or ID, you can attach it to any HTML element within the document to apply style, without limiting the element itself to a particular style.

Define a class by giving it a name (always preceded by a period) and adding the standard style definition of properties and values inside curly brackets:

.periwinkle { color: #6699ff }

Once the style sheet containing the class is applied to the HTML document (see step 2), you can use the class within any HTML tag in the document:

<STRONG class="periwinkle">This is bold, periwinkle text.</STRONG>

This is much more versatile than using the <STRONG> element as the selector, which would make every instance of strong text periwinkle.

IDs are used in basically the same way, except that they are preceded by a number sign (#) instead of a period:

#bright { font-weight: bolder; color: #00ff00 }

Add it to an HTML tag like so:

<P id="bright">This text is hard to read.</P>

Using an ID is like giving a selector a unique name, which comes in handy when you start working with scripts. (You'll need to identify elements individually then.) But if you're sure you'll be sticking with style sheets and not venturing into scripting, the convention is to use classes instead of IDs as selectors.

Matt Rotter and Charity Kahn are software engineers for CNET.com.