CSS review and tips

Cascading Style Sheets

Overview
Designers and desktop publishers have used "style sheets" for many years. If you use Microsoft Word, Adobe InDesign, or Quark Express, you have experienced first hand what a powerful tool styles can be. They provide a consistent look throughout your document, allow you to make change easily, insure accuracy, and save you time.

HTML has always focused on content over style. When the Web was launched at the European Particle Physics Lab in CERN the scientist were concerned about sharing data, not winning design awards. Web pages were simple in design and unattractive by current design standards. As industry embraced the Web, Graphic Artists exerted pressure on the W3C to allow for more control over the look of the pages. In 1996 the W3C put together a draft proposal defining Cascading Style Sheets. This proposal provided style sheets to control the look and layout of the page while, HTML controlled the structure and content. The Web developers eagerly embraced this code and all major browsers are implementing the CSS standards.

Sounds good doesn't it? Well there are a few problems. Older versions of the browsers do not fully support the CSS standards and even the newest browsers can be flaky in implementing certain CSS styles. I will be presenting the most commonly used and stable CSS components.

Along with the power which CSS provides comes an entirely new set of rules for implementation and more code to memorize. there are also rules regarding how styles affect HTML code and each other. Let's begin by reviewing those concepts.

Types of styles

The inline style which can be inserted into any existing HTML tag. Inline styles affect only the individual tag they are used in. If I have 10 <H3> tags, I would need to insert 10 inline styles to change the look of all the tags. Syntax for an inline style would be

< H3 style="color:#663399; font-family: Arial, Helvetica, sans-serif">
An example of an "inline style" which produces purple text displayed in the Arial font
</H3>
The attribute "style" is followed by

* an = sign
* open quote
* the property "color"
* a colon
* the hexadecimal# for purple
* a semicolon
* the property "font-family"
* another colon
* the value Arial, Helvetica, sans-serif
* ending quote

Another way to control only one area of a document is to use the <div> or <span> tags.
The <div> tag is wrapped around a whole section of content, or block (1 paragraph or several paragraphs of text.) Using the <div> tag will always cause your text to break as if you had included a <p> tag.

The <span> tag is wrapped around content which is on just one line, so if you want to turns 3 words red and keep them on the same line as their black friends use the span tag.
Document level styles - which are styles embedded within the <HEAD> tag of an individual document. Document level styles control each instance of the tag. When I use a document level style I only need one style to affect all 10 instances of the <H3> tag. Each instance of the <H3> tag contained on that page is automatically given the document level styles.

The syntax of documents level styles is to place this code within the head of the document

<HTML> <HEAD>
<style>

</style>

<TITLE>Linda's CSS test page</TITLE>
</HEAD>
Now whenever an <H3> tag is used in the page it will take on the color, font family and style listed above
For even more power and control I will use an external CSS file which is linked to a collection of documents. External .css files allow me to create a single file which contains a style for the <H3> tag. I can link 100 Web pages to this file. Let's pretend each page contains 10 instances of the <H3> tag, when I change the style of <H3> in the external linked .css file all 100 pages with 10 tags a piece change. 100 X 10 = 1,000 <H3> tags changed in one step!! Pretty cool.

Implementing this code requires a bit more work

First add this code to every page at your site

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="mystyles.css">

<TITLE>product page #1</TITLE>

Next create a file called mystyles.css and place it in the same folder as your HTML files.

this code would be inserted into the mystyles.css file

H3 {color:#006666; font-size:18pt; font-family:Impact; background-color:#99cccc}

Now whenever a page which has the link tag in the head, used the <H3> tag it will use the color, font face and background color from the mystyles.css file.
Another powerful aspect of CSS is the ability to create classes within styles. Classes allow you to create numerous styles which can be assigned to the <H3> tag. If you have a question and answer page which uses <H3> tags, you can create 2 styles one for the class of "question" and another for the class of "answer".

<HTML><HEAD>
<style>


</style>
To invoke these classes use this code

<H3 class="q">I am an example of a question that is formatted using an H3 tag, the attribute class, and a value of q </H3>
<H3 class="a">I am an example of an answer that is formatted using an H3 tag, the attribute class, and a value of a </H3>
You also need to be familiar with how the various styles interact with each other and with HTML.

External and document level CSS overrides HTML - if you have declared a style for the H1 tag in CSS and then enter <H1 align="right"> the browser will ignore the align attribute and use only the values found in the CSS.

inline styles override document level and external styles

document level styles override external styles
Now I would like to discuss the effects which can only be achieved with CSS.This is a partial list, please send me a note if you have other features to add.

line-height allows you to control the space between lines for a 1 1/2 spacing or a double spaced look

background-color produces a color behind words. This allows you to add color to text without graphics or without creating a table and coloring the table cell. You can also use background-image to display a repeating image behind works.

margin-left, margin-right, margin-top are my 3 favorites. In the past to achieve a margin you used clunky workarounds like list tags or created a table and added a spacer.gif to move the content over from the left margin. Now you can declare a margin and it will display on all browsers . You can also declare a margin of 0 and make sure your page starts at the very top and flush left edge of the page.

font-size You now have more control over font size beyond the settings of 1-7. You can declare fonts as points, pixels, inches, a percentage, picas... etc. I prefer to use pixels since I find it produces a more consistent result from Windows to Macintosh.

by using A:hover {color:990000;} I can change the color of a link when the visitor places their mouse over the link. Thus used to be an effect you could only achieve with graphics. Now just the code produces the effect.

The ability to have links on a page display in 2 different colors can be very handy. If you text navigation is over a dark color you may want your links to appear as white or a very light color, however when you create a link within the text on your screen a white link over a white page is invisible. Use the class feature to create 2 styles for links.

This code sets the standard link as red with a slightly different shade of red for hover and visited. The links which appear on the left side of the screen will be white, bold and have no underline (which reminds me of another CSS trick - the ability to remove the underline from a link)

A:link {color:ff0000;}
A:visited {color:cc0000;}
A:hover {color:990000;}
A.left:link {text-decoration:none; font-weight:bold; color:ffffff;}
A.left:visited {text-decoration:none; font-weight:bold; color:ffffff;}
A.left:hover {text-decoration:none; font-weight:bold; color:ffffff

To invoke the links which are white I use this code

<A HREF="page.html" class="left">