Cascading Style Sheets

As add more pages to your site, you'll find it may become harder to keep the formatting consistent. Plus as you acquire more skills and become more concerned about how your web pages look, you may also become frustrated with the design limitations of HTML.

Originally, HTML's focus was to make highly formatted documents available over the Internet, and it was never meant to be a page layout language. But with the rapid expansion of the web from the original particle physics community to what we see today, there grew to be the emergence of the new field of "web design", and concern about how best to present digital information to the masses. In other words, better readibility and more attractive pages. The introduction of tables was greeted with joy by the new field of web designers, as it allowed the presentation of tabular data that could include images and the creation of mulitple columns.

But continued frustration over lack of control over color, size, indents, margins and other page layout characteristics, long available in traditional word processors and desk-top publishing programs, lead to the introduction of Cascading Style Sheets. CSS enable you to to define typographic information once and install it in a central location, and also allows for considerably more creativity and flexibility when using HTML tags. Additionally, it eliminates repetitive typing of of tag attributes, reducing file size and allowing for cleaner, more precise and easier to read code.

Styles change the default properties of HTML tags and can be applied to a single tag, the whole page, or all of the pages in a web site. There are three kinds of styles.

Inline styles are those that are used as part of the HTML tag itself. Embedded styles are located in the header of a page, and apply to that entire page. An external style sheet is a separate text file that each page in the web site can link to it in order to receive it's instructions.

The expression "Cascading Style Sheets" refers to the fact that you can use all three types of styles in a single document, with inline styles overriding conflicting specifications in the header, and the embedded style in the header overriding settings from an external style sheet. When a browser interprets style codes, it resolves conflicts by proceeding in a hierarchical fashion from external to embedded to in line, with precedence given to the more local codes. This allows you more flexibility in your design process, as you to make changes for a special cases. You might want all your headers to be 24 point, blue verdana, for example, but should there be one case in which you want a header to be 36 point red, you can create an inline style for it that will override the external settings.

The same kind of inheritance applies within the elements of a page as well. You can specify that all the text on a page be brown by refining the <body> tag. But if you want headers to be blue and list items to be green, you can create styles for them, and they'll override the more general statement for color in the <body> tag.

Not all definitions work with all tags. For the purposes of style, HTML tags fall into four general categories. The <body> tag, block level tags that have a line break before and after, such as headers and paragraphs; inline tags with no breaks like anchor tags and font tags; and image tags that have a height and width associated with them. What style definitions work with what kind of tag will become fairly obvious as you begin to work with styles, but in the beginning you may become frustrated with it.

The Bad News

Style sheets are recognized only by the newer versions of the browsers. Fortunately, the older versions just ignore them, and use the default settings for display.

A more annoying problem is that the major browsers, not surprisingly, have chosen to implement them differently. This means that you should check your pages on both Internet Explorer and Netscape, and also on a Macintosh and a PC, and be prepared for unexpected results.

One solution often used by commercial sites is to prepare two style sheets, one for Netscape and one for Internet Explorer, then use a browser detection script to provide the appropriate style to customer. For the rest of us, I think this is just too much work. Better solutions are to stick to the more universal properties that are supported by both browsers and avoid "browser specific" style definitions. Another is to first create your pages without styles and when it looks acceptable, add styles. This will mean it will "degrade" gracefully if displayed in an older browser.

Warning about closing tags

Until now, browsers haven't minded if you haven't closed tags for paragraphs with </P> or list items with </LI>, for example. With the emergence of style sheets and other possible web technologies down the road, however, it's critical to clearly define text elements this way, so it's a good practice to start doing this now - so you'll be prepared.

The syntax of style rules

H1 { font-size: 36 pt}	All of the <H1> tags will be in 36 points in size
P {font-face: arial}	All of the text enclosed within paragraph <P>......</P> will be in arial font. Since the size is not specified, it will default to whatever the browser normally specfies.

Some terminology

The two main sections of a rule are first the Selector, which identifies the tag to be modified, and the declaration, enclosed in curly brackets. The declaration itself is made up of two parts - the property and it's value, separated by a colon. The property is the parameter to be defined, such as font family or size, and the value can be a unit of measure, a color, or a predefined list. As the above examples declarations can contain more than one property, if they are separated by semicolons, as below.

Inline Styles just modify tags

The simplest way to apply a style to to simply add it to an individual HTML tag, such as:

In general, this isn't such a good idea, as it defeats the purpose of making styles global and easy to change. It's good to know about though, as it allows you to occationally override override higher level rules.

Embedded Styles used the <STYLE> tag in the header

A more useful method is to cluster all of the style rules in the header of the document, enclosed in the <STYLE> tag:

H1 { font-face: verdana; font-size: 24 pt; color: blue}
P { font-face: arial; color: red; }

The "text/css" statement anticipates future additions to the <STYLE> element. Right now, CSS is the only type attribute, but that will undoubtedly change as the web evolves. Best to leave it in there though, as some browsers may igore the style sheet entirely if it's absent.

External style sheets can affect more than one page

An external style sheet allows you to apply a single set of styles to several pages or an entire site. To set one up, you create the list of rules in your word processor and save it as text, with the .css extension. A style sheet does not contain HTML tags at all, nor is it structured into <head> or <body> An external stylesheet for the above examples would be a look like this, and have the .css extension:

H1 { font-face: verdana; font-size: 24 pt; color: blue}

P { font-face: arial; color: red; }

Linking to an external style sheet

To link a document to an external style sheet, you use the <LINK> tag within the header of the document. This has the effect of transferring the contents directly into the header, as if they had been typed there. Note that there is no </LINK>. This is an open tag that doesn't require one.

<HTML>

<HEAD>

<LINK REL=STYLESHEET TYPE="text/css" HREF="my-stylesheet.css">

...

</HEAD>

TYPE="text/css is again a bow to the future when there may be more than one type

HREF is the URL of the stylesheet. In this example, the stylesheet is located within the same folder as the page. If it were elsewhere, the full pathname should be included. A stylesheet can be named whatever you wish, as long as it has the .css extension.

Making your own tags

For the purpose of this introduction we'll work with exsiting HTML tags that we've used before, but be aware that there are two HTML tags that do nothing by themselves, but were created soley for use with style sheets. These are the <DIV>...</DIV> and <SPAN>...</SPAN> tags, which you can define in your style sheet declaration and insert them around areas when you need special formatting that you can't easily handle with existing tags. Additionally, selectors called CLASS and ID further allow you to refine style rules.

About Cascading Style Sheets