Doing web pages in <STYLE>
by Charles Zapata
Please note: Style sheets function properly only in Navigator 4 or Internet Explorer 4. If you do not have one of these browsers, the CSS parts of this page will not work.
Imagine for moment, the history of the Swiss Army Knife. (We will get to HTML, I promise.) The first few knifes contained a blade, a toothpick and few other gadgets. The knife was a success. Yet a few people maintained that it wasn't useful enough - "I can't open my beer bottle, I can't screw in this bolt." Instead of asking, "Why are you trying open a beer bottle WITH YOUR KNIFE?", the creators elected to insert a bottle opener, and few other useful metal whatsits. A few critics were silenced, but other critics appeared. So more tools were added. The end result: a "knife" which can tackle just about any job, if you can find the one tool in fifty between the red handles.
The history of HTML is a lot like that. In the beginning, HTML contained a few useful tags for simple format. Some users decided they needed better layout control, so frames were added. Later, browser-specific font options and tables were thrown into the soup. But this still wasn't enough to satisfy the serious designers, who wanted specific control over the appearance of their pages (which is contradictory to the spirit of HTML, which implied that all of your pages look the same), and now, the answer to all of our problems has arrived - Cascading Style Sheets (CSS).
Hyperbole aside, CSS really is the next big thing in Web layout. With CSS, web page designers now have almost complete control over the layout, position and appearance of text and images within their web pages. And the basic style sheet specification, CSS-1, is supported by both Internet Explorer and Netscape Navigator, although I recommend using Internet Explorer to view this article, as the Navigator implementation is a bit (more) buggy.
Let's get started with the basics (a passing familiarity with HTML is assumed). A suggestion: When reading this article, I highly recommend that you look at the source along side of it, so you can see the direct application of the CSS techniques.
Styles can be applied to any text tag in your HTML document. For example, if you are reading this on a CSS-aware browser (Internet Explorer 4 or Netscape Navigator 4), you'll notice that my <H1> elements don't look like normal <H1>s. I did this by adding a style definition to my document, in the <HEAD> section.
<HEAD>
<!-- My style definition for the page. -->
<STYLE>
H1 { font-style: italic;}
.caption { font-family: arial; font-style: italic;
font-size: 75%;
font-weight: bold; padding-top: 5px;
padding-bottom: 5px; border: 0px;
border-top: 2px;
border-style: solid; }
.intel { font-family: arial; font-size: 200%;
color: #0000FF; margin: 0; border: 0;
padding: 0; font-weight: bold;}
.Title { font-size: 300%; text-align: left;
font-style: italic; font-weight: bold; }
#Div1 { color: #00FFFF; background-color: #FF0000; }
#Span1 { color: #00FF00; background-color: #222222; }
#MainArticle { padding-left: 20%; font-family: arial;
position: absolute; }
</STYLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="styles.css">
</HEAD>
HTML fragment 1. The HEAD for this document.
The <STYLE>...</STYLE> tags in the <HEAD> section define the style rules for this document. Some of my rules define characteristics of a tag. For example, I defined all of my <H1>s to be italicized. There are oodles and oodles of text tweaks to play with - check out this reference table for a list.
The next rules are not for specific tags, but for classes and ID's. A class is useful if you have a style you want to apply some of the time, at your discretion. For example, the caption above is done with a class, applied to a P tag. To apply a class to a tag, just specify the CLASS parameter, as I did in the captions. Classes are always defined with a "." in front of the class name.
The last rules are for IDs. The main DIV holding this page is called MainArticle. In the style section, I specified the style rules for whatever element was going to be called MainArticle. ID rules are specified with a "#".
(You might think I defined a lot of ID and class rules. You would be right. Navigator appears to prefer them a lot more then embedded STYLE parameters.)
If you are reading along with source code (and you really should) you may have noticed that I applied a class (rawHTML) without defining it in the document. This is intentional. HTML pages can externally link to other style sheets. That's what the LINK tag is for in the head block - it specifies a file which contains nothing but style rules to apply to this document. That document can be referenced by any number of HTML pages, applying your style to all of those pages.
Style sheets go further that just redefining existing tags. Two new tags, <SPAN> and <DIV>, allow you to select any HTML and specifically apply a style. <SPAN>s wrap around text (like when you select text with a mouse), while <DIV>s are bit more pushy, insert line breaks before and after the HTML. The best way to see the difference is with an example.
<!-- Begin DIV/SPAN comparison --> <DIV> <P>This is text with <DIV ID=Div1> a DIV </DIV> thrown into the middle. <P>While this is <SPAN ID=Span1> a SPAN </SPAN> in the middle. </DIV>
This is text with
While this is a SPAN in the middle.
HTML fragment 2, and the results.
Both the <SPAN>s and <DIV>s can be nested ad infinitum. This is also where the "cascading" in CSS comes into the play - the styles are cascaded over another for each external block.
This example also presents us with our first browser "issue". While both browsers may support CSS, they don't do it exactly the same. Look at this page rendered under both IE 4 and Navigator 4 - the <DIV> backgrounds are different. Wonderful - CSS isn't the answer to all of our prayers. (Did you expect anything less?) But keep in mind that CSS is relatively new, and there are still a few more "issues" to be worked out. But consider yourself been warned - you will not be getting pixel-perfect matches between browsers.
The previous example also illustrates another style technique. You don't have to define a style rule in the <HEAD> for each style your want to apply. For any text element, you can apply a specific style, by just setting the STYLE attribute. This attribute is then applied to the block. For example, the <SPAN>'s background is darker, because I added the rule directly to that <SPAN>, but other <SPAN>s in the document won't be affected.
Font options with CSS are great. We can finally lose the piles of tags which do just perform one little font tweak, and apply a great range of styles across the whole page. But the razzle-dazzle that really wins the converts over to the CSS camp is the positioning.
Just as you set font options with CSS (like font-weight or color), you can set position and size options, too. The "top", "left", and "width" attributes set the display characteristics for an element. (The "height" attribute is a bit strange: IE supports it directly, but Navigator constrains blocks to the minimum height to hold the contents. Both are, unfortunately, allowed by the CSS1 core specs.) But these elements are not quite enought. To completely specify an element's position, you must specify the position mode - either relative or absolute.
The relative position mode is most familiar to web designers. This is the standard "flow" technique, where HTML elements are placed next to each other. With the CSS attributes, however, you can more precisely position elements with respect to that flow.
intel
(Two caveats with this example: (1) It looks better in Navigator than IE. (2) Normally, I try to space out the tags, to make the HTML a little clearer. However, the browsers are interpreting the carriage returns, messing up my spacing. Ah, the life of a web designer.)
In this example, the "e" is positioned relative to the letter preceding it (the "t"). Likewise, the "l" is positioned with respect to the "e". Notice that I used a CLASS to contain my style, so it is defined in the HEAD section.
In the absolute mode, the element is position with respect to its container (the DIV, SPAN or whatever other tags that contain the element to be positioned.) If the element isn't inside another container, it's positioned with respect to the whole page. For example:
Because I've surrounded all of these little spans with a wrapper DIV tag, the spans inside are placed absolutely with respect to that DIV. But what have we here? A span on top of another? Yes, CSS now brings us into the third dimension. Elements can now be placed on top of each other. The order is controlled by the z-index attribute. A higher z-index means the span is on top.
And of course, practice, practice, practice. Style sheets are new, and they are a bit unpredictable (i.e., buggy). Not everyone is using the V4 browsers, so style sheets would leave them out of the loop. But if you need total, complete control over fonts and layout, CSS is the way to go.
