Web Resources for CSS, XML and XHTML

Steven Pemberton

• A list of known books about CSS, online resources, supporting browsers, and editors: http://www.w3.org/Style/CSS.
• The CSS1 Recommendation: http://www.w3.org/TR/REC-CSS1
• The CSS2 Recommendation: http://www.w3.org/TR/REC-CSS2/
• A CSS1 Quick reference: http://www.cwi.nl/~steven/www/css1-qr.html
• XHTML: http://www.w3.org/TR/xhtml1/ with more information at http://www.w3.org/Markup
• XML: http://www.w3.org/TR/REC-xml with more information at http://www.w3.org/XML/
• An excellent book on CSS2, is by two of its creators, Håkon Lie and Bert Bos. It is Cascading Style Sheets: Designing for the Web, published by Addison-Wesley.
• Validate your CSS: http://jigsaw.w3.org/css-validator/
• Validate your HTML and XHTML: http://validator.w3.org/
• Tidy up your HTML, making it more amenable for CSS, and convert it to XHTML 1.0: http://www.w3.org/People/Raggett/tidy/
• Test your browser for CSS compliance: http://www.w3.org/Style/CSS/Test/
• A set of style sheets for HTML designed by a graphic-designer: http://www.w3.org/StyleSheets/Core/
• How well (or badly) browsers implement CSS, feature by feature: http://www.webreview.com/style/css1/charts/mastergrid.shtml
• Which browser is doing best overall: http://www.webreview.com/style/css1/leaderboard.shtml
• Workarounds for browser bugs: http://css.nu/pointers/bugs.html

Exercises

The examples have been chosen as examples of real-world documents. With all the examples you should save them, and add a link to your own style sheet. NB: IE 5 reformats HTML files when you save them. Use View Source instead, and save from there. (Example solutions will be added in the near future)

A Basic HTML Document

This document was produced by using Save As HTML from a word processor.

• Make <em> elements have a yellow background, and <strong> elements a red background.
• Headings should be in a sans-serif font
• Now make the presentation white text on blue

• What colours are aqua, fuchsia and teal?
• What do the generic fonts look like?
• What font sizes are large, x-large, and so on?

A Well-produced hand-tailored HTML Document

• Indent all text except headings by some amount.
• Limit the width of the page to some length.
• Make the headings white on blue and right-align them.

• Make a stylesheet where only the headings are visible, and indented according to their depth (h1, h2, h3, etc).

An Online Journal Article Formatted with GIFs

Take any article from any issue ( for instance this one) and reformat it using CSS. (This requires changes to the HTML). Here are some characters you need: f¡®sT m¤ñd@¥

An XML Document

Save this as an XML file, remove any links to a stylesheet, remove the DOCTYPE and the xmlns, and have a look what it looks like in your browser. Then add an xml-stylesheet link to an empty file, and have a look again what it looks like (these are the browser defaults you can see). Now start building up the style sheet.