So far we have explored the semantic markup provided by HTML. Our output has been widely accessible, but slightly bland

Lets take a look at Cascading Stylesheets (CSS), which will be used as a complement to HTML.

Cascading Stylesheets

CSS provides us with a means to apply stylistic rules to our HTML documents. These rules include font selection, alignment, color, layout, and even animations (with the new CSS3)!

In this task, we will be styling our previous work with several common CSS selectors. A CSS selector targets a specific page element or even a class of elements such as links or paragraph text and enables us to selectively style to our heart's content. The selectors that we will be covering are:

• h1 - h6 (if necessary)
• body
• p
• li

Selectors are used in conjunction with properties and values. Once you select a page element, you can change its properties, such as color, to different values, such as green. Lets take a look.

selector {
  property-one: value;
  property-two: value;
}

In the example above, we have created a rule set describing how the browser (Mozilla Firefox, Chromium, etc.) should render the page elements that the selector targets. The rule set is enclosed in curly braces and is preceeded by a selcor. Also notice that each property declaration is separated by a semi-colon. These declarations could be written on the same line, but having them on separate lines makes it easier for us to read.

Headings

Headings usually contain large, bold text. The higher the heading level (e.g. <h1>), typically, the larger the font. Lets style our level one headers.

h1
{
    font-size: 120%;
}

For this example, I have enlarged the text to 120%. The size is relative to the font-size for the containing document or page element. Using relative font sizes and page dimensions can save you a lot of headache compared to absolute values and can increase the accessibility of your content. For more on relative values, read the article Dao of Web Design.