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
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.
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 or SPAN tag is used with a
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,
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:
with the accompanying stylesheet:
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
CLASS, on the other hand, can be used many times in the same page;
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.
This page was first created 10 Feb 2005, and was last modified 25 Nov 2013.