SAN JOSÉ STATE UNIVERSITY
ECONOMICS DEPARTMENT
Thayer Watkins

Style Sheets

Original Purpose

Style sheets originated as a means of maintaining stylistic consistency among a group of Webpages. For example, at San Jose State University a syllabus for a course is called a greensheet because it is supposed to be printed on green paper. With the emergence of the Web as an important element of education many instructors have the syllabi for the courses they teach available on the web. Greensheets are not only green they usually have a number of common elements. Without style sheets each of the greensheets is an independent element. The color of each greensheet would be imposed by the background color attribute of its <BODY> tag. If an instructor decides to change the shade of green used for his or her greensheets then each greensheet's file would have to changed independently.

With style sheets the matter of changing a common element is much more efficient. Each greensheet file is linked to the same external style sheet file. The style sheet file specifies that the <BODY> tag should have a particular background color. If this background color is changed then the background color of all the HTML files linked to the style sheet will change instantly.

The style sheet format is called Cascading Style Sheets. This is an unfortunate choice of a name because the Cascading term obscures the more important concept of style sheets. Cascading just means that an attribute such as color is passed from an element to a subelement unless it is overriden by some local specification. The subelement is said to inherit a characteristic from its parent element. Instruction in a Webpage takes precedence over the inherited characteristics.

The format of the style sheet code is

Selector {Declaration}
where the Declaration is of the form
Property:Value;

For example, to specify that the background color for the <BODY> tag is green the code would be:

BODY {background:green;}.

Suppose this code is in a file entitled syllabus.css, the .css being for cascading style sheets. A webpage file is linked to this style sheet by means of a <LINK> within the <HEAD> portion of an HTML file. The code would look like this:

<HTML>
<HEAD>
<TITLE> ..... </TITLE>

<LINK REL="stylesheet" TYPE="text/css HREF="syllabus.css>
<HEAD>
<BODY>
...........
</BODY>
</HTML>

Of course, typically there would be many different styling instructions given in a .css file. In one line of code there may be many declarations for one selector. The also may be a list of selectors (separated by commas) for which a list of declarations apply. For example, suppose the heading tags <H1>, <H2> and <H3> are to use a red font and to be centered. The code for this is:

H1, H2, H3 {color:red; text-align:center;}

A Webpage producer might feel that the size of the font for an <H1> heading is a bit too large. Font size can be specified in Cascading Style Sheets in a number of units including points. One point is 1/72 inches. To change the font size for an H1 heading only requires this line of code in a .css file:

H1 {font-size: 12pt;}.

While the original intent was to use cascading style sheets to specify the attributes of HTML tags the rules allow the drastic modification of a tag to the extent that it becomes virtually a new tag. For example, a desirable tag for text that included mathematical equations is one in which an equation is written on a new line, centered with a large font and a background in yellow. This can be achieved by revising the <H4> tag as follows:

H4 {text-align:center; font-size:18pt; background: yellow;}

Cascading style sheets is a very important topic in markup languages and it is growing. There is now a CSS2 specification which encompasses CSS1 and goes beyond. But even the simple style sheet elements cited above are useful and powerful. For example, in HTML tables all the data entered into cells using the <TD> element is left justified. For numbers this does not look right. An align attribute can be included in each <TD> tag but this is tedious. Using cascading style sheets all that is required is the following line of code in a .css file:

TD {text-align: right;}.

Subsequent Objectives Achieved by Style Sheets

Although it probably did not occur to the originators of style sheets at the time, style sheets have come to serve a much more general function. The original HTML was a relatively spare language involving elements with structural content. Over time user demand led to the creation many new tags concerned only with the presentation of the document. This resulted in HTML being cluttered as a language. Style sheets offered a means of specifying presentation information without creating more tags. Style sheets meant that some tags in HTML that are only concerned with presentation could be scheduled for deletion in the future. For now these tags are labeled as deprecated.

HOME PAGE of Thayer Watkins