By Thomas Welsh and Fred Condo

How do you create a single Webpage that’s completely standards-based and allows complete learner control over what they view and how they view it? Cascading Style sheets, of course. Learn how cascading style sheets can empower both training developers and learners.

One of the benefits of online self-paced training is the degree of control it offers the learner. Self-paced instruction can give learners direct control over the speed at which instruction is presented, the sequence in which content is addressed, the duration of an instructional session, and so forth.

Designers already have explored how to provide learner control along non-typical dimensions, such as font size, image display, color, and layout. However, the level of granularity of learner control has been at the designer's discretion.

Unfortunately, many of the traditional solutions for providing learner control over digital instructional content have been proprietary, or non-standards-based. The continually increasing popularity of Web-based instruction has led to a call for standards-based solutions for all aspects of information display and interaction in which the format has been approved by the recognized standards organization for the Web, the World Wide Web Consortium (W3C) (2002). Enter cascading style sheets (CSS). By using cascading style sheets, though, designers now have at their disposal the means to provide learner control over all of the above dimensions of digital content.

An overview of CSS

The hypertext markup language (HTML) is used to embed structural information into text files. Web browsers contain default style sheets that control the rendering of HTML. In the mid-1990s, the makers of Web browsers, principally Netscape and Microsoft, introduced a number of appearance-related extensions into HTML. These extensions gave Web producers limited ability to override the default browser styles. Examples of these extensions include the font tag for specifying type styles and colors and the center tag for centering text and graphics horizontally.

The key problem with these extensions was the commingling of appearance information with the structural markup and content of Web pages. There are several problems that arise from the practice of mixing content with appearance-based directives. For example, there’s no way to express the idea that all level-one headings throughout a Website should be centered, set in a sans-serif font, in red. Instead, the same directives must be specified along with every instance of an h1 tag. The result is that every page in the site carries redundant information, which the server must transmit and the browser must interpret in each instance. Maintaining the site becomes error-prone and inefficient. Because a single site will have a multitude of style rules, the complexity and risk of error in maintenance are compounded. In the worst case, a naïve Web producer may omit the h1 tags entirely. Such practices make it impossible for Web browsers to detect headlines, having a serious impact on vision-impaired users, who depend on user agents to list headlines by voice.

Cascading style sheets enable HTML authors to change the default specifications in a style sheet rather than in HTML code, so that new style rules may be applied to all instances of a specified HTML context in a site. This is similar to functionality of custom styles in MSWord documents. A CSS-enabled Website that’s thoughtfully designed allows the developer direct, immediate, and global control over all major formatting elements.

This is critical to those designing sites for training and performance support, in which development is an iterative process. In addition, cascading style sheets help preserve the structural context of HTML that indicates how pieces of content relate to one another. Finally, CSS affords other benefits that were never available under HTML extensions. One key benefit of special interest to those designing web solutions for training and performance support is the ability of CSS to allow learner control over Web-based instructional content, as well as the navigational attributes of a Website.

Benefits of CSS

Separation of presentational information from structure and content. Much of the trouble associated with the embedded presentational directives of HTML can be attributed to the commingling of content with presentational information. Because the only way to associate presentational HTML tags and attributes with their targets is to place them in close proximity in the same file, there’s no way to disentangle them. CSS provides a mechanism whereby the association of content and presentation can exist without physical proximity. Designers can, as a result, physically and logically separate the content from its associated presentational styles. The most important benefits of CSS arise from this partition of content and style.

Centralization of presentational information. Because Web producers no longer need to include style information for every page, they can collect general style rules into a single file or small group of files. Once that link exists, it’s no longer necessary to edit each page to effect style changes. Instead, the designer edits the central style sheet, and the change immediately takes effect throughout all pages that are linked to the style sheet. The process of changing a central style sheet is far more simple and less error prone than performing a complex set of edits on every page in a Website.

Adaptability to multiple media. You can’t presume that users access the Web solely by means of a graphical Web browser, such as Netscape or Internet Explorer. Web-access devices are more diverse than ever. The Web needs to adapt to presentation via handheld computers, cell phones, computer-generated speech, and printers. CSS allows this level of on-the-fly adaptability from a single original Webpage.

Learner control. A benefit not often discussed in the general Web design literature is its ability to allow learner control over the content and navigational characteristics of a Website. Of course, this idea is impossible in traditional print media, in which information is fixed at the time of printing. Fortunately, users of print media have the ability to physically browse to any location in a text, and print media developers employ indices and cross-references to aid user control. However, since the advent of digital media, designers have been intrigued by the opportunities for more sophisticated learner control that these media provide.

Other requirements for learner control relate to the special needs of those with disabilities. For example, some users need to use large print or accommodate a deficiency in color perception. Such users benefit if they can override the designer’s presentation styles; they would be excluded from the Web without such a capability.

CSS and instructional design

Filtering dimensions. There are many reasons to filter a Web-based training or performance support system. Designers can develop models that can categorize content to allow end-user filtering along different dimensions. For example, designers can enable end-users to filter information for instructional or non-instructional use. For example, a typical training program might include the following instances of content:

• pretesting
• introduction
• presentation of information
• opportunities for embedded practice on knowledge or skills learned
• posttesting to ensure mastery of knowledge and skills.

A typical performance support system designed to provide just-in-time access to information might include only presentation of information. In addition, to facilitate the quick search and retrieval of information it might provide an index or search engine.

CSS can be used to differentiate these types of content for on-the-fly filtering by the end-user. By identifying types of content with a unique class identifier, the designer can make use of JavaScript to allow the end-user to render as visible or invisible each of the content types, effectively tailoring single-sourced content to the end-user’s particular need at the time. Table 1 illustrates the types of content provided under two differing modes of use.

Table 1: Visible Content Types According to Mode of Use

A Working Example

To demonstrate the ability of CSS to allow learner control over the presentation of information, we designed a simple Website, which can be accessed at http://learner-control.webclass.csuchico.edu/gas01.html. This example demonstrates learner control over two presentational aspects of a Website: 1) the amount of textual detail and 2) the presence of images.

A learner can control the type and density of information provided from the single Webpage by selecting options from an interactive form within the page. Using the form, a learner can parse information in the following configurations:

1.       Images Visible, Text Details Visible

2.       Images Visible, Text Details Invisible

3.       Images Invisible, Text Details Visible

4.       Images Invisible, Text Details Invisible

Figure 1 shows the Webpage viewed under the highest and lowest density conditions.

Figure 1. 
A single Webpage viewed under two dimensions of learner control over information density

Because we wanted learners to be able to control each aspect independently, the example uses unique id attributes of HTML link elements to enable or disable style sheets. JavaScript code adapted from Snowden (link to reference) responds to user input by changing the status of the style sheet that hides or shows images or details. In addition, the code uses cookies to maintain the browser in the desired state. If the browser accepts cookies, then it will retain the state even if the learner switches to other pages and then returns.

The style sheets are established in lines 8–10 of the file gas01.html. The JavaScript code is imported in line 11. The form in lines 15–39 presents the control panel. Clicking the appropriate button causes the display to change.

CSS classes control the appearance of virtually all of the objects on the Webpage, including text, graphics, and the control panel. To manipulate the appearance of objects on the page, we use JavaScript to cause the content page (gas01.html) to refer to one of three CSS files. For example, to hide text, we use the no-detail.css stylesheet, which sets to “none” the display property of all elements whose class is “detail.” To hide images, we use the stylesheet img_off.css, which causes images to be displayed normally. There are liberal comments in the code of all CSS files on our Website that explain in detail what each style rule does. Readers may freely browse all the files of the example by accessing http://learner-control.webclass.csuchico.edu/gas01.html.

Other opportunities 

CSS affords control of virtually every aspect of the visual presentation of Web pages, not limited to the simple hide/show behavior in our example. Moreover, through its :hover selector, CSS can respond to user-generated events, such as moving the mouse over designated regions, even without JavaScript.

Through the appropriate application of style sheets and cookies, an instructional Website could implement a preferences system that enables learners to control any CSS-addressable aspect of the site’s appearance. The site could offer several different sets of styles encompassing color schemes, font selections, type size, and other visual aspects of the site. Such preferences could be maintained in a set of cookies in the manner of our simple example.

Each browser, however, maintains its own set of cookies, and separately on each computer that a person uses. A user who switches to a new browser, or who reinstalls the browser or operating system, or who uses more than one computer will have to enter her preferences multiple times. More sophisticated Websites, therefore, could maintain preferences in a database. The preferences can be associated with a user ID/password combination. This arrangement reduces the burden on the users, and they would only need to recall an ID and a password to recover all their preferences.

Best practices 

Modern Web browsers are fairly good implementations of CSS, and the CSS specifications offer a broad range of alluring stylistic capabilities. Nonetheless, adhering to certain best practices will minimize the risk that one or another of the standards-compliant browsers will fail to render a page as the designer expected. In addition, many of these practices result in fluid, legible documents that adapt well to different window or screen sizes and user preferences for font size. Some of the practices avoid programming errors that exist in popular Web authoring tools.

Here are some established best practices put forth by the inventors of CSS Lie and Bos, as well as our own recommendations.

Float objects rather than use layout tables. Web designers often resort to a table to move other, nonfloatable elements to one side of the page, creating a multicolumn layout. This can cause formatting issues when appearing on widely divergent output media such as cell phones, PDAs, and print. Tables, especially complex layout tables, are slow to render. In addition, the World Wide Web Consortium recommends against using tables for layout. In presentational HTML, it’s possible to float images or tables to the left or right margin so that other content wraps around the floated elements. With CSS, any element can float if you assign the float property to it, so it isn’t necessary to use tables for layout. The two principal advantages of CSS floating over layout tables are faster rendering and better accessibility.

Arrange content in logical order. Another way of stating this guideline is to not rely on CSS to position your content in the order you wish users to read it. Arranging the content of a page in its logical sequence ensures that the page continues to make sense even in browsers that cannot render the styles.

Test pages in the absence of CSS. Even a CSS-compliant browser, style sheets may become temporarily unavailable due to a network failure or other cause. For this reason, test your pages for legibility with style sheets turned off. Failure of pages to degrade gracefully in the absence of style sheets causes serious problems of accessibility as well.

Test pages in all relevant browsers. Despite the emergence of browsers that adhere to the HTML and CSS standards, it’s still necessary to test designs in several relevant browsers, such as Internet Explorer, Netscape, Mozilla, and Safari. This is due to ambiguities in the standards, differences in interpretation of standards, or outright errors in implementations. If a significant proportion of your site’s visitors uses older browsers, such as Netscape 4.x, testing is imperative.

Use a generic font family. In print, designers can choose from a multitude of typefaces and can specify the font that best solves a communication problem. On the Web, only the typefaces installed on the end-user’s computer are available. Typically, these are the fonts installed by default in the computer’s operating system. Nonetheless, you may wish to specify fonts for various contexts in your Webpages. When you do, always list the appropriate generic font family as the last item in the list of font families for your style rule. For example: body {font-family: Palatino, "Times New Roman", serif}.

There are five generic font families: Serif fonts have small extensions (serifs) on the ends of strokes; sans-serif fonts lack serifs; monospace fonts have glyphs that are all the same width; cursive fonts look like handwriting; fantasy fonts are miscellaneous display fonts for special uses. Many computers lack cursive or fantasy fonts, in which case the browser will substitute another font.

Use numeric color codes. The CSS standard defines only 16 color names (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white). Even though browsers may recognize other names, such names are nonstandard and may produce unexpected results, particularly in older browsers. Therefore, it is best always to specify colors as hexadecimal or percentage codes (that is, use #FFFFFF rather than white).

Use External Style Sheets

Create style sheets as discrete text files that you link to your Webpages. This practice eliminates unnecessary redundancy in the Website and enables you to establish alternate style sheets. Use embedded styles only when you need to override your external style sheet for a single, exceptional page. If you find that you are often overriding the external style sheets, it’s time to redesign the external style sheets. Finally, reserve inline styles with HTML’s style attribute only for situations where it is absolutely necessary to accomplish an effect.

This practice is particularly important because it minimizes maintenance tasks. The less style information is dispersed throughout a site’s pages, the less effort needs to go into maintaining the site’s style sheets. By keeping as much style information as possible in centralized external style sheets, you will reduce the likelihood that a style you want to change is neglected.

Use a W3C core style. If you aren’t a graphic designer or don’t wish to take the time to develop your own style sheets, use one of the W3C core styles available at http://www.w3.org/StyleSheets/Core. They provide a variety of basic style sheets appropriate for general use--and they’ve already been written and tested for you.

Avoid workarounds. One of the benefits of Web standards is that Webpage creators can avoid working around quirks and bugs in browsers. Nonetheless, there are bugs and quirks even in modern browsers. Searching the Web for “CSS workaround” will confirm this. Many of the workarounds have to do with layouts that require pixel accuracy, and whose designers consider a browser’s misinterpretation of the box model to ruin the design. To avoid such bugs, many examples on the Web use bizarre syntax that risks failure when repaired versions of browsers emerge. Rather than work around the bugs, it’s best not to insist on control down to the pixel. Heed the practices above that encourage fluid, adaptive documents.

Be flexible to keep it simple. CSS doesn’t offer the precision of presentation control that exists in print. It would be counterproductive for the Web to have such a rigid level of control because of the diversity of users who, and output devices that, access the Web. The best design practice is to create flexible presentation styles. Simplicity is best. If you are willing to accept some deviation from your ideal design, your style sheets will be simple and easy to maintain.