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 in this task 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.