P2PU | HTML Introduction | A Sprinkle of Style

A Sprinkle of Style

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

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

Cascading Stylesheets

Cascading Stylesheets (CSS) provide 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)!

CSS values typically live in the <head></head> section of a document. CSS styles are surrounded by <style<>/style> tags.

<head>
  <style type="text/css">
    ... style rules here ...
  </style>
</head>

Alternatively, you can create a seperate file containing CSS rules that will be included in HTML documents.

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 cool

Lets set the font properties for our paragraphs.

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

Learning Resources

W3Schools: CSS Backgrounds, CSS Text, CSS Fonts

HTML Introduction

A Sprinkle of Style

Comments