CSS Tutorial

There are three versions of this page:

• The first is not controlled by a css document. All of its style definitions are contained within the document's HTML. You can view its source to see all of its style definitions. The links to the CSS files are commented out.
• The second is linked to masterx.css.
• The third is linked to masterp.css.

Master.css documents are written in text editors just like html docs.

Here are the basics:

1. Indicate an element—any tagged element such as P, UL, BODY
2. Dictate the style within {}
3. Indicate the property (color, alignment, size) to be modified followed by a colon
4. Indicate the value (navy, baseline, +3) followed by a semi-colon

For example:

H1  {text-align:center; color:#660099; font-size: 280%} 

In the example above, H1 is the element to be modified. There are many variables you can choose. To keep pages pretty clean, just choose alignment, color and size. Change the color of all H1s attached to this style sheet by changing the color from #660099 to any other color of choice. The font-size can be indicated in %, pt, or +/-. The property, ie color or font-size, is always followed by a colon. Any multi-word property is hyphenated.

The value, (ie center or 280%), is always followed by a semi-colon. No need to contain within quotes.

To attach either to a test html doc of your own, include the appropriate link to the CSS above the closing head tag of your html document. Place the css doc in the same folder as your html doc. Keep all the quotes intact.

The template used for masterx.css is interesting because it shows many elements that can be controlled through the style sheet.

The following type of style indicator within the head of most of pages would allow you to quickly make adjustments based on the individual page and background.

<Style type="text/css">
body { background-color: green; margin-left: 50px; margin-right: 50px; margin-top: 50px;
               font-family: comic sans; font-size: medium; color: navy;
                }
H1      {text-align:center;
         color:#66FF09;
        font-size: 225%;
        background-color: black;}
</Style>

If this page were attached to a master, the style included in the head of this doc would override the master.

In-line style dedictated to this paragraph will override master and local style.

Thus, the cascade. The style declaration closest to the element wins.