XHTML and Cascading Style Sheets

[Previous] [Next]

One of the most important principles of Web design is creating a uniform look and feel for the entire site. To do this, you can create a standard to define how each of the HTML elements will be presented in the browser. When we created our XHTML template in Chapter 5, we defined a DTD that placed restrictions on the values of certain elements. For example, we used enumerated types to define the possible values for the font element's color and size. The problem with using DTDs to define certain elements when designing a Web site is that every developer who creates a page must know the standards and must write the appropriate values in every page.

Cascading style sheets (CSS) enable you to apply a uniform look to all the documents belonging to a Web site. Now we'll look at CSS documents briefly and then see how they can be applied to XHTML documents.

CSS Documents

CSS documents allow you to define a style for any HTML element. Thus, you can define the style for an h1 element to be red with a font size of 6. This style can then be applied to every h1 element on your Web site. CSS documents allow you to create a uniform style throughout your Web documents without having to enter specific information for each h1 element in each page. If you need to change the style for an h1 element, you need to change it only in the CSS document. If you need to override the style defined in the CSS document for one or more of your h1 elements in a specific page, you can do this, too.

One major problem with using CSS documents is that they are not supported in every browser. Microsoft Internet Explorer 5 supports nearly all the features of CSS documents, and Internet Explorer 4 also supports most of the CSS features. Netscape has released version 6 that supports CSS level 1 and the DOM. At the time this book goes to print, it is too early to tell how well these features are actually supported. If there are problems with the final release of Netscape 6, it is likely that you will find information on these problems on these Web sites: http://hotwired.lycos.com/webmonkey/, http://webreview.com/pub/guides/style/style.html, and http://www.utoronto.ca/ian/style/cssbugs/toc.html.

If you were to create an XHTML document, you could use CSS documents to define the presentation of the XHTML information. While CSS documents can work for XHTML, they will not work for XML documents that do not contain presentation information. For XML documents without presentation information, you must use XSL.