STYLE SHEETS

Styles are used to format your page. If you use style sheets, you do not need to use the <font> tag. Styles are similar to attributes, but instead of using an "=" sign, they use a colon, like this:

property:value;property:value

Styles may be applied on three different levels:

  1. Within a tag:

    2. <P STYLE="property:value;property:value">

  2. Inside the <HEAD> tag, using the <STYLE> tag:

    3. <STYLE>

    P {property:value;property:value;}

    </STYLE>

    This style would automatically apply to all <P> tags.

  3. Or linked, via an external style sheet:

 

Here is an example of a style for the header tag:

H1 {
font-family: serif;
font-size: x-large;
font-weight: bold;
color: #FFFF00;
background-color: #800000;
text-align: center;
line-height: 25px;
letter-spacing : 5px;
word-spacing : 10px;
}

You may also create classes of styles, that apply to only certain tags. Here is an example of the style definition and how you reference it in a tag:

TD.status {
font-family: Arial;
font-size: x-large;
font-weight: bold;
background-color: red;
}

<TD class="status">CODE RED</TD>

You may even create your own tags, using these two tags:

<DIV> creates a new block, like a paragraph with a line break.

<SPAN> creates an inline tag, like the font tag, meaning, there's no line break.

A layer is created using the <DIV tag>:

DIV.demo {

left: 307px;
top: 28px;
width: 100px;
height: 100px;
position: absolute;

}

Layers are positioned in two different ways:

absolute: this means it is positioned precisely inside the <BODY> tag.

relative: this means it is positioned relative to where it occurs on the page.