Loading

  • Contents
  • Images
  • Styles
  • Scripts

Styling Your HTML Documents

This entry was posted in Tutorials and tagged , on .

In the previous HTML tutorials you learnt how to mark up your HTML documents using HTML elements. By marking up an HTML document you clarify the structure of the document and prepare for applying CSS to style the visual appearance of the document.

In this CSS tutorial I will tell you how to create CSS documents that control how HTML documents are rendered on screen or paper.

Stylesheet – a CSS document

A CSS document is stored as a separate file from your HTML document. One CSS document can be used to style many HTML documents. When you create a web site you often create only one CSS document to style all your web pages. This way you can make sure all your web pages have an uniform look and best of all, if you decide to change the look of your pages, you only need to update one file, the CSS document.

A CSS document is often called a stylesheet. Many times people name their stylesheet file “stylesheet.css” or “style.css”.

Linking HTML and CSS: the LINK element

How does the web browser know which CSS document, or style sheet, to apply when displaying a web page?

There is a special HTML element linking an HTML document to a CSS document. This is the link element. The link element may only occur within the head element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>

In the previous example the contents of the head element is a link element. The link element tells the web browser which stylesheet to apply when displaying the HTML document. All HTML documents you want to style using CSS should have a link element placed within the head element.

The link element is an element that only has a start tag and no end tag, just like the br element. For now, just treat the link element as magic. I will explain about attributes in a later tutorial.

The link element in the example above refers to a stylesheet stored in a file named “style.css”. When a web browser prepares to show an HTML document with this link element, it will read the “style.css” stylesheet and apply the rules found there to the HTML document.

The link element can only be placed inside the head element. This is a strict rule.

Your first stylesheet

It’s about time you get to see what a styesheet looks like.

Below is a stylesheet suitable to style all the examples from the previous HTML tutorials.

h1 { font-family: arial, sans-serif; font-size: 20px; font-weight: normal; color: red;
}
p { font-family: times, serif; font-size: 16px;
}

Does this CSS stylesheet look cryptic to you, or are you able to guess the meaning of some parts of the document?

This style sheet contains two rules defining how the content of h1 and p elements are to be shown to readers.

The first rule styles all h1 elements. It says:

  • Text is to be set using arial font and if arial is not available another sans-serif font should be used.
  • The height of the font should be 20 pixels.
  • The weight of the font should be normal, neither bold nor light.
  • The color of the font should be red.

The second rule styles all p elements. All paragraphs enclosed within p elements will be styled using this rule. The rule says:

  • Text is to be set using times font and if times is not available another serif font should be used.
  • The height of the font should be 12 pixels.

The rule styling p elements said nothing about the color of the font. When some aspect of an HTML element is not styled explicitly a standard, default value is used. For font color the standard color is normally black.

Lets apply the CSS above to an HTML document and observe what it looks like.

Below is one of the HTML documents we have discussed previously, this time as a complete and valid document with a link to the above stylesheet. The style sheet file name is style.css.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<h1>Cobb salad</h1>
<p>
Cobb salad is a tasty salad, one of my favourites.
</p>
</body>
</html>

Finally here is the finished result.

Cobb salad

Cobb salad is a tasty salad, one of my favourites.

You can see how the stylesheet has affected the various structural elements of the document. The heading is set in red color, the paragraph text is set in Times font, etc.

Are you starting to see how easy it can be to style HTML documents using CSS?

Vocabulary: Rule, Selector, Declaration, Property and Value

CSS stylesheets contains rules like the one below:

p { font-family: times, serif; font-size: 16px; border: 2px solid red;
}

A rule consist of two parts:

  1. The selector. The selector says which HTML elements the rule is to style. For the rule above, the selector is p. The selector is the link between the HTML document and the style sheet.
  2. A list of declarations. The declarations are enclosed in brace characters (“{“, “}”) and separated by semicolon. Each declaration consists of two parts:
    1. The property name which names the aspect of the selected html element(s) that is to be affected. font-family is a property name in the above example.
    2. The new value of the property, for instance the name of a font.

All HTML element types are possible selectors. You can thus style all the element types we have talked about in the previous HTML tutorials including h1, h2, p, ul, ol, li, b and i.

A declaration consists of two parts, the property name and the value. The two parts of any declarations are separated by a colon character. It is customary to place the colon immediately after the property name, as shown in all the examples in all tutorial examples.

In the next CSS tutorial we will look more at the declarations part of stylesheets. This is where the really interesting stuff is. This is where you decide what your web pages are going to look like.

Summary

In this CSS tutorial you have seen what a CSS stylesheet looks like, and learnt the basic structures of a stylesheet:

  • Stylesheets contain rules
  • A stylesheet rule starts with a selector identifying which HTML element the rule applies to.
  • A stylesheet rule contains a list of declarations setting property values for the HTML element named by the selector.

In this tutorial you also learnt how to link an HTML document to a specific style sheet.