2 Domain Hosting

Cascading Style Sheets: An Overview

Cascading Style Sheets (CSS), are a tool designed to separate form from function in web page development. Style sheets store information that controls the formatting/style of a page (such as font size, color, and object placement) separately from the content of the page itself. This information can be used for one page or many. Depending on the type of style sheet you use, it is possible to change the style of an entire site by modifying only the style sheet. This makes it easy to create a uniform, consistent look.

Cascading Style Sheets give web designers much more efficient control over the design and appearance of web pages. However, depending on the version, CSS may not work with every type of browser. Lack of backwards-compatibility with existing browsers is, and will remain for some time to come, an obstacle to widespread implementation of CSS technology. Support for CSS did not start in earnest until a couple of years ago. Each browser supports CSS a little differently and you need to cross-test and possibly double-code to get the intended results.

For information on creating embedded styles and external style sheets, see Creating Style Sheets. For information on applying, editing, and deleting CSS styles, see Working with CSS Styles. For information on accessing and using the CSS Styles Tab, see Using the CSS Styles Tab. Other helpful CSS documentation includes Select CSS terms, Formatting with CSS, and Measurement Units and Color References.

This document includes information on the following:

• Types of Style Sheets

• Considerations

Types of Style Sheets

Dreamweaver allows you to work with two types of style sheets: embedded and external. One of the major drawbacks of designing with an external style sheet is that the style definitions are not visible in the web page until it is attached or linked to the style sheet. However, since embedded style sheets allow you to see the results of style definitions as you are defining them, many people prefer to develop design elements with embedded style sheets, then convert the styles to an external style sheet.

Considerations

Designing web pages with CSS involves many advantages and disadvantages that you should consider before implementing CSS. To help in your decision, a few key questions are provided below, as well as an example of two websites: one that uses CSS and one that does not.

Advantages to Using CSS

Using Cascading Style Sheets gives the web publisher several advantages. CSS allows you to:

• Save time formatting web pages
   

• Implement quick and easy design changes
   

• Promote a professional look by specifying units of measure
   

• Control the appearance of web sites more efficiently
   

• Create a viewable page (however unattractive) even on browsers that do not recognize CSS

Disadvantages to Using CSS

CSS are popular and seem to be the answer to some formatting and production challenges with web pages. However, the popularity is contained due to the following limitations of style sheets:

• Internet Explorer and Netscape have different standards for CSS. What works with one browser may work differently with the other
   

• Older versions of browsers may not support CSS
   

• Currently there are two CSS standards: CSS 1 (formatting) and CSS 2 (layout). Only recent browsers support CSS 2 and its additional functionality

Should you use CSS?

The decision whether or not to use CSS is a critical one. One of the disadvantages of CSS is the lack of backwards compatibly. Pages formatted with CSS will not appear the same way in older browsers. Some factors in the decision include:

Who is the audience for the site (or section of a site)?
If the audience is the general public, CSS is probably not a good choice.   

What is the purpose of the site?
If the site is promotional, CSS may not be a good choice. However, if it is more content delivery, CSS may be appropriate.

Do you know what browser(s) they will be using?
CSS requires Netscape 4 or Internet Explorer 4 or greater. If you can be reasonably assured that the users will have this minimum, CSS may be acceptable. However, if your audience could be using most any browser, CSS may not be appropriate. 

How does it look in older browsers (e.g., Netscape 3)?
All of the formatting done through the CSS will be lost in older browsers. For example, if you use the CSS to add color and identify specific fonts, that will be lost in Netscape 3. All of the content will appear but will be black on a white background using the default font of the browser.  

If the site is your first impression for potential students or customers, the use of CSS may not be appropriate, especially for the main pages. However, if the audience is students taking a class and they have access to the campus computer labs, CSS may be appropriate.  

Two examples:

The UW-Eau Claire homepage may be the first impression prospective students and employees have of the campus. It is critical that we do our best to ensure that we deliver the best impression possible. CSS is not appropriate.

The CITI and BITS workshops schedules designed for current UW-Eau Claire students, faculty, and staff. Most users will be using a campus computer with a recent version of Netscape or Internet Explorer. Assuming the pages look acceptable in older browsers, CSS is probably acceptable. 

UW-Eau Claire faculty and staff can test their pages with Netscape 3 in the CITI, Old Library 1100. You can also adjust your Netscape or Internet Explorer browser settings to ignore style sheets.