HTML structured mark up
Structured mark up with CSS
Cascading Style Sheets (CSS) is a style language that can be used to control the way a browser will render HTML or XHTML content. For example, a Web developer could use CSS to specify that every line within the <p> and </p> tags appear as a specific font family in italics at a specified font size.
p {font-family: verdana, arial, sans-serif;
font-style: italic
font-size: 14pt}
Using CSS it becomes possible to separate the style elements of a page; such as font size, colors, borders and other attributes that determine how a page will appear, from the structural mark up and content of a page. By only writing the code in the example above one time, a Web author could conceivably control the display characteristics of everything within the <p> tags for thousands of pages. In addition, CSS incorporates a strict hierarchy of style rules so that an author's style preferences can effectively "cascade" throughout a document or series of documents and thus integrate the style decisions of the author with the display characteristics of different devices, browsers and the personal settings of users (Musciano and Kennedy, 2002).
Although the benefits of designing Web pages using CSS have only recently become apparent to many Web designers, style languages are not a new phenomenon to the Web and nor is the ideal of separating content from style. As early as 1990, Tim Berners Lee was developing style sheets for some of the first Web pages. Other Web pioneers including Pei Wei, Robert Raisch, and Bert Bos also worked in the early 1990's on developing style languages and there was an effort at the same time in the ISO to develop a "complex style and transformation language" for SGML called Document Style Semantics and Specification Language (DSSSL) (Bos and Lie, 9, 1999). SGML, from which HTML is derived, is a mark up language that utilizes a strict document structure and was intended to function independently of the device on which it is viewed (Schmitt, 2003).
As use of HTML expanded to a broader audience, authors sought more creative ways to layout and style content, often at the expense of creating a well-formed HTML document structure. In response, and also in an effort to widen their market share, browsers began adding additional proprietary HTML tags and designers began incorporating them into their pages. The resulting creations often led to increasingly complex structured mark up instructions making pages much more complicated, slower to load and prone to errors depending on where and how the page was viewed (Schmitt, 2003). There had also been a growing dissatisfaction with the way that browsers often altered the presentation of Web pages and Web designers sought to have more control over the manner in which their Web pages would be displayed (Bos and Lie, 1999).
CSS is the direct outgrowth of a publishing medium in which authors, browsers, display devices and users all have some influence over how a Web page will be displayed. It was developed and initially proposed in 1994 by Håkon Lie (Lie, 1994). In many ways, the history of CSS closely mirrored the development of the Web in that it was influenced by the development of browsers, standards and by the dramatic growth of Web publishing. CSS's major advantage was that it was not only able to successfully separate style from content, but that it was also capable of integrating and combining the style influence of all of the competing display instructions.1
With CSS it is possible to specify many different display characteristics for HTML elements in different locations in different ways. The key to this integration is that the style rules are inherited in specific sequences and thus cascade throughout a document or set of documents. When done properly, CSS should balance the style intentions of the author with the needs of the user or the characteristics of the browser and display device. Another important aspect of CSS is that its syntax was intentionally devised to be a simple "declarative format" and not a "full programming language" (Bos and Lie, 10, 1999). As a result, CSS does not require Web designers to learn and understand complicated sequences of steps and they can typically rely on terms or concepts that closely match natural language and that can be easily demonstrated by use.
The design control of CSS is afforded by changing the declaration of the HTML element type selector. By linking styles to HTML tags, Web authors can usually override the default settings of the browser and have their document rendered on screen in the manner that they choose. In the style tag below, the HTML element level-1 header has a new declaration making it appear in a red color rather than the default, which is black.
<html>
<body>
<h1 style="color: red">h1 will now appear Red</h1>
</body>
</html>
Style sheets consist of properties and values. These properties and values when used in combination are referred to as rules. The properties referenced in rule statements come from six predetermined categories, which include "fonts; colors and backgrounds, text, boxes and layout, lists and tag classification" (Musciano and Kennedy, 2002, p. 254). When a rule affects part of the HTML document structure, it assigns the value determined by the author to that particular HTML element and alters the way it will be rendered.
HTML structured mark up |
Structured mark up with CSS |
|
|
Style sheets can be used by Web authors either inline with the HTML code itself, at the document-level within the <head> section of the HTML file and/or linked or imported as a completely separate external page that is referenced in the <head> section of the HTML page. Both inline and embedded style declarations are placed in the HTML document itself, which means those options would not allow a designer to make multi-page changes as they could if they were using an external style sheet. A designer could use inline and embedded style tags if they made only a few pages or if they needed special layout and design elements on specific pages that would override the external style sheet.
| Inline | <h1 style="color: red">h1 will now appear Red</h1> |
| Embedded | <head> <style type="text/css"> <!-- h1 {color:red} --> </style> </head> |
| Linked | <link rel=stylesheet type="text/css" href=http://pathname/redh1.css> |
| Imported | <style> @import (http://pathname/redh1.css); </style> |
Web authors are not the only ones who can make use of external style sheets. Style Sheets can also be created by users or user agents to allow users to customize their display settings or to create their own CSS files, which are stored in a user profiles area and change the display properties of a page based on user preference (Wooldridge, 2000).
The cascading part of CSS refers to the complex array of relationships that exist among the possible inline, embedded and external style sheets as well as the browser specifications, user settings and the unique display properties on which the page will be viewed. According to the W3C Web site, "the CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence" (CSS2 Specification, 6.4). For example, a style specification in an inline tag would override the specification in the external style page for that same tag.
Although the W3C CSS2 standard lays out a clear hierarchy of priorities and precedence among the various style sheets, the browsers do not always execute those conventions consistently. Designers must be wary of how each browser responds to different style scenarios and must take the appropriate actions to insure that exceptions can be made if their goal is to be viewed by the widest possible audience.2
The advantages of CSS are numerous. The syntax is relatively simple and requires little training to utilize. It can be employed in a number of different ways on single elements, documents or on collections of documents to effectively integrate the style needs of authors, users, devices and browsers. Perhaps the most important advantage of CSS is that it enables designers to make changes to entire sites simply by changing an external style sheet. This capability makes it possible to make global changes to a document template or style once and change an entire site thus reducing development time dramatically. By incorporating external style sheets, Web designers can also produce much cleaner code without excessive mark up language, which enables faster download times (Zeldman, 1999).
Another significant advantage of CSS is its modularity, in that it gives developers the opportunity to display pages differently depending on the display device and the user settings. This allows pages to be viewed in a style acceptable to the author in many different browsers and under many different circumstances (Zeldman, 1999). For example, the CSS2 standard incorporates media-specific style sheets that can be imported or not depending on whether or not the display device can render it. These media specific style sheets can adjust pages for viewing on specific devices such as handheld computers and televisions and can also be used to facilitate aural and braille rendering to make pages more accessible to all users (Lie & Saarela, 1999)
Finally, CSS offers certain pseudo-elements and pseudo-classes that are not part of HTML and that add many additional style and presentation elements to a page (Musciano and Kennedy, 2002).
pseudo-elements |
These Can do things like change the properties of the first line of text
or just the first letter.
|
pseudo-classes |
These can change the color and style of a hyperlink. |
The ability of CSS to live up to its potential relies on two very important things. The first is that CSS must be a standard that can be used consistently and in accordance with set guidelines and syntax. The other is that CSS must be supported by standards-compliant Web browsers. CSS is itself a standard that has been adopted by the World Wide Web Consortium (W3C), a group of approximately 450 member organizations who develop standards for the Web. The creators of CSS, Håkon Lie and Bert Bos, completed the original specifications for CSS1 and got it approved as a W3C recommendation in December 1996. CSS2 became a recommendation in May 1998 and added some significant new enhancements. CSS3 is currently under development and is in a draft review stage (W3C,2003).
Web browser compliance with CSS standards is an altogether different matter. In the early days of the Web as browsers competed for market share, they introduced their own proprietary HTML extensions, which actually added to the interest in standards and in part aided in the development of CSS (Bos and Lie, 1999). Internet Explorer 3 was the first browser to incorporate CSS standards and was followed quickly by Netscape Navigator 4.0. These initial efforts had many problems though, which significantly reduced the impact of CSS and consequently its value was lost on many developers (Schmitt,2003). Browser compliance with CSS standards is still not ideal and Web page designers who wish to make their sites available to the widest possible audience must be cautious about making a site that depends on CSS (Zeldman, 1999).
There are many practical advantages of CSS for the information architect. Perhaps the most obvious benefit is that CSS makes it very convenient to produce consistent easily-updatable document templates. In Information Architecture for the World Wide Web (1998), Lou Rosenfeld writes that, "both static and dynamic content need structured navigation templates, a consistent frame where users can easily see the types of navigation: global, local, and contextual" (p. 266). Having one style sheet that dictates one or more document template types would help the information architect maintain consistency throughout each page. Consistent templates would ensure that items appear in the correct area of the screen, in a consistent style, and organized in the manner devised by the information architect.
Another practical problem faced by information architects, which is explained in detail in the Design of Sites (2002), is that "without a good system, publishing and managing large volumes of content are time-consuming and error-prone processes" (p. 252). Information architects who painstakingly create labels, taxonomies, site maps and content structures for sites may see all of their work go to waste once they move on to another project if the people responsible for maintaining the site are do not diligently implement their designs. CSS gives an information architect the ability to communicate structural design requirements in a much more scaled down context of HTML document structure and the relatively few global style rules that are created. Also, ideas about navigation, presentation and location can be tested and easily changed to something more appropriate if they are not acceptable.
CSS goes a long way in clearly delineating style elements from structure and content, but it would be a mistake to assume that an information architect could somehow ignore style sheets because they deal only with the stylistic elements on the page. To a certain extent, CSS does offer the separation of style elements from structure and content, but much of what is conveyed in the style page(s) either complements the information architecture or is prescribed by it. Because of this, it is doubtful that the incorporation of CSS could ever completely separate the domain of graphic design from that of information architecture. It is also worth noting that certain research suggests that CSS still needs refinement before it can realistically balance the needs of Web authors with browsers and users. In particular, this research cites the sometimes awkward inheritance properties of CSS as well the many indivdiual differences in browsers and users as reasons why CSS is still not a panacea for Web designers (Badros, Borning, Marriott & Stucky, 1999). Despite these shortcomings, information architects would be well served by learning as much as they can about CSS and leveraging that knowledge in order to take advantage of the complementary aspects of CSS and information architecture.
Badros, G., Borning, A., Marriott, K. & Stucky, P. (1999). Constraint cascading style sheets for the web. Proceedings of the 12th annual ACM symposium on User interface software and technology, p.73-82, November 07-10, 1999, Asheville, North Carolina, United States.
Lie, Håkon Wium; Bos, Bert. (1999). Cascading style sheets: designing for the Web, Addison-Wesley Longman Publishing Co., Inc., Boston, MA.
Lie, Håkon Wium; Saarela, Janne. (1999). Multipurpose web publishing using HTML, XML & CSS. Communications of the ACM. October, vol. 42 #10.
Musciano, C., & Kennedy, B.(2002). HTML & XHTML: the definitive guide, 5th Edition. Cambridge (Mass.) : O'Reilly.
Rosenfeld, L., & Morville, P. (2002). Information architecture for the world wide web (2nd ed.). Cambridge ; Sebastopol, CA: O'Reilly.
Schmitt, Christopher (2003). Designing CSS web pages Indianapolis: New Riders Publishing, 2003. [This book has a companion Web site with many CSS examples available for download at http://www.cssbook.com]
van Duyne, D. K., Landay, J. A., & Hong, J. I. (2002). The Design of Sites. Addison Wesley.
WC3 Cascading Style Sheets, level 2 CSS2 Specification. Retrieved February 10, 2003 from http://www.w3.org/TR/REC-CSS2/cascade.html#cascade
W3C Cascading Style Sheets home page. (2003). Retrieved February 10, 2003 from http://www.w3.org/Style/CSS
Wooldridge, Andrew (2000). Tap the power of mozilla's user style sheets. Retrieved February 10, 2003 from http://www.oreillynet.com/pub/a/network/2000/06/30/magazine/mozilla_styleshe ets.html.
Zeldman, Jeffrey (1999). Fear of style sheets. Retrieved February 12, 2003 from http://www.alistapart.com/stories/fear/fear2.html
Zeldman, Jeffrey (1999). The day the browser died. Retrieved February 12, 2003 from http://www.alistapart.com/stories/died
1 Several early documents related to the development of style sheets and CSS are available online. Robert Raisch's newsgroup post from June 10, 1993 in which he proposes a stylesheet standard on behalf of O'Reilly & Associates is one of the first formal stylesheet proposals.Håkon Lie's October 10th, 1994 initial proposal for CSS is also available online. (back)
2 Several Web sites have documented browser compliance problems with the CSS standards. Little Shop of CSS Horrors has many examples of display errors caused by browsers and the CSS Pointers Group's CSS Bugs and Workarounds page details many problems with CSS on specific browsers. (back)