CSS Basics

What does a style sheet look like?

A style sheet is made up of rules that look something like this:

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

Each rule begins with a selector, which is H3 in the example above. A selector is normally one or more HTML elements (tags), and the declarations inside the rule describe how those elements should appear. A declaration is simply a CSS property followed by a value. For example, the declaration "font-style: italic;" is composed of the property "font-style" followed by the value "italic". So, this example states that every <H3> HTML tag should use an Arial italic font and be colored green.

You can also use classes as selectors, which aren't tied to specific HTML elements. For example, consider this rule:

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

The declaration block is the same as that in the previous example, but instead of using H3 as the selector, we're using the class .greenitalic. Note that .greenitalic doesn't mean anything special - you can use anything as a class name provided that it starts with a period and is composed of a single word (spaces and underscores are not allowed).

To apply a class to an HTML tag, you use the the class attribute (which was introduced in HTML 4.0). For example, to apply the above style to an <H3> tag, you'd use:

   <H3 CLASS="greenitalic">this is greenitalic<H3>

(note that the period before the class name is not included).

« Previous Next »