Cascading Style Sheets -- Style Outside of HTML

Okay, now I know what they are, how do I use them?

The first, and probably most difficult part for most HTML authors who want to use CSS is planning. CSS can be written "on the fly" but it becomes somewhat difficult, especially if a large number of documents are going to be linked to one style sheet. The general appearance of the document, or group of documents, needs to be specified. In the printing trade this is often referred to as getting "specked out". You will need to decide what you want to use in the way of typefaces, sizes, colors, margins and a variety of other aspects, in order of preference, and then be able to define them. I always find it helpful to draw general pictures of what I want the finished pages to look like, sketching in where I want graphics to go, where text should flow and break, and so forth.

A style sheet for a site can be as general or as specific as you want to make it. The browser defaults to what it would display if an element contains no style information or if a style is not defined for that particular element, so even people who use browsers that don't understand CSS can still get the content of a web page in a readable form if it is styled correctly using standard elements.

Once a style sheet is defined it can be embedded in the <HEAD> element of the document as in the following example. Note that the comment tag is added to hide the code from older browsers which might be likely to attempt to render the elements:

<HEAD>
<STYLE TYPE="text/css">
<!--
H1     { color: blue }
-->
</STYLE>
</HEAD>

A HTML document which contained the preceding header would render the browser's defaults for all elements except for the first-level header, which would be rendered in blue type.

A document which contained the preceding CSS example
in its head section would behave as follows:

The code below

would render like this

<H1>This is sample text</H1>

This is sample text