Home : Basic HTML/CSS tutorial : Stylesheets : Stylesheet syntax
Introduction
Why stylesheets?
Stylesheet syntax
More properties
Specific elements
Summary
< Previous: Why stylesheets?

Stylesheet syntax

Basic stylesheet syntax allows you to describe a particular type of content, followed by a block of instructions about how to display that content, followed by the description of another type of content, another block of instructions, and so on.

Example

The following stylesheet specifies that level-one headings should be in 24-pixel high Arial font (or sans-serif if Arial is not available). Level-two headings are in 18 pixel Arial, but they are coloured green.

H1
{
font-family: Arial, sans-serif;
font-size: 24px;
}

H2
{
font-family: Arial, sans-serif;
font-size: 18px;
color: green;
}

Explanation

Let's look at the above in more detail.

The keywords (font-family, font-size, and color) are also known as CSS properties.

Linking stylesheets to HTML

On its own, that stylesheet will do nothing. However, you could save it in a file called, for example, style.css (by convention, stylesheets have a .css extension) and then reference it from within the <head> section of an HTML page using this line:

<link rel="stylesheet" type="text/css" href="style.css">