GeodSoft Introduction to Cascading Style Sheets

Use Cascading Style Sheets (CSS) to provide site wide control over the visual characteristics of common HTML elements.

This page will look quite different depending on what browser you are using. Some differences are noted below.

Overview

Cascading Style Sheets (CSS) are a technology that was first supported in the four level browsers. Use of them can help standardize the visual appearance of a web site. By separating the visual style information from the HTML, they can mitigate the contentions between those who see HTML as a page structure description language versus a page layout language; to a significant degree CSS accommodates both points of view.

CSS takes all the visual control features that were provided as tags and attributes in earlier HTML and adds some new ones while separating them from the individual HTML tags. Spacing and other visual attributes can be defined for the HTML tags for which they are appropriate. Further each tag can have multiple named styles in addition to a default style. A style sheet is a list of HTML tag names followed by visual attributes to apply to the tag when it is used. If named styles are used, a period followed by the style name is appended to the HTML tag name. In the HTML document the style is invoked by giving the tag a "class" attribute that equals the style name, as in "<LI class=UpperRoman>".

Style sheet attributes are keyword value pairs separated by a colon and enclosed in curly braces. Multiple attributes may be separated by a semicolon or the HTML tag can be repeated on separate lines as often as necessary, with each occurrence having an attribute. Repeating the tags is easier to read and safer; some versions of Netscape ignore everything enclosed in a set of curly braces if there is any part they don't understand or that is not coded correctly. Attributes that may have multiple values such as "font-family" can have a comma separated, prioritized list of values. For example "H1 {font-family: Helvetica, Arial, sans-serif}" would cause all <H1> elements to appear in Helvetica if that font is available on the system displaying the document and Arial if Helvetica is not available and the system default sans-serif face if neither was available.

Sample

A simple example of an external style sheet and an HTML page that uses it will help illustrate:

<html> <head> <title>Style Sheet test document</title>
<LINK rel=STYLESHEET href="STYLEXMP.CSS" type="text/css">
</head>
<body>

<P>This paragraph will appear slightly smaller (90%) than the base font size in a bright red text on a pale red background as described in the BODY definition in the CSS.</P>

<P class=large>This paragraph will appear a bit larger (105%) than the base font size and in the same bright red text on pale red background as the rest of the document.</P>

<P class=quote>This paragraph will appear slightly smaller than the base font. It will be indented the width of one and one quarter letter m's (somewhat more actually) on the left and two m's on the right. It will be in italic and the red of the text will be a little darker than the other text.</P>

Key Browser Differences

The browser comparisons were last performed in mid 2000 and probably are not an accurate descrition of how more recent browsers than were available at that time use stylesheet features. Of course some portion of the browsing public still use the browsers that came with their computers so all the browsers tested still represent some percentage of the browsers still in use.

If you look at the HTML source for this page this page, you'll see the above is not really produced by the example style sheet. For starters the <BODY> tag applies to the whole document and not a region within it. Also you cannot have <HEAD> and <TITLE> tags inside of another HTML document. All versions of IE appear completely incapable of correctly handling margins on any block level element such as <DIV>, <TABLE> or <UL> without mangling the entire document (making it 6 - 10 times it expected width). To make the illusion of indenting in such a way that it worked accross current browsers, I had to use the old standby, <TABLE>.

The paragraph tags from the example do actually appear in the document style sheet in the <HEAD> of this page and produce the displayed results. The background color is from a <DIV> tag. While IE (4 & 5) doesn't do margins in block level elements correctly it seems to do fairly well with most other CSS. Netscape seems loaded with bugs related to CSS. One is discussed at length on my first CSS test page. Netscape (4.5 - 4.7) clearly has trouble passing properties from higher level elements to lower level elements and displays a variety of arbitrary size and color changes for no discernable reason.

In this document, newer versions of Netscape display most text at 90% of the standard size. (The text above that is not indented is the standard size.) This is because Netscape is applying the default paragraph size from this document's style sheet and not the attributes of class "indent1" which indents a paragraph but leaves the font size alone. IE displays these indented paragraphs in the standard font size. Since this is a recent change in Netscape (between 4.5 and 4.7) it shows how difficult it is to determine which is the correct way to cascade the attribute values from higher to lower when they are not explicit. Should all the attributes for an explicit class defined at the top level be propagated to all levels below or should new defaults for the tag defined at lower levels override the specific class? Even if the standard is clear on this, it shows how difficult it is for both software vendors and page authors to know which is the correct way and for all to be consistent. In this document, since the paragraphs have an explicit font size it's hard to see this as anything but a new Netscape bug introduced while trying to conform to a complex standard.

Opera 4 seems to miss all background colors entirely and also displays larger differences between +1 and -1 font sizes compared to the base font than do the other browsers. It seems to do fairly well with other elements. All the browsers seem to get specific, non container elements like the various header tags right.

Cascading and Style Sheet Structure

CSS understands HTML documents as a series of nested blocks whose sizes, positions and margins can be controlled. CSS provides absolute size and location measures in pixels, inches, millimeters, centimeters, points and picas. It provides font relative sizes in em's (width of an "m") and ex's (height of an "x"). It also provides relative sizing by percentage for all size sensitive attributes. In addition, some attributes have keyword based values specific to the attribute. For example font-weight has lighter, normal, bold and bolder attributes. In addition, CSS can specify up to nine numeric levels of boldness; whether a specific system can display nine variations in boldness for any specific font is another matter.

CSS includes line, word and letter spacing. Margins, borders and text indents are new attributes that provide controllable horizontal and vertical white space for both pages and the elements inside of page without the need to nest entire documents inside of BLOCKQUOTE or single cell TABLE tags. CSS also allows the bullet style of unordered and the number or letter style of ordered lists to be specified so that nested ordered lists can be made to look like an outline.

Style sheets may appear in any or all of three locations: in external ASCII text documents with .CSS extensions, in the HEAD of an individual HTML document and in STYLE attributes in the HTML tags inside a document's body. Cascading works in two ways. Styles in the document HEAD add to, or if they conflict with, override styles in an external style sheet. STYLE tags in the document body add to or override both document head and external style sheets.

Further, most style attributes defined for outer HTML tags apply to inner tags unless a different style is applied to the inner tag. So in addition to margins, text and background color, other attributes such as font-family and font-size can be applied in the BODY tag and apply to nearly all other text elements in the document. Netscape has a lot of difficulty with this. Different attributes defined in lower level elements such as paragraphs, lists, or table cells override those defined at a higher level.

Using CSS to Standardize Web Sites

CSS can significantly reduce the total size of your HTML documents. With traditional HTML, each tag or block within a document gets it's own visual attributes or tags. These can mount up quickly if you do a lot of visual formatting in your documents. In the oldest browsers that recognized both TABLE and FONT tags, you could place a font tag anywhere in a document and the browser would apply the same font selections to everything until it found the matching end font tag. Starting with the three level browsers, many block elements and certainly table cells require formatting in each cell. Theoretically, CSS could let you format every cell in every table in every document on one site with one line. More practically you could define several named styles for cells in a system wide style sheet and just use the short names in each cell. Alternatively, a single site default could be defined and each document with a table that needed something different could define it's own alternate style. Multiple tables in the same document could be given different formatting by using the SPAN tag or STYLE attribute around the tables or by using named styles. Almost regardless of the authoring tool or editor used, its easier to change one attribute than the many that may be in a table. It also makes the raw HTML code much easier to read.

A single style sheet for an entire web site could grow quite large. This might noticeably slow the loading of the first document that used it. After that it would significantly speed the delivery of other pages as the entire style sheet would be cached. With a very large, web wide style sheet, it might be advantageous if the home page used a document specific style sheet including only those style properties needed by the home page.

By using a single external style sheet for an entire site, much about the appearance of pages throughout the site could be controlled, and changed when necessary, from a single location. For a tightly controlled web site, all styles would be defined in the site's central style sheet. New styles would require prior approval and the new styles with names would be placed in the central style sheet before anyone was permitted to use them. In a looser environment the central style sheet would set defaults throughout the site but individual page authors could add or override styles in their documents as desired.

Style sheets do not in any way help with content management such as adding standard page headings or footings to all documents. They simply assure that the same HTML tags will have the same appearance in all documents that refer to the same style sheet (and style name if named styles are used) but this can be a significant contributor to a site's visual consistency.

Implementation Issues

Like everything else on the web, different browsers implement different subsets of the CSS standard. With careful coding the differences can be minimized. Because CSS separates structure and appearance, HTML documents that use CSS have minimalist coding that will works well with older browsers. If your style sheets make use of colors in both backgrounds and text, the results might be somewhat dull in the older browsers but they will be quite readable.

Style sheets in external documents and a document's head section are totally ignored by older browsers. It's even possible to code style sheets in a document body in such a way they work with the newer browsers and are ignored by the older browsers. Because CSS comments are different than HTML comments, you can wrap the CSS attributes in HTML comments. Older browsers ignore the STYLE tags which they don't understand; the HTML comments cause them to ignore the attributes which would otherwise appear as text. Browsers that understand CSS ignore the HTML comments inside of style sheets.

Adoption of CSS can be gradual. A central style sheet that encapsulates the best of your current site can be created. New documents would be expected to use the style sheet. Updated documents would have formatting attributes made unnecessary by the style sheet, removed and style names added at the same time that a reference is included to the central style sheet. If a highly uniform style is acceptable, a simple Perl script could apply the same style sheet to all documents in your site or a specific directory hierarchy while stripping out the HTML formatting attributes that the style sheet is replacing. If your site is already coded to tight HTML standards, a more sophisticated Perl script could probably find groups of HTML tags and attributes and insert appropriate style names.

If you are responsible for a web site and are not familiar with CSS, you should be. In fact if you are not using CSS, you should at least be evaluating it's applicability to your site. Finally CSS is the first level of formatting control for XML. If you haven't started getting familiar with XML, which is likely to change the computer world almost as much as HTML has, then CSS can be your first small venture in that direction.

Additional Examples

Though I've been doing web pages for more than four years, I first worked with Cascading Style Sheets (CSS) late last year and early this year (2000). As I often do when I'm working with something new on a computer that has important visual attributes, I write text that describes the tools, tags, or techniques being used to achieve the results that are being displayed. If I encounter problems, descriptions of them are likely to be included as they are encountered with an explanation of what I think is going on. As I learn more, the new results are often appended to what has gone before. I have kept much of my original test page with a link to the style sheet page used to format it.

The original page with all of it's visual characteristics, cannot be displayed inside the context of a standard GeodSoft.com web page. Thus, if you view my original CSS test document you will see a bare page without standard navigation aids. The test page is entirely lacking style or esthetics. The full style sheet document for the test page can be viewed.

I have also attempted to move the test page into the content area of a standard GeodSoft web page, preserving as much of the original style as possible. The full style sheet for that page can also be viewed.

Copyright © 2000 - 2014 by George Shaffer. This material may be distributed only subject to the terms and conditions set forth in https://geodsoft.com/terms.htm (or https://geodsoft.com/cgi-bin/terms.pl). These terms are subject to change. Distribution is subject to the current terms, or at the choice of the distributor, those in an earlier, digitally signed electronic copy of https://geodsoft.com/terms.htm (or cgi-bin/terms.pl) from the time of the distribution. Distribution of substantively modified versions of GeodSoft content is prohibited without the explicit written permission of George Shaffer. Distribution of the work or derivatives of the work, in whole or in part, for commercial purposes is prohibited unless prior written permission is obtained from George Shaffer. Distribution in accordance with these terms, for unrestricted and uncompensated public access, non profit, or internal company use is allowed.