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

Why stylesheets?

Stylesheets were developed to provide a simple, powerful way of controlling layout on Web pages. They are intended to replace a wide variety of hacks, workarounds and general abuse of HTML that designers previously resorted to in order to obtain specific effects.

Separating style and content

Stylesheets are usually included in separate files from the HTML content (you include a reference to the stylesheet within the HTML page). This reinforces one intention of stylesheets, which is to separate visual style from content and meaning. Separating visual control (such as font sizes) into a stylesheet, and leaving the HTML to represent meaning (such as emphasis, headings, or a list of points), can result in better-quality HTML which is more likely to make sense in non-visual situations such as on a text-only or speech browser.

Precise layout control

Stylesheets allow more precise layout control than was available with HTML hacks. For example, HTML did not include any mechanism to indent the first line of a paragraph, and it was only possible to include margins by using bizarre workarounds involving large "tables". HTML did not allow line spacing to be specified, and did not allow font size to be specified in pixels.

Encourages consistency

Because one stylesheet can be used for an entire Web site, it can help to ensure consistency. For example, if your stylesheet specifies that level one headings are in green eighteen-pixel high Arial bold font, then this will apply throughout the site. If you later decide to change it, you need only alter the stylesheet, rather than all the individual pages.