Capt. Horatio T.P. Webb

Cascading Style Sheet Reference -- SPRING 2000
DISC 3371 Transaction Processing I
Last Updated 2PM 11/11/2007

init tout

This document uses: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

See quirksmode for alternative interpretations of the various browser differences and solution options for CSS.

CSS Structure

The general notion of a style sheet is to define for a particular element or type of element specific styles that control such presentation properties as: color; font; background; and position. In its most simple form, the style information (rules) is contained inside the HTML document HEAD tags. In general the CSS rules consist of a selector (an HTML element) and a declaration (assigning a property of the selector a value). In the simple case, each element type is first named, then followed by a {, then a property is named followed by a : and then an appropriate property value and finally ending with a }. Multiple properties for a selector are separated by a ;.

In general, four ways to identify the style sheet are available:

Typical CSS specification in the HTML document heading.

<HEAD>
<STYLE TYPE="text/css">
...
element_type or selector { property₁ : value ;
                           property₂ : value ;
.
.
.
                           property_n : value }
...
element_type or selector { property₁ : value ;
                           property₂ : value ;
.
.
.
                           property_n : value }
..
</STYLE>
</HEAD>

There are three other ways to specify a style sheet:

Linked CSS
You may link to a style sheet that is stored at another URL. The format is:
<HEAD>l
<LINK REL=STYLESHEET TYPE="text/css" HREF="http://some_other_url" TITLE="some_title">
</HEAD>
Here the style sheet at the other URL must begin and end with <STYLE> tags.
Imported Style Sheets
You may also use an imported style sheet that can be merged with an existing style specification in the document. Format is:
<HEAD>
<STYLE TYPE="text/css">
@import url(http://some_other_URL);
</STYLE>
All @ commands (@import included) must preceed all other rule sets.
STYLE inside the <BODY> tags
Lastly, you may insert style rules inside a specific HTML tag in the body of the document.
<some_tag STYLE="property : value ; ...; property : value" >
For example:
<P STYLE="color:blue">some text</P>
will make the text inside the <P> display in blue, like this:

some text
CSS Classes
Often rather than an ALL or nothing approach to specifying style parameters we often wish to have some HTML elements styled in one fashion and other HTML objects styled differently. To do this we use CSS classes. This involves assigning a "class name" to an HTML element in the style sheet. You can use any name. This defines a particular style for the class and then referencing the "class name" in the HTML.
Georgraphically, in the style sheet we assign an HTML element a class name:
HTML_element.class name { CSS Specification}
and then in the HTML element tag, we specify that the element is of this "class":
<HTML element tag name class="class name">
For example suppose we want some paragraphs to be in a red font. In the style sheet we could say:
p.redcolor {color:red;}
and then on the HTML page:
<p class="redone"> content here</p>
"content here" would appear in a red font.
Psuedo-Classes
A link in HTML (i.e., the <a href="..."> tag) has several possible "states". These values may be set as attributes of the <BODY> tag:
<BODY link="#0000ff" vlink="#00ff00" alink="#ff0000">
Here the unvisited link is blue, a visited link is green and an active link is red (i.e., a link color WHILE it is being active followed). Alertnatively you may control the link actions by CSS. CSS provides not only color specifications for the three link states -- but also adds the ability to change the color of the link when the mouse rolls over the link (called "hover"). In CSS these properties are set by:
a:link {color specificaton}
a:visited {color specificaton}
a:active {color specificaton}
a:hover {color specificaton}
Using the same colors as the body tag above (and adding a magenta hover) yields:
a:link {color:#0000ff;}
a:visited {color:#00ff00;}
a:active {color:#ff0000;}
a:hover {color:#ff00ff;}
SOME LINK TEXT
We can combine classes with psuedo-classes to allow use to specify many different link types. To do this we just add the psuedo-class action to the class name in the style sheet:
a.alt:link {color:#ff0000;}
a.alt:visited {color:#0000ff;}
a.alt:active {color:#ffffff;}
a.alt:hover {color:#000000;}
The HTML tage would then be:
<a class="alt" href="#">SOME LINK TEXT TOO</a>
which would appear as:
SOME LINK TEXT TOO

CSS Properties

CSS Property

CSS Values

font

font assigns up to six possible values for the font property in a single css declaration.

font-style

Choose from:

normal
italic
oblique

font-variant

Choose from:

normal
small-capital

font-weight

Choose from:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

font-size/
line-height

Choose from:

length plus
cm|mm|in|pt|px

percentage

font-family

Choose:

one or more
family names
separated
by commas

e.g., <span style="font:italic normal bold 20px comic sans ms;">some text</span>, makes this: some text