CSS Home

Introduction to Cascading Style Sheets

Cascading Style Sheets (CSS) are based on the concept of separating page appearance from content. The style command may be applied within an HTML tag, in the page's head section, or to numerous HTML pages with a single external CSS file. The following examples all apply a 48 pixel size and blue color to H1 text

Inline:
<H1 style="font-size:48px; color:blue;">

Page Header:
<style> H1 {font-size:48px; color:blue;}</style>

External File (called style.css):
H1 {font-size:48px; color:blue;}
Requires the HTML Page Header to contain:
<link href="style.css" rel="stylesheet" type="text/css">

In most real-world cases, you will want to use an external CSS file. In the example shown below, the CSS has been applied in the page header. This allows the user to examine both the HTML and CSS source code with the 'view source' browser command. The commands are the same. Since you now have four ways to format a given object, it is important to remember the order of precedence. Any CSS command will overrule an HTML format. A CSS command in a page header will overrule one in an external file, and a CSS command inline will overrule one in the page header.

Class and ID

Two new HTML tags, <div> and <span>, are used for CSS formatting. They produce no HTML format, so they are safe with older browsers. A class or an id can be applied to these or other tags to isolate items for special formats.

<div class="advertisement">Eat at Joe's</div>

In this example, the <div> tag is used to bracket the text of advertisements. A different font color, background color, border or location on the page could be specified with CSS commands without changing the HTML. You can see why an external CSS file could come in handy when the client wants you to give a Christmas look to a 9,000 page web site.

div.advertisement {width:200px; float:right; color:blue; background:#ccffff; border:5px ridge purple;}

This CSS command will put the advertisement in a 200 pixel wide box with blue font, pale blue background and a purple ridge border that is 5 pixels wide. The box will be displayed on the right side of the page. To use an id, the HTML is similar:

<div id="advertisement">Eat at Joe's</div>

The style command for an id is slightly different:

#advertisement {width:200px; float:right; color:blue; background:#ccffff; border:5px ridge purple;}

The data model for Style Sheets is the Document Object Model, which has a tree structure. Styles will inherit to all elements nested within the specified element. It is possible to change this inheritance in the style declaration, but that is beyond the level of this tutorial. To use CSS with XML, it is necessary to have a good understanding of the DOM.

©2003 All Rights Reserved