In this tutorial, we show how easy it can be to design simple style sheets. For this tutorial, you will need to know a little [HTML40] and some basic desktop publishing terminology.
We begin with the following little HTML document:
<HTML>
<TITLE>Bach's home page</TITLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
To set the text color of the H1 elements to blue, you can write the following CSS rule:
H1 { color: blue }
The [HTML40] specification defines how style sheet rules may be included in or linked to an HTML document (in the element's start tag, in the head of the document, or linked externally). Please consult the [HTML40] specification for details and recommended usage.
In our example, we place the rule in the head of the document in a STYLE element:
<HTML>
<TITLE>Bach's home page</TITLE>
<STYLE TYPE="text/css">
H1 { color: blue }
</STYLE>
<BODY>
<H1>Bach's home page</H1>
<P>Johann Sebastian Bach was a prolific composer.
</BODY>
</HTML>
Note that what appears within the STYLE element's start and end tags has CSS syntax, not HTML syntax.
This example illustrates a simple CSS rule. A rule consists of two main parts: selector ('H1') and declaration ('color: blue'). The declaration has two parts: property ('color') and value ('blue'). While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. Combined with other style sheets (one fundamental feature of CSS is that style sheets are combined) it will determine the final presentation of the document.
The selector is the link between the HTML document and the style sheet, and all HTML element types are possible selectors. HTML element types are defined in the [HTML40] specification.
The 'color' property is just one of around 100 properties defined in this specification that determine the presentation of a document.
HTML authors only need to write style sheets if they want to suggest a specific style for their documents. Each user agent (UA) will have a default style sheet that presents documents in a reasonable, but arguably mundane, manner. This specification includes a sample style sheet which describes how HTML documents typically are rendered.
This section will be expanded