On this Page

A Showcase of CSS Techniques

CSS has much to offer and in the years to come as CSS3 modules graduate from being Working Drafts to Recommendations it will get even more versatile and powerful.

Given its richness CSS allows a web designer to present pages creatively and in myriad ways. In this section I'd like to present several pages that show off its capabilities. Some of them are leading edge, techniques which most browsers in use by the public today (Microsoft Internet Explorer versions 4 to 6 with a lion's share and Netscape Communicator 4.x trailing way behind) may not be able to handle. Most of the examples, however, are practical enough to be of use on certain occasions.

Rollovers and Other Fancy Ways of Presenting Images

To give your web pages some life, you can animate it using rollovers. Easily done through CSS; browser support, however, is another matter.

Pop-up Notes

When writing essays for presentation on the Web footnotes usually end up becoming endnotes, for obvious reasons. If you happen to a footnote lover like I am going back and forth from text to end of the document and trying to find you way back up can be annoying. Pop-up notes is a convenient way of checking the footnotes without any scrolling.

Sidenotes

While pop-up notes are great, keeping the document clutter-free very few browsers—as a matter of fact only one, viz. Mozilla 1.0 and later builds—is savvy enough to understand the technique. Solution? Display the notes on the margin adjacent to where the note numbers are.

Multi-column Layout Using Floats

Instead of using absolute and relative positioning schemes, multiple column, multiple row layouts are possible using floats, either floated to the right or left or both to achieve two or three column layouts

Multi-column Layout+ Fixed Background

Using a combination of absolute and relative positioning complex layouts can be readily achieved. In this example I've created several columns of text which as you will see have independent scrollbars to allow the user to read each column without scrolling the entire document

Pigeonhole Layout + Fixed Background

Multiple rows and columns, small niches to place both text and images. Using CSS positioning we can mimic the cells that the table element allows us to produce.

Super Strict XHTML

Don't go off looking for a XHMTL Super Strict DTD. It doesn't exist. That's just a self-imposed constraint. As may be inferred a super strict subset of XHMTL recognizes even less valid elements than W3C XHTML Strict. In particular purely formatting, non-semantic elements are considered off limits.

For instance this site you're viewing not only conforms to W3C XHTML Strict but also shies away from non-deprecated (but may soon be so) elements such as i and b (italicize and bold elements). In short this site does not use elements deemed merely presentational in nature, i.e., elements which govern the way the content will look on screen, elements which have no semantic markup value.

Nowhere in this site will you find the b element to make text bolder. You will, however, find the em element when words are meant to be emphasized. You will not find the i element italicizing book titles. Instead you find the cite element to markup such citations.

Because XHTML has a fixed number of valid elements there are instances when em and cite do not properly describe the semantics of their contents. For instance foreign words are usually displayed or printed italicized to convey that they are foreign terms. To use either of the above elements would be inappropriate. Thus, in my other web site you will find the span element used whenever a non-English term is used. I then use the class attribute with a meaningful value foreign and the attribute lang set to the language of the word. The CSS style sheet for that site then italicizes all span elements which have a class set to foreign.

You will not even find the pre element to encapsulate the preformatted markup code examples found in several of its pages. In its stead is the div element with a specific class attribute value and an associated CSS white-space property set to pre. Unfortunately browser support for the white-space property is erratic. Browsers that don't understand that just display the entire content of the div element inline, which makes understanding the code just about impossible. Surprisingly Netscape 4.5 (which can't even properly implement a basic thing as background-color) does understand this CSS property, while Internet Explorer 5.5 is totally ignorant of it.

All table elements in this site contain tabular data. Nowhere will you find the table element being used to position content, as has become almost de facto and derigeur in most (commercial) sites. Surprisingly and sadly, even the W3C home page uses the table element for layout. I wish the W3C had just dispensed with a columnar layout to be true its own mission of sticking to semantically meaningful markup. Sigh.

This site has taken effort to use only semantically meaningful XHTML elements and relies on an external CSS sheet to determine the layout and rendering of all its contents. Notwithstanding, even without its associated style sheet this document is still accessible. Even a person using a text-only, non-GUI browser or a browser with style sheet option turned off will be able to view and read its contents, and someone using a screen reader will be treated to an intelligible and structured text as the contents are read out to him (in the future a CSS style sheet specifically for aural media will be installed for this site).

Semantically marked up HTML documents that can be rendered elegantly have been made possible only because of the advent of CSS. I cannot stop praising CSS. It's one of the best thing that's happened to the Web. It is very simple to learn and use, yet it is extremely powerful, and becoming more and more sophisticated as new features are added. A properly marked-up document (meaning marked up up semantically) in combination with CSS2 style sheet(s) work synergistically. Site maintenance and revision become much easier and orderly. Yet more than this, separating presentation code from markup allows promotes web access by people using for instance braille and screen readers, non-GUI software, legacy browsers, etc. It also assists search engines to easily and accurately catalog the nature of the web site.

Learning How to Apply CSS to XML by Emulating XML Rendering Defaults in X/HTML

XML has practically become the standard for Web documents, even if practically all web pages currently online use HTML. The W3C is certainly gradually and only rightly forcing authors to move toward XML, via XHTML. Therefore, it makes good sense to start learning how to author style sheets for XML. Because XML is very sparse (it is after all a meta-language) authors are forced to apply CSS extensively to XML documents if they wish to achieve rendering output that equivalent to that of HTML.

One major problem when authors have worked long enough with HTML is they get trained to take many rendering matters for granted. For instance we don't even bother with the fact that a heading such as the h1 element will be displayed on a line of its own using a font size much larger than other text. But in XML all elements have only one default rendering. All elements will be displayed inline as opposed to block formatting (with a line break before and after the element) and they will all be rendered using a medium font size regardless of what the author had in mind for the element. This is only logical because in XML the content author can create his own elements, even on the fly. We can't possibly expect the user agent to read our minds as to how we want each element presented.

For this reason the transition from writing in HTML to XML usually has a lot of surprises in store for the author. Instead of having to specify just a few CSS properties to adjust the document's presentation, CSS properties for nearly all elements have to be declared down to each and every margin that a paragraph will have.

Simply using the element name table for tabular data isn't going to miraculously turn the content into a tabular form when an XML-aware browser processes the document. We might as well have used the name chair and the browser would have rendered it the same way—just like the rest of the elements in the document.

Since most versions of browsers in use today are XML-ignorant it isn't easy to get into the groove of writing CSS for XML. Most of us still have to produce pages marked up in HTML or at best XHTML. And if we're dedicated to creating interoperable documents we rely on CSS to render them. But because HTML has many default renderings we usually just build on them rather than reinventing the wheel from scratch. While this makes life easier for CSS authors this is not at all conducive to learning CSS as applied to XML. Hence, when five years from now XML becomes the lingua franca of the Web, we will face the time consuming task of relearning CSS as applied to format-less XML.

The solution to this, and a good way to practice writing CSS for XML, is to subvert the default formatting of X/HTML elements to turn them off. Achieving this is rather simple. Here's the CSS code that will implement this:

/* ========================================================================= CSS Style Sheet to set formatting of all HTML4.0/XHTML1.0 elements to XML default ========================================================================= */ body, h1, h2, h3, h4, h5, h6, p, div, pre, a, ul, ol, li, cite, em, strong, pre, df, dl, table, tr, th, td, tbody, thead, tfoot, caption, blockquote, code, kbd, samp, abbr, acronym, var, address, sup, sub, b, i, big, small { display: inline; margin: 0; padding: 0; color: inherit; /* may not be the user agent default */ background-color: inherit; /* may not be the user agent default */ font-family: inherit; /* may not be the user agent default */ font-size: inherit; font-weight: normal; font-style: normal; font-variant: normal; letter-spacing: 0; text-decoration: none; white-space: normal; border: none; vertical-align: baseline; } q:before, q:after { content: "" }

After subverting the default HTML formatting the elements will now render like XML elements. All will be displayed inline and have the same font size. Even table and all its cells will no longer render as tabular elements.

The anchor element a will of course retain its special ability to hyperlink, although it will render as any other text, i.e., in black and without an underline.

The only stubborn element I've come across is br. That element inserts a line feed and a carriage return. I tried to 'delete' the new line it inserts using the following but to no avail: br:before, br:after { content: "" }

With every element nearly format-less you are now set to define each and every one of them in your style sheet. Well, that ought to hone your CSS2 skills, specially if you have tables in your document! And if you do this often enough, moving from CSS with X/HTML to CSS with XML will be completely pain-free.

Keeping HTML and XHTML Fit the CSS Way

With the World Wide Web Consortium's move to deprecate more and more rendering attributes the impetus to use CSS to determine the layout of HTML documents has only become greater.

For a complete listing of all deprecated elements and attributes in HTML 4.0 please review W3C HTML 4.0. It has a list of deprecated and obsolete elements.

However, since this site advocates semantic markup, I do encourage you to consider all purely presentational elements still remaining undeprecated in HTML 4.0 and XHTML 1.0 nonetheless deprecated and obsolete. The list includes b, i, pre, big, small, sup, sub. Consider them obscene and politically incorrect elements, and remove any traces of them in both your X/HTML documents and your style sheets.

As an aside, this reminds me of the grave and harsh tone of the First Vatican Council (1870). The word anathema unabashedly littered that document. The Council anathematized this and that left and right. Ironically, I find it very apposite in this time of transition from the mayhem of HTML dependent Web to the orderliness of the Semantic Web using XML. To adopt the Council's authoritarian language let us declare that: If any element be merely presentational in nature, if it has no semantic markup value whatsoever, then let it be anathema!

And to carry the analogy further perhaps each web author should be made to take the following vow of obedience to the Faith: I, [state your full name, no handles or monickers please], a pious web content author, hereby swear that whatever the W3Church has defined and declared as canonical I accept unhesitatingly; and whatever it has deprecated, obsoleted, condemned, rejected, and anathematized, I too deprecate, obsolete, condemn, reject, and anathematize. [adapted from the First Vatican Council, Session 2, Profession of Faith, January 6, 1870]

Bless you, my devout children.

A Dearth of CSS2-Aware Browsers

It's the year 2002 and yet there are still only a thimbleful of browsers that nearly fully support CSS2. The latest Mozilla builds of course top the list. The Mozilla 0.9.9 I'm using does not fully support CSS2 but thus far I'm impressed at what it does support, which is fairly comprehensive. I can't wait for Mozilla 1.0 (the real McCoy, not the 1.0 Release Candidates). That ought to be something. So where will the party be?

The latest Opera browser—version 6.01—meanwhile gets a nervous breakdown when you floor CSS2, despite the fact that it can handle XML documents (this features dates back to Opera 4). For some reason Opera 6.01 (and most probably all other versions of Opera to date) does not recognize the X in XHTML. What I mean by this is that when XHTML is extended, i.e., new elements are created by the author XML elements are imported (e.g. from SVG or MathML) Opera does not understand them. As far as I can tell when the document is either an HTML or XHTML and stored with the file extension htm or html it ignores any non-HTML/XHTML selectors and its list of properties in the style sheet whether external or internal. Therefore the XML element will be rendered inline and will take on the properties of its parent.

I haven't test driven Internet Explorer 6 so I have no idea how much of CSS2 it can handle. Logically, though, it should be better than IE5.5

CSS Resources: