Dan's Web Tips:

Cascading Style Sheets

I've been remiss in my authoring of this site so far; there has been hardly any mention of one of the most important things in any modern Web site, the method by which the presentation is separated from the structure of the document: the cascading style sheet (CSS). I've got an excuse; when I first created the site, years ago, a large portion of Web use was still with browsers (like Netscape 3.x) which didn't support CSS at all, and (even worse) another large portion of Web use was with browsers (like Netscape 4.x) which supported CSS poorly. At least, with a browser that doesn't support stylesheets, a user can see the basic content of the site, though it's likely to be plain-looking. With a browser that has partial, inconsistent, and incorrect stylesheet support, you may well end up with an unusable mess with pieces of text overlapping other pieces of text or running off the edge of the screen. Because of these issues, it was widely believed that CSS was "not ready for prime time", and Web authors (including myself) generally avoided it unless they were creating highly experimental sites.

However, over the subsequent years, browser support for standards-compliant CSS has greatly improved. It's still not perfect (even the most standards-compliant browsers of today fail to implement every part of the CSS specs), but it's much more complete and consistent than it was, and usage of the older, inferior browsers is down to a level where most Web developers no longer feel obsessed with continuing to support them. Thus, the current opinion of more advanced Web developers is that the "presentationalist" tags and attributes of HTML should be avoided in favor of a clean, logical style, with presentation moved to the stylesheet.

I'm stuck in a kind of "Do as I say, not as I do" quandary on this topic, however, as the design of this site still makes a good deal of use of outdated techniques. The main layout of these pages are still based on tables, for instance, something which modern developers believe should be replaced with other elements such as DIV, with appropriate class identifiers and style rules. I do plan on eventually remedying this; whenever I next do a complete redesign of my site layout, I'll ditch the tables and use stylesheets for everything. A few years ago when I did my last redesign, I was still too hung up on supporting Netscape 4 (which I'd only recently ditched myself in favor of Mozilla) to go all the way there. The current design does make some use of CSS, and pretty much all the colors, fonts, and the like are done that way instead of in the antiquated tags, but there's still a lot more I could do.

What Is CSS?

Web developers do have a bit of a learning curve before they can get into cascading style sheets, which is a reason why their use isn't completely universal even now that browsers almost universally support them. Unlike the old presentational elements, which were just add-ons to HTML requiring you to learn a few new tags and attributes, CSS is an entirely different language. Usually, the stylesheet is contained in a separate file (with the extension .css), which is useful because you can create a stylesheet once and use it in lots of different HTML pages. A LINK tag points the browser to the location of the stylesheet:

<LINK REL="StyleSheet" href="css/style.css" type="text/css">

This is pointing at a stylesheet named style.css in the subdirectory css.

However, it's also possible to add inline style elements within the HTML file, though this is discouraged because, just like the old presentational elements, their use causes structure and presentation to be mixed in the same file.

As I revise and improve this site, I'll add some tips about stylesheets, but in the meantime, there are a bunch of useful links at the end where you can read all about this important subject. But now I'll leave you with one tip:

TIP: Remember to put units on all nonzero measurements in a stylehseet. For instance, "5px" for 5 pixels, "8pt" for 8 points, "50%" for 50 percent, "1em" for 1 em. Just putting "naked" numbers is invalid and meaningless (with the exception of when the quantity is exactly 0). And try, if possible, to use the more flexible measurements like em or percentages, so your site can scale based on user preferences; try to use pixel measurements only when necessary to make elements fit with fixed-size items like images.

DIVs and SPANs

The DIV and SPAN elements of HTML work well with stylesheets, but many authors have trouble understanding exactly what they're for; they don't simply "do" something, as some visually-oriented people expect every tag to do. Rather, they are methods of marking a section of a document for the purpose of having something else -- a rule in the stylesheet -- "do" something to it by suggesting how it may be presented. DIV is a block-level element, like P (paragraph) or TABLE; it surrounds an entire block of text (or images or other content) that is generally expected to be set off from surrounding content (by default, a DIV is presented with a line break before and after it, though not a blank line as with a paragraph), while SPAN is a character-level element (like B or I) that surrounds a (generally smaller) piece of text that is inside a larger block and not necessarily visually set off.

The DIV or SPAN tag is used with a class attribute (to indicate a particular class of element for which a stylesheet can assign rules of presentation), or an id attribute (to give a particular DIV or SPAN a unique name). Don't get "class" and "id" confused; "id" must be unique throughout the entire document, while "class" can be reused repeatedly if you have multiple elements to be styled identically.

Finally, DIV and SPAN need only be used at all if you need to mark a block for styling that has no other logical element already encompassing it. If you already have something else (a paragraph, a table, etc.) that covers the piece of text you're interested in, you can apply a "class" or "id" attribute to that; there's no need to proliferate extra DIVs and SPANs around the same block. And, if there's an HTML element that's more logical for what you're expressing, use it instead of the generic, semantic-less DIV or SPAN; if something is a quotation, for instance, BLOCKQUOTE makes more sense.

Hall of Shame

Make your site better by looking at other sites that show, by example, what not to do!

NOTE: The inclusion of a site in my "Hall of Shame" links should not be construed as any sort of personal attack on the site's creator, who may be a really great person, or even an attack on the linked Web site as a whole, which may be a source of really great information and/or entertainment. Rather, it is simply to highlight specific features (intentional or accidental) of the linked sites which cause problems that could have been avoided by better design. If you find one of your sites is linked here, don't get offended; improve your site so that I'll have to take down the link!

This site has an invalid stylesheet that, on some browsers at least, causes the fonts to be ultra-microscopic.

Links

[<== Previous] | [Up] | [Next ==>]