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:

• body
• h1, h2, etc
• p

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.

Body

Lets give our body a nice background. Pick your favorite color from the list of HTML Color Names and then style your background-color.

body
{
    background-color: MediumSpringGreen;
}

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%;
    font-weight: bold;
}

For this example, the H1 font size is enlarged to 120%. This 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.

Paragraphs

The font size, style, and color for our page paragraphs may need some adjusting to look good with our fresh background color and large headers. If you chose a dark background-color it will be important to pick a light font color so that visitors can enjoy your content

Lets set the font properties for our paragraphs.

p
{
    color: Tomato;
    font-family: sans-serif;
}

Learning Resources

W3Schools: CSS Backgrounds, CSS Text, CSS Fonts