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.

As an example, to create a box of a different color from the rest of the page, as I did above, I used code like this:

<p class="tipbox"> Some text here </p>

with the accompanying stylesheet:

.tipbox { margin-left: 2em; margin-right: 2em; margin-top: 1em; margin-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; color: #000000; background-color: #FFB6C1; }

This set up a box with margins (outside the box) and padding (inside it), dimensioned in the unit of "ems" (which scales automatically with the font size the user has configured for his/her browser), and text and background colors. This is much cleaner and more versatile code than using tables and font tags as was the earlier fashion. Now that this is set up, I can add more "tipboxes" of the same style elsewhere in the site by applying the class "tipbox" to other paragraphs or DIVs.

ID and CLASS

Another pair of HTML concepts used in conjunction with CSS is the ID and CLASS attributes, which can be inserted into just about any element of HTML. Some people get confused about them, and try to use them more-or-less interchangeably, but they're very different.

ID is used to assign a unique name to a single element of an HTML document. You should not use the same ID name more than once in a given page. If there's a paragraph labeled <p id="introduction">, there can't be any other paragraph (or anything else) that also has id="introduction". Assigning names to things has many uses, including when you have client-side scripts that modify the page content, but it can also be used to apply a specific style to a specific element; the stylesheet can have a rule tagged to #introduction that sets a group of style attributes that apply only to the given element.

CLASS, on the other hand, can be used many times in the same page; class="introduction" indicates that a given element is of a particular category of elements that can have a set of style rules that apply to all of that sort, tagged with .introduction in the stylesheet.

Most of the time, CLASS is the more sensible attribute to use when associating elements with CSS rules, since you can't be sure there will always only be one element of its kind, and it's wastefully repetitive to define the same style rules for each of a bunch of different IDs. On the other hand, ID also has its uses, especially in dynamically-created or modified pages (e.g., of the "Ajax" variety) that need to have scripts and style rules that are tagged to a very specific part of the page.

Links

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