Are style sheets the holy grail of web design?


Cascading Style Sheets - Background
Cascading Style Sheets (CSS) are two proposed additions to the HTML specification - CSS1 and CSS2. The general idea of CSS has been around for a while, but actual implementation has been a bit slower. In general though, CSS looks like the long-term solution to cross-platform design of web pages. Bear in mind, though, that since style sheets are one of the very big areas of browser inconsistency, it is still currently necessary to employ pre-style sheet design techniques if you want your pages to look the same for all browsers.

Styles are defined in either the header of a document, in specific HTML tags, or in a separate document which can be referenced by multiple HTML pages. Styles can inherit properties from one another, hence the description of them as being cascading.

Microsoft was the first company to implement Cascading Style Sheets in the 3.0 version of Explorer. Microsoft's implementation is based on the spec developed by the W3 Organization. Netscape has followed-up with their own alleged implementation of CSS in the 4 version of Communicator. Both of these implementations are rather buggy, but they seem to be pointing in the right direction in the sense that they are based on a common standard.

CSS1 relies on fonts which are installed on the user machine. This is one of the things which complicates having a slick solution to the layout problem. Here are some of the complicating factors:

New technologies which began to emerge in generation 4 browsers allow for fonts to stream over the network along with the content of a page so that designers don't have to rely on the fonts installed on a viewer's computer. These technologies are not yet in wide use, but will likely become more common as bandwidth increases and new browsers stabilize.

Basic syntax of CSS1
The basic mechanics of CSS1 includes the following components: selectors, declarations, and properties. In simplest terms, it works like this:

H1 { color: blue } Where H1 is the selector, color is a declaration, and blue is a property. The following statement could be linked to HTML as in the following sample document: <HTML> <HEAD> <TITLE>title</TITLE> <STYLE> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> </BODY> </HTML> The example shows one simple way to reference a style, where the style is declared in the Header of a document. Each example of the H1 tag will appear blue in a browser which supports CSS1.

Here's a slightly more comprehensive example:

<HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://fargo.itp.tsoa.nyu.edu/~boom/style1.css"> <STYLE TYPE="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P class="bodytext">While the paragraph is green.</p> </BODY> </HTML> The second part of this example links to a separate file called style1.css which would contain the selector and declaration as follows: .bodytext { color: green; font-family: helvetica, arial; font-size: 14pt } So the example above shows two ways that style-sheets can be invoked: with a LINK statement pointing to an external style sheet, and a style declared in the Header of the document. The benefit of using the LINK construction is that more than one web page can point to the same external style sheet. This strategy allows you to create one or more global styles for your site which could be applied to an unlimited number of pages; changes to the formatting of all of these pages could be accomplished by editing the single external style sheet.

Declarations can be grouped, as follows:

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; } Here is a partial list of the properties which can be controlled via CCS at this time (and work fairly often):

font family
Allows you to specify which family of fonts to display text in. The font must be installed on the viewer's system.
font size
Specify size in various denominations. px=pixels, pt=points, pc=picas, cm=centimeters, mm=millimeters; or as a percentage relative to the base font size.
font style
font weight
text decoration
stuff like underline, strike-through, etc.

The recommended specification for CSS2 includes a much wider variety of properties which can be controlled including absolute positioning of objects on the screen, and various methods for filtering images.

Examples

Documentation

Building Web Sites - ITP Fall 2000 - Mike Cosaboom, Instructor
mc39@acf2.nyu.edu