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.
- H1
This is the HTML tag whose appearance we want to alter. - { ... }
The curly brackets (braces) contain a "block" of commands which alter the appearance of the specified HTML tag. - font-family:
This keyword controls the font used for text. After it, you can specify a list of different fonts - the first is used in preference. Here the list ends with a generic font specification (sans-serif). - ;
Each keyword line within the block has to be terminated with a semicolon. - font-size:
This keyword controls the size of the font. "px" is the measurement unit (pixels), which is usually the best unit for specifying font size on-screen. - color:
This keyword controls the foreground (text) colour of the text. Note that it has to be spelt the American way. Also, only a few predefined colour names (like "green") are available; other colours have to be specified using a bizarre format which I'll cover next lesson (hopefully).
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">
