Introduction to Cascading Style Sheets Spring 2000

Style sheets are a way for you to define the way your document will appear. HTML defines the structure, CSS defines the style.
There are three ways to add style to your document that we will cover in class:

Inline (in the line of code).
You add inline style by using the "style" attribute:

This paragraph has a style specifing red, 18 pt text that should be displayed in Arial; if Arial is not available, then in Verdana; if not Verdana, then Times; if not times, then the default serif.

what is the difference between serif and sans-serif?

The style in the above sentence is attached to a paragraph tag < p>

<P STYLE="color: red; font-family: 'Arial, Verdana, Times,', serif; font-size: 18pt;">

Using CSS inline follows our standard "magic formula":p is the element, style is the attribute, and the value is a series of specific style instructions

Embedding a style sheet will apply the style to the whole document, instead of just one tag.
Style information (instructions/definitions ) is placed at the top of the document, within the head tags.

<STYLE TYPE="text/css">	<!--	H1 {	font-family: 'Arial, Verdana, Times,', serif;	font-size: 18pt;	}		P {	font-family: 'Palatino', sans-serif;	font-size: 12pt;	}		A:link {color:#0000cc; font-weight:bold;}	A:active {color:#0000ff; font-weight:bold;}	A:visited {color:#333333; font-weight:bold;}	-->	</STYLE>


Linking to an external style sheet is the most efficient overall way to add style to your document. By linking, you can use the same style sheet with hundreds of pages. For example, if you have a site with 300 pages, and want to change the way they all look, with a linked style sheetyou would only need to change the .css file, instead of going through and changing each web page individually.
To link to external sylesheet, you use the link tag with in the head of the document:

<LINK REL= "stylesheet" HREF="style.css" TYPE="text/css" TITLE="externally linked style sheet">

It is extremely important to have the type attribute within the link tag. Without specifying the type as text/css, some browsers (notably netscape 4.x) will not know how to interpret the information and will simply display your css code.

Here is an example of an external style sheet (After defining the style in your external style sheet, save it as text only, with an extension of .css)
<!--authored and designed by J. Baxter, 1998--><!--H1 { font-family:"Arial, Palatino, Verdana, serif";font-size:18pt; text-align: center;color: #000;}H2 { font-family:"Arial, Palatino, Verdana, serif";font-size:16pt; text-align: center;color: #000;}A:link { color: #000066 }A:visited { color: #000066 }A:active { color: #900 }.hide {  display: none;  color: white;}//-->
Surround your style definitions with comment tags to hide them from older browsers
next