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
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:
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.
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. ALINK tag points the browser to the location of the stylesheet: <LINK REL="StyleSheet" href="css/style.css" type="text/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
TheDIV 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.
No comments:
Post a Comment