Adding a touch of style
The following is an excerpt from www.w3.org and the author Dave Raggett, 8th April 2002.
This is a short guide to styling your Web pages. It will show you how to use W3C’s Cascading Style Sheets language (CSS) as well as alternatives using HTML itself. The route will steer you clear of most of the problems caused by differences between different brands and versions of browsers.
For style sheets to work, it is important that your markup be free of errors. A convenient way to automatically fix markup errors is to use the HTML Tidy utility. This also tidies the markup making it easier to read and easier to edit. I recommend you regularly run Tidy over any markup you are editing. Tidy is very effective at cleaning up markup created by authoring tools with sloppy habits.
The following will teach you how to:
use the style element
link to separate style sheets
set page margins
set left and right and first-line indents
set the amount of whitespace above and below
set the font type, style and size
add borders and backgrounds
set colors with named or numeric values
add style for browsers that don’t understand CSS
Getting started
Let’s start with setting the color of the text and the background. You can do this by using the STYLE element to set style properties for the document’s tags:
<style type=”text/css”>
body { color: black; background: white; }
</style>
The style element is placed within the document head. Here is a template HTML file showing where the above style element fits. You can copy and paste this into your editor as a convenient way to experiment with CSS style sheets:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> replace with your document’s title </title>
<style type=”text/css”>
body { color: black; background: white; }
</style>
</head>
<body>
replace with your document’s content
</body>
</html>
The stuff between the <style> and </style> is written in special notation for style rules. Each rule starts with a tag name followed by a list of style properties bracketed by { and }. In this example, the rule matches the body tag. As you will see, the body tag provides the basis for setting the overall look and feel of your Web page.
Each style property starts with the property’s name, then a colon and lastly the value for this property. When there is more than one style property in the list, you need to use a semicolon between each of them to delimit one property from the next. In this example, there are two properties – “color” which sets the color of the text, and “background” which sets the color of the page background. I recommend always adding the semicolon even after the last property.
Colors can be given as names or as numerical values, for instance rgb(255, 204, 204) which is a fleshy pink. The 3 numbers correspond to red, green and blue respectively in the range 0 to 255. You can also use a hexadecimal notation, the same color can also be written as #FFCCCC. More details on color are given in a later section.
Note that the style element must be placed in the document’s head along with the title element. It shouldn’t be placed within the body.
Linking to a separate style sheet
If you are likely to want to use the same styles for several Web pages it is worth considering using a separate style sheet which you then link from each page. You can do this as follows:
<link type=”text/css” rel=”stylesheet” href=”style.css”>
The link tag should be placed within the <head> … </head> element. Here is an HTML file with a link to an external style sheet:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> replace with your document’s title </title>
<link type=”text/css” rel=”stylesheet” href=”style.css”>
</head>
<body>
replace with your document’s content
</body>
</html>
The link element’s rel attribute must be set to the value “stylesheet” to allow the browser to recognize that the href attribute gives the Web address (URL) for your style sheet. A simple stylesheet file might look like the following:
/* style.css – a simple style sheet */
body {
margin-left: 10%; margin-right: 10%;
color: black; background: white;
}
Note that the same HTML file can link to an external style sheet and also include a style element for additional style settings specific to this page. If you place the link element before the style element, you can use the latter to override the style settings in the linked style sheet.
Setting the page margins
Web pages look a lot nicer with bigger margins. You can set the left and right margins with the “margin-left” and “margin-right” properties, e.g.
<style type=”text/css”>
body { margin-left: 10%; margin-right: 10%; }
</style>
This sets both margins to 10% of the window width, and the margins will scale when you resize the browser window.
Setting left and right indents
To make headings a little more distinctive, you can make them start within the margin set for the body, e.g.
<style type=”text/css”>
body { margin-left: 10%; margin-right: 10%; }
h1 { margin-left: -8%;}
h2,h3,h4,h5,h6 { margin-left: -4%; }
</style>
This example has three style rules. One for the body, one for h1 (used for the most important headings) and one for the rest of the headings (h2, h3, h4, h5 and h6). The margins for the headings are additive to the margins for the body. Negative values are used to move the start of the headings to the left of the margin set for the body.
In the following sections, the examples of particular style rules will need to be placed within the style element in the document’s head (if present) or in a linked style sheet.
Controlling the white space above and below
Browsers do a pretty good job for the white space above and below headings and paragraphs etc. Two reasons for taking control of this yourself are: when you want a lot of white space before a particular heading or paragraph, or when you need precise control for the general spacings.
The “margin-top” property specifies the space above and the “margin-bottom” specifies the space below. To set these for all h2 headings you can write:
h2 { margin-top: 8em; margin-bottom: 3em; }
The em is a very useful unit as it scales with the size of the font. One em is the height of the font. By using em’s you can preserve the general look of the Web page independently of the font size. This is much safer than alternatives such as pixels or points, which can cause problems for users who need large fonts to read the text.
Points are commonly used in word processing packages, e.g. 10pt text. Unfortunately the same point size is rendered differently on different browsers. What works fine for one browser will be illegible on another! Sticking with em’s avoids these problems.
To specify the space above a particular heading, you should create a named style for the heading. You do this with the class attribute in the markup, e.g.
<h2 class=”subsection”>Getting started</h2>
The style rule is then written as:
h2.subsection { margin-top: 8em; margin-bottom: 3em; }
The rule starts with the tag name, a dot and then the value of the class attribute. Be careful to avoid placing a space before or after the dot. If you do the rule won’t work. There are other ways to set the styles for a particular element but the class attribute is the most flexible.
When a heading is followed by a paragraph, the value for margin-bottom for the heading isn’t added to the value for margin-top for the paragraph. Instead, the maximum of the two values is used for the spacing between the heading and paragraph. This subtlety applies to margin-top and margin-bottom regardless of which tags are involved.
First-line indent
Sometimes you may want to indent the first line of each paragraph. The following style rule emulates the traditional way paragraphs are rendered in novels:
p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }
It indents the first line of each paragraph by 2 em’s and suppresses the inter-paragraph spacing.
Copyright © 1994-2003 World Wide Web Consortium, (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231
Continue reading at http://www.w3.org/MarkUp/Guide/Style
