Working With Style Sheets


What's a style sheet?
Style sheets allow you to control fonts, colors, margins, typefaces and other aspects of web page style without compromising its structure. CSS is a simply style sheet mechanism that allows web authors to attach style to HTML documents. In other words, you write up your page layout specifications once and the entire page or series of pages use the same style sheet. This class web site uses a single cascading style sheet that applies a specific font face, font colors and sizes, as well as a consistent background, to every page in the site.

The term cascading style sheets means that more than one style sheet can affect the same page. An inline style sheet is coded directly into the web page. A span is a single style sheet that is referenced by multiple pages. If both an inline and a span style sheet attempt to affect the same item, an <H3> command for instance, the closest to the <H3> command wins.

One Style Sheet--One Page
Inline style blocks can be placed between the <HEAD> and </HEAD> tags, directly in the HTML document. Here's an example:

<HEAD>
<STYLE="text/css">
<!--
BODY {background-color: white}
A:link {color: red}
A:visited {color: blue}
H1 {font size: 24pt; font-family: bookman antiqua}
H2 {font size: 18pt; font-family: verdana}
H3 {font size: 14pt; font-family: arial}
-->
</STYLE>
</HEAD>

Example of in-line style sheet
Second example of in-line style sheet
Example of in-line style sheet used to create fixed background

One Style Sheet--Many Pages
Begin by creating a style sheet like the one above using a text editor. Do not make this an html document, just a file containing the style sheet commands. Save it in your web page directory as a text file, giving it a file extension of .CSS and its own name, such as STYLE.CSS. Then place the following command on your web page to call for the style sheet:

<LINK REL=stylesheet HREF="http://www.yourserver.com/STYLE.CSS" TYPE="text/css">

What HTML Tags and Commands Can You Define?
You can define any HTML tag including font/text definitions, margin/background commands, and positioning/division definitions.


Web Author: Jennifer Lagier Fellguth
Copyright ©2007 by Jennifer Lagier - ALL RIGHTS RESERVED
Please report any broken links to jfellguth@hartnell.edu