This informal paper documents my process of learning about Cascading Style Sheets, or CSS. The original version of this paper was created for Dr. Gary Burnett's course on Web Development & Administration at Florida State University's College of Information in September 2005. In January 2007, I revised it for K-State Libraries.
I focused my reading on the different types of style sheets – global/external, embedded/internal, and inline. I learned when it is appropriate for a designer to use each type, and problems that occur when a type of style sheet is incorrectly used. I found that the correct application of style sheets has implications for Web accessibility and usability, even though on the surface this issue seems to relate only to Web design.
Cascading Style Sheets, or CSS, have the virtue of divorcing content from style and vice-versa, freeing style from content. One only has to look at a few of the creations at the CSS Zen Garden to see how liberated style can be when designers use CSS. But there are several types of style sheet – how can a CSS newcomer know that they am using each type correctly? Even if I can’t yet attain CSS zen, can I at least see the path?
As it turns out, yes I can, with a lot of help from the tutorials and guides at the Web Design Group. I found the most about the different types of style sheets at the page Linking Style Sheets to HTML. And I discovered that, like the little girl with the curl, style sheets that are good can be very, very good; but when they are bad, they are horrid indeed.
Arguably the most important type of style sheet from a design perspective is the global or external
sheet. These style sheets do not contain any HTML tags such as:
<h2></h2>
They only contain style rules written in CSS syntax, which may describe H2 as:
h2 { font-family: Ariel, san-serif; font-size: 200%; color: blue }
The designer then writes all HTML documents separately from the style
sheet, and attaches the style sheet to each of these documents. The global or external style sheet
applies this rule to all instances of H2 that appear in the HTML documents it is linked to. If the
developer later wants to change H2 to green, she only needs to make one change in the style sheet,
rather than hundreds in each HTML document.
External style sheets can unify the look and feel of an entire Web site by imposing consistency. They can also conserve bandwidth and decrease download times, because a user’s browser usually caches external style sheets on a first visit. Once cached, they do not need to be loaded again (unless the user clears her cache). Ideally, external style sheets will be used whenever a designer manages multiple pages along the same theme. However, I found one of their most intriguing possibilities to be as a way of increasing Web accessibility for users with alternate browsing means. A designer can create several layers of external style sheets targeted at different users’ needs – one style aimed at average media, and other styles developed for alternate forms of access, such as text readers or handheld devices.
A second type of style sheet is commonly used in design work, but lacks much of the accessibility
potential of external style sheets. This is the embedded or internal style sheet. As the name implies,
the style sheet is created in the same document as the HTML content. Style is encoded in the same CSS
syntax seen above, and is inserted in the document’s
<head></head> inside the
<style></style> tags.
This method of applying style works well with a single Web page, or
with one distinct style that will be applied to only one page of a Web site. If the style will be
applied to more than one page, it should be written as a global or external sheet. Because embedded
style overrides external style, a designer must be consistent in developing for accessibility. If
external styles are developed for handheld devices or text readers, designers should also include
these methods of access when creating unique styles for embedded sheets.
The last type of style sheet discussed here is inline style, a style application that virtually
defeats the founding purpose of CSS. To inline a style element, a designer uses
<style></style>
to apply a specific piece of CSS syntax to one defined portion of an
HTML document – one paragraph, header, etc. This use of CSS syntax should only be used to apply
a style to one element of one Web page, and only rarely at that. Designers who depend too much on inline
style lose the benefits of separating style from content that is the core of CSS. Inline style elements
also contain accessibility problems, since the syntax used to write them cannot specify media targets
(screen, handheld, screen reader, etc) as can syntax in external and embedded style sheets.
The guides and tutorials at the Web Design Group contain many code examples for playing with or implementing the practices I have discussed here. Readers may be particularly interested in the elements of CSS that can aid accessibility. I have mentioned the designer being able to target a style to a method of access. The sources I used at the Web Design Group contain code snippets and examples that demonstrate how to target an access medium and where in the syntax such elements can and cannot be used.
Appropriate use of the different types of style sheets is very relevant to development and administration on almost any scale. Correct use of external style sheets means many things for the developer/administrator:
In reading a July 1, 1997 Alertbox article by Jakob Nielsen, Effective Use of Style Sheets, I noted that his main arguments in support of style sheets included “centralized design,” rapid download times, ease of maintenance, and other benefits that necessitate the use of external style sheets. In fact, he argues vigorously against embedded style, only conceding at the end that authors may occasionally need to create a unique look on one page of a site. In the subtle ways he identifies different types of style sheets, he also characteristically highlights the accessibility and usability issues that accompany them and the need for designers to use them correctly.
Sources Consulted:
Web Design Group: Style Sheets Now!; Quick Tutorial; CSS Structure and Rules; CSS Properties; Linking Style Sheets to HTML; and Style Sheet Dependence. All articles copyright 1997 by John Pozadzides & Liam Quinn. Retrieved September 12-20, 2005, from http://www.htmlhelp.com/reference/css/
World Wide Web Consortium (W3C): Cascading Style Sheets, level 1. W3C Recommendation 17 Dec 1996, revised 11 Jan 1999. Retrieved September 16-20, 2005, from http://www.w3.org/TR/REC-CSS1
Jakob Nielsen: Effective Use of Style Sheets. Alertbox for July 1, 1997. Retrieved September 16-20, 2005, from http://www.useit.com/alertbox/9707a.html
Copyright © 2005-2007 Jamene Brooks-Kieffer