An Introduction to Cascading Style Sheets

Cascading Style Sheets allow designers to precisely control various attributes of their documents, but also allow users to continue to effect certain attributes.

Styles are defined in either the header of a document, in specific HTML tags, or in a separate document which can be referenced by multiple HTML pages. Styles can inherit properties from one another -- thus, the description of them as being cascading.

CSS relies on fonts which are installed on the user machine. However, there are some complications, namely that system fonts and font sizes are not the same for Mac and Windows.

Basic syntax of CSS

The basic mechanics of CSS includes the following components: selectors, declarations, and properties.

Here h2 is the selector, color is a declaration, and red is a property.

h2 { color: red }

The example below shows one simple way to reference a style, where the style is declared in the header of a document. Each example of the h2 tag will appear red in a browser which supports CSS.

<html> <head> <title>document title</title> <style> h2 { color: red } </style> </head> <body> <h2>headline is red</h2> </body> </html>

Declarations can be grouped, as follows:

h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }

In addition to declaring tags, "classes" can be defined. "Classes" are indicated by a period (.) that precedes them.

<style> h1 {font-family: san-serif; font-size: 24pt} h2 {font-family: san-serif; font-size: 18pt} .red {color: red} .green {color: green} </style> Tags and classes can then be used in combination:

<h1 class="red">This is rendered as 24-point red san-serif text.</h1>

Stylesheets can be invoked through a link statement to a global stylesheet.

<html> <head> <title>document title</title> <link rel=stylesheet type="text/css" href="../mystyles.css"> </head> <body>

The content of mystyles.css may look somethings like this:

body { font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: normal; color: #000000; background-color: #FFFFFF } a:link {color : 990000; text-decoration : none; } a:active {color : 522455; text-decoration: none; } a:visited {color : 990000; text-decoration: none;} a:hover {color : 522455; text-decoration: underline;} .description { font-family:verdana, arial, sans-serif; color:#333; font-size:small; text-transform:none; } #content { position:absolute; margin-right:30px; margin-left:215px; width: 70%; }

The above stylesheet examples use "identifiers" indicated by the pound sign (#) and "classes" which are indicated by the period (.) that precedes them.

The HTML page that references the stylesheet can then use the identifiers and classes in combination, by using the DIV tag.

<div id="content"> <div class="description"> </div> </div>

Stylesheets can also be used to control colors and images. For example:

body { background: #FF0000 url(images/example.jpg) no-repeat fixed; } sets the background color to white, loads an image into the background, and prevents the image from scrolling down.