As the Web grows people keep inventing ways to increase the power and flexibility of the technologies that power it - especially HTML. CSS (Cascading Style Sheets) is one of those improvements. But, like so many good ideas, it makes our lives both easier and more complicated.

We learned earlier about using the FONT tag to control the look of text. While the FONT tag gives us a great many options for setting the style of a particular bit of text, it also has to be repeated a lot if we want our page to have a consistant look. CSS is one way of getting around that.

CSS is a method of standardizing the look of text across a whole page, or a whole site.. but it also adds a new layer of complexity to our site architecture.

While CSS is essentially a whole new form of markup language, we're only going to look at some of the most basic CSS tags and how they are integrated into a web page. We'll focus on the basic structure of a CSS file, and the font related properties.

One of the main problems with CSS is that the two major browsers, Netscape and Internet Explorer, support different features, and neither of them supports the whole thing. Which is enough to drive web designers to drink.

The Style Sheet

The Style Sheet is a separate document, created as a text file and saved with the (.css) file extension. You create it exactly as you would a new HTML page, using a simple text editor. A Style Sheet is a series of Style Declarations, each one defining the look of a particular HTML tag or creating a sub-class for use with any HTML tag.

A Style Declaration begins with the HTML tag or class name we want to work with, and then has a series of property declarations contained within a set of curly brackets ( { and } ). For each property declaration the property is named first, then the value is given, separated by a colon ( : ). The property declaration ends with a semi-colon ( ; ).

Single HTML tag declaration
A Style Declaration can be assigned to a particular HTML tag. Here we are defining the style for the P tag. The values we have assigned to the various properties will affect every use of the P tag in our HTML file.

Multiple HTML tag declarations
A Style Declaration can be assigned to a multiple HTML tags. Here we are defining the style for the P, H3 and TD tags simultaneously. Each tag is separated by a comma. The values we have assigned to the various properties will affect every use of the P, H3 or TD tags in our HTML file.

A CLASS declaration
A Style Declaration can be created for use with any HTML tag - this is called a CLASS. Here we are creating a CLASS called "small". The values we have assigned to the various properties will affect only those HTML tags to which we give the additional attribute & value of class="small".

The CLASS Attribute
When using CLASS declarations in CSS, there is suddenly a new attribute available for you to use with many HTML tags. The attribute is class and allowable values for it are the names of any CLASSES you have declared in your CSS file.

A CLASS declaration for a Specific HTML Tag
A Style Declaration can be created for with one HTML tag, but only when you want it - this is also called a CLASS. Here we are creating a CLASS called "grass" that will only be used with the P tag. The values we have assigned to the various properties will affect only those instances of the P tag to which we give the additional attribute & value of class="grass".

Notice the way these are structured: The HTML declaration begins with the tag you want to define - all by itself, no > or <. The CLASS declaration begins with the name you want to give the CLASS - preceeded by a period (.).

Technically these are case-insensitive - meaning it doesn't matter if you declare p or P, small or SMALL - but the convention is to declare HTML tags in CAPS and CLASSES in lower-case. Why? Because it makes proof-reading CSS files a hell of a lot easier.

The Font Properties

There are 8 basic properties that can be set for fonts. Think of these as the allowed attributes for a regular HTML FONT tag.

1. font-family
2. font-style
3. font-variant
4. font-weight
5. font-size
6. color
7. text-decoration
8. text-align

The font-family property
This is the CSS equivalent of the face attribue of the standard HTML FONT tag, and works pretty much the same way. Allowed values are any typeface name, separated by commas. As with the face attribute, the font must be available on the viewer's computer to show up. If the specified font is not available, the browser will look for the next font in the list until it either finds a font it has access to, or runs out.

There are five additional allowed values for this property which we haven't discussed before:

serif

This tells the browser to use whichever font the viewer has specified for their default serif font. For example: Times New Roman is a common serif font.

sans-serif

This tells the browser to use whichever font the viewer has specified for their default sans-serif font. For example: Arial is a common sans-serif font.

cursive

This tells the browser to use whichever font the viewer has specified for their default cursive font. For example: NevisonCasD is a common cursive font.

fantasy

This tells the browser to use whichever font the viewer has specified for their default fantasy font. For example: MotterFemD is a fantasy font.

monospace

This tells the browser to use whichever font the viewer has specified for their default monospace font. For example: Courier is a common monospaced font.

The font-style property
There are three allowed values for this property.

normal

This tells the browser to use the normal style of this font. It is the default value, and if you do not declare a font-style, this is how it will display.

italic

This tells the browser to use the italic style of this font. Not all fonts come with separate italic glyphs, but many can be forced into this configuration.

oblique

This tells the browser to use the oblique style of this font. Not all fonts come with separate oblique glyphs, but many can be forced into this configuration. Not supported at all in NN, and interpreted as "italic" in IE.

The font-variant property
There are are only two allowed values for this property.

normal

This tells the browser to use the normal style of this font. It is the default value, and if you do not declare a font-variant, this is how it will display.

small-caps

This tells the browser to use the small-caps style of this font. Not all fonts can be forced into this configuration. Not supported in NN.

The font-weight property
The value of this property may be declared with relative keywords, or exact weight numbers ranging from 100 to 900 in increments of 100. At this time neither NN or IE correctly display weight number values, so the only values you need to worry about are these:

normal

This tells the browser to use the normal style of this font. It is the default value, and if you do not declare a font-weight, this is how it will display. The exact weight of the displayed font will depend on any other style declaration you have made, and any settings the viewer has choosen to make.

bold

This tells the browser to use the bold weight of this font. The exact weight of the displayed font will also depend on any other style declarations you have made, and any settings the viewer has choosen to make.

The font-size property
The value of this property may be declared with absolute keywords, relative keywords, or absolute length or percentage. At this time NN or IE interpret the absolute and relative keywords very differently, so for the greatest control it's best to use either absolute length expressed in points or relative sizes in percentage.

percent

This tells the browser to display the font at the percent declared - relative to what it would be without the size declaration. The exact size of the displayed font will depend on any other style declaration you have made, and any settings the viewer has choosen to make.

pt

This tells the browser to display the font at the point size declared. Exact size of the displayed font should not depend on any other style declarations you have made, or any settings the viewer has choosen to make. If you've ever worked with types for print, you may be tempted to use "em" or "ex" - don't. These units are not currently supported correctly.

The color property
The CSS equivalent of the COLOR attribute of the FONT tag, and much the same. Values may be given as Hexcode numbers, color keywords or RGB values. CAUTION: There are only 16 suggested CSS color keywords, and their exact values are not defined, so you may get unexpected results when using them. Best to use Hexcodes or RGB values.

hexcode

This tells the browser to display the font in the specified color. Using Hexcode values is the most reliable method. The Hexcode system is exactly the same as discussed in Chapter 7, and must be preceeded by the hash mark ( # ).

keyword

This tells the browser to display the font in the specified color. CAUTION: There are only 16 suggested CSS color keywords, and their exact values are not defined, so you may get unexpected results when using them. Best to use Hexcodes or RGB percentages.

RGB values

This tells the browser to display the font in the specified color. This notation is based on the same principle as the Hexcodes, but refers directly to the RGB values by base-10 numbers ranging from 0-255 instead of converting to Hexidecimal notation. If you feel more comfortable thinking in base-10, this is a good system to use. Otherwise, you still have to look up the color you want on some kind of palette or color wheel.

The text-decoration property
This property describes the various decoration which can be automatically added to text, and replaces the STRIKEOUT and Underline HTML tags. It can also be used to supress the automatic underlining of hyper-linked text. It can take the following values.

none

This tells the browser to display the text with no text decoration. This will override any other style declaration you have made and automatic decoration such as underlining hyperlinked text, but will not override any setting the viewer has specified.

underline

This tells the browser to display the text with an underline. This will override any other style declaration you have made and automatic decoration such as underlining hyperlinked text, but will not override any setting the viewer has specified.

overline

This tells the browser to display the text with an overline. This will override any other style declaration you have made and automatic decoration such as underlining hyperlinked text, but will not override any setting the viewer has specified. Not supported in NN.

line-through

This tells the browser to display the text with a strike-out line. This will override any other style declaration you have made and automatic decoration such as underlining hyperlinked text, but will not override any setting the viewer has specified.

The text-align property
This property sets the alignment of the text, and replaces the ALIGN attribute of Paragraph and Heading HTML tags. It can take the following values.

left

This tells the browser to display the text with a left margin alignment. This is the default setting, and is what will be displayed if no text-align is specified.

right

This tells the browser to display the text with a right margin alignment.

center

This tells the browser to display the text with a centered alignment.

justify

This tells the browser to display the text with full justification to both margins. CAUTION: This value is displayed differently in NN and IE, and neither one properly handles the final line of the affected text with any regularity.