Cascading Style Sheets were concieved of in conjunction with the HTML 3.2 standard. The WWW Consortium maintains a CSS standard, but the implementation of the CSS features is largely up to the browser makers. Where HTML generally describes the structure of a document (paragraphs, headings, emphasis, and so on), CSS is designed to define the presentation of documents.
The purpose of style sheets is to define a consistent "style" in a document or group of documents. Right now, only HTML authors can define stylesheets for their documents; in the future both readers and authors will be able to define their own style sheets so as to see documents according to their own personal preferences.
Style sheets are interpreted differently by different browsers, so right now
A style sheet tells the browser how to format specific elements, or classes of elements. Style sheets can be included in a particular document (or even in an element), but they are most useful when used as a separate style sheet to which all similar pages refer.
The advantage of using external style sheets (or in fact, style sheets in general) is that you can change the behavior of all cases of a type of element. If you want all your pages to have a blue background, you can specify that in the group style sheet. If you later decide you want pages to be green, you simple change the style sheet. It also lets you override the browser defaults on the client machine, specifying text options and paragraph options.
In the future, the reader will be able to specify their own style sheet, either as a default or overriding the author's style sheet, and browsing will then become more user-controlled.
The browser applies the properties given in the style sheet for each element to every case of that element, or to every element having that class, if the properties have a class definition.
Class definitions mean that you can set a 'type' for all elements or for specific elements, and specify the behavior of elements of that class.
First, define your style. Suppose you want all the paragraphs in your documents to be indented .5 inches on the first line; you want all your H3's to be underlined, and your citations to be underlined instead of italic. We'll work on a basic style sheet, written in CSS/plain text using only those style definitions that currently work in bothNetscape Communicator and Internet Explorer 4.0.
You can put your stylesheet into the file itself if you're only using that style for one document. But you probably want to use a separate stylesheet document and refer to it in each document.
Style sheet documents (external style sheets) are plain text documents, with the extension .css. They contain the property definitions for specific elements to be used in displaying HTML documents.
Property definitions look like this:
TAG {property: property value;
property2: property value;
property3: property value }
You can define properties for most document structure (logical) elements. To make things more confusing, though, the property names are NOT the same as attribute names .
For instance, if you want all block quotes to be in italic and to have a colored background (say, a pale peach-- #F5CCB0), then you would have a property defintion for BLOCKQUOTE:
BLOCKQUOTE { background: #F5CCB0;
font-style: italic }
You do this for all the elements you want to define.
Some text properties you can define for a element include:
Other properties can only be defined for 'block-level' elements (elements that are their own text block, such as H1, P, etc.)
To find other style properties that you can set, use one of the references at the end of this page.
You can 'nest' styles, so that you can specify the style for all elements X that occur within an element Y, simply by using both tags, the 'outside' one first:
X Y {property: value; property:value}
H1 EM { color: red; font-style: normal; text-transform: uppercase }
You can also create new styles for special cases of tags, using 'classes'.
You can either define a generic class, say 'red', and invoke it in your documents (CLASS="red") as an attribute in those elements you want the style to apply to, or you can define a specific class, say B.red, and invoke it as <B CLASS="red"></B>.
For instance:
Special note: changing the color of links is a special case. There are pre-defined classes for links:
So, to make visited links purple, we would add the following style definition to the style sheet:
A.visited {color: purple}
If we just wanted all links to be purple and capitalized, whether or not they had been visited, we could put in:
A {color: purple; text-transform: capitalize}
To invoke the style sheet for a particular HTML document, you must add
the LINK element to the HEAD element:
<link REL="StyleSheet" TYPE="text/css" HREF="
example.css">;
where example.css is the URL of the stylesheet to use, and text/css
is the type of style sheet. You need to use a different type for other
style sheet languages, such as JSS.
You can put your style sheet inside the document instead of having a separate external style sheet. This is best if you only have one document that will ever use the style sheet.
Internal style sheets are also inserted in the head of the document, and look like this:
<STYLE TYPE="text/css">
<!--
Tag {property: value; property: value}
Tag2 {property: value; property: value}
-->
</STYLE>
You set up the style sheet the same way you would if it were a separate document, simply including it within the 'comment' tag between the STYLE tags.
You can also specify a style for a single element in the document. You do this by adding a STYLE property to the element for which you want the style change to happen, like so:
<TAG STYLE="propertyname: value">Element text</TAG>
This sets the style for that specific element only.
So, for instance, if you had a heading level 3 (H3) that you wanted to be blue, you would put:
<H3 STYLE="color: #0000ff">Text of Heading</h3>
Resources on Style Sheets:
Created by JAH, September 25, 1997