APPENDIX: cascading style sheets

Using Cascading Style Sheets

Cascading Style Sheets (CSS) are lists of font and page preferences that you can save to an external file and then call from within your web page. In browsers that understand them (generally 4.0 and up), they are very valuable for making broad sweeping changes to an entire site by simply changing one file.

It should be noted that any colors that you have manually set from within the page will override the style sheet. If you want the style sheet to take precedence over the page, you must use the important tag.

To make a Cascading Style Sheet,

	Open Notepad by going to the Start Menu, Accessories, Notepad.
	Immediately save the file by using the menu: File - Save as.
	Name the file "mycss.css"

The .css identifies the file as a cascasding style sheet. (LOOK OUT! YOUR'E WRITING CODE!)

In the first line, type:

<STYLE TYPE="text/css">

This is identifying that you are writing a style sheet.

Go ahead and pop in the end tag as well:

<STYLE TYPE="text/css"> </STYLE>

And then give yourself some room by putting in several lines between the tags (use the "enter" key):

<STYLE TYPE="text/css">

 </STYLE>

On the line under the first tag, add "". This is our way of telling older browsers to look the other way:

<STYLE TYPE="text/css">
<!--

-->
 </STYLE>

This is the shell for every Cascading Style Sheet. You will never have to type another one if you:

Save this file.

Between the  tags, you will be defining style for elements on your web page. The syntax for this is:

TAG { property:modifier; property:modifier; property:modifier }

You can include as many properties and modifiers as you want. Or, as few properties and modifiers as you want.

In the example below, I apply some modifiers to the headings:

<STYLE TYPE="text/css">
<!--
H3 { font-family:Lucida; font-style:normal; color:blue }
H4 { font-family:Ariel, Helvetica, san serif; font-style: bold; color:red }

-->
</STYLE>

Now, all of the level three headings (the H3 tag) will be in blue Lucinda. Our level four headings (the H4 tag) will be in Ariel (or Helvetica or san serif) and will be red and bold:

Heading 3 (<H3>)

Heading 4 (<H4>)

Many of the existing HTML tags can be affected using a Cascading Style Sheet. Below, I have summarized some of the tags that can be altered and the properties that can be modified.

Text Modifiers

Any tag that affects text - that is, all headings, links, etc. can have a number of modifications made:

TAGS	PROPERTY	MODIFIER	EFFECT	EXAMPLE(S)
all of the following: H1 H2 H3 H4 H5 H6 B I U ADDRESS CODE P A:LINK A:ACTIVE A:VISTED A:HOVER	font-family	any font	uses font if available.	font-family: Arial
	font-size	enter a size in points	sets front size	font-size: 9pt
	font-style	normal italic oblique	loads font style if avail.	font-style: normal
	font-weight	normal bold bolder lighter	changes the font weight	font-weight: bold
	font-variant	normal small-caps	will make all letters into small capital letters (only works in Internet Explorer)	font-variant: small-caps
	color	Any RGB setting Any accepted HTML color	changes the text color	color: #ff0000 color: darkgreen
	text-decoration	underline overline line-through blink none	adds text decoration. Some elements incompatible with some browsers.	text-decoration: underline text-decoration: none
NOTES ON USAGE: When using the BODY tag, all text elements in the page will be affected except when overridden by another CSS style. Hyperlinks can be altered using CSS by using the a:link, a:active, a:visted, and a:hover tags: A:LINK refers to a hyperlink A:ACTIVE refers to the link as it is clicked A:VISITED refers to a link that has been visited A:HOVER is a special tag that works only in Internet Explorer. It describes how the hyperlink will look when the user passes the mouse over it.

Controlling Page Background with CSS

To use a background image, use the code:

BODY { background-image: url(imagename); }

Subsititute the name of your image for imagename.

To set the background color, use the code:

BODY { BACKGROUND: color }

Substitute the name of the color for color.

Creating your own styles

In additon to altering existing text syles, you can also create your own for an endless number of variations in your text, all controlled from one place.

The syntax for creating your own style is:

.stylename { property:modifier; property:modifier; property:modifier }

For example, let's say that you want to make sure that all product names appear bold red. You might create a style called "productname":

.productname { font-weight: bold; color: red }

It is important to note the period (.) used at the beginning of a custom style name. The style will not work unless you use a period at the beginning.

To apply the style in your document, you must use the <SPAN> tag in your HTML. For example, to apply the .productname class to the word "Widget", we would use the code:

<span class="productname">Widget</span>

You can use any of the modifiers listed under Text Modifiers, above.

Getting your HTML document to load your CSS

In the head of your HTML file (anywhere between the <HEAD> tage and the </HEAD> tag), use the code:

<LINK REL=StyleSheet HREF="mycss.css" TYPE="text/css">

This is only the beginning of what cascading style sheets can do. Search for Cascading Style Sheet at any search engine to find any one of many tutorials on its full use.

Certain elements (software titles, search engine logos, etc.) are copyright and/or trademarks of the respective copyright owners. Use of this material is restricted to educational use and is intended to promote both further understanding of the intellectual property discussed and, in effect, the product itself.