Help

How to Use CSS (Cascading Style Sheets)

Basic Stylesheet code

The basis of stylesheets are rules. Here is an example of the simplest form of rule:

H1 { color: green }

This rule tells the Web browser that all text surrounded by <H1></H1> should be displayed in green.

Each rule consists of two parts the selector and a declaration. In the example above, H1 is the selector. The selector is the HTML tag you wish to apply the style to. Any HTML tag can be used as a selector (<P> , <A> , <TABLE> , etc.). The second part, the declaration, states what the style is. This always goes between the curly brackets({}). The first part of the declaration is the property that the style is being applied to (in this case, color) and second part is the value of that property (green).

You can also put more then one property in the declaration by separating them by semi-colons (;) for example:

H1 { color: green; font-size: 37px; font-family: impact }

This would make text with the H1 tag around it green, 37 pixel tall and in Impact font.

You may also group selectors if you want several tags to have the same style, for example:

H1, P, BLOCKQUOTE { font-family: arial }

All of these text in these 3 tags would now be in arial.

Here are a list of some common properties for text & fonts :

color	use color names (green, red, etc) or hex values (#009900)
font-size	can be in either points (12pt) or pixels (37px)
font-family	can use generic font names (arial, sans-serif, etc)`
background	sets a background color, uses same color values as above
text-align	aligns text in a element (left, right, center, justify)
text-decoration	sets decoration of text (underline, overline, none), useful if you do not want your links to have underlines under them (see example)

For a complete list of properties check out CSS, Level 1 from W3C.

Lets see some examples of what we have learned, assume we have embedded this stylesheet in a document, you will learn how to embedded stylesheets in the next section, so just look at the CSS rules for this example:

Now we create the following page:

<BODY>
<H1>Stylesheet Example</H1>
<P>This is a test</P>
<A HREF="test.html">Test Link</a>
</BODY>

It would look something like this:

Stylesheet Example

This is a test

Test Link

Viola, stylesheets at work. If the above does not look any different then normal, your browser is not stylesheet compatible and you probably should download a new one if you are going to be working with stylesheets. IE 5 or Netscape 4.0+ is you best bet. As you can see this section has primarily dealt with text/font stylesheet, we will later learn how to use other types of stylesheets, but now we need to learn how to put stylesheets on a page.

Part 2:
How to put CSS in your page »