Mac OS Journal - March 2001

Simply Web
March 2001 || Volume 01, Issue 08

Style Me This! What are Style Sheets?

Everything you see in a web page is styled in one way or another. That is, the text looks a certain way (even if it's only the default appearance), and text and graphics are in certain locations on the page.

Ever since we've been using Macs, we've been able to control the way our documents look -- what font is used, how large it is, how wide the paragraphs are and so on. Gradually we've become used to this control, and of course expect to be able to apply similar controls to our web pages. But that turns out to be a bit of a problem.

Since the web began it has had the ability to control the appearance of text and its location on the page in relation to other elements such as graphics. But not much control was allowed. Basically you could tell the browser to emphasize text in a few ways, to align it left, center or right, to indent a paragraph, to wrap text around a graphic or not, and a very few other tricks. That was about it. HTML also had the ability to specify fonts for your text, although the browser reading the page could always be set to override these fonts. And in the most recent versions of HTML, the font tags are now deprecated -- that is, you shouldn't use them anymore.

The reason why there is so little control over document appearance built-in to HTML has to do with the difference between presentation and structure. Our documents are structured in a logical fashion, involving words grouped into sentences, sentences into paragraphs, and paragraphs into sections. There may be headings in a hierarchy and various graphical bits as well. Any of these pieces may be presented to the viewer in a number of ways, depending perhaps on their own preferences (they may have limited vision and require a large font for example), or on the capabilities of their browser (no graphics) or of the machine that they're using (a small screen perhaps). None of these presentational issues should have any impact on the content or structure of your document -- or so the theory goes. Presentational markup -- style -- should be kept separate from structural markup, and should be optional depending on the browser settings.

Bearing all that in mind, what can we poor page authors do to make our documents look as good as they can for fully capable browsers while making sure their content is deliverable to all who need it?

The answer -- for now -- is Cascading Style Sheets or CSS. CSS1 gives page authors control over most everything they used to use font tags for, as well as numerous other handy things, like text and graphic locations on the page and the colours of various things. CSS2 -- supported only by the most recent browser versions -- adds a large number of features, and (assuming a browser fully able to display a CSS2 marked up page) it allows virtually complete control over document appearance.

All this is a lot harder to explain than to exemplify, so here's an example of old and new markup. In ages past - say about a year ago - I would have marked up a callout paragraph (a bit of text outside the main article) something like this...

<blockquote>This is the callout text that mentions Mac OS Journal and then goes on about something else which might be emphasized in some way.</blockquote>

And it would come out looking like this...

This is the callout text that mentions Mac OS Journal and then goes on about something else which might be emphasized in some way.

Now I would use...

This is the callout text that mentions Mac OS Journal and then goes on about something else which might be emphasized in some way.

...which looks like this...

This is the callout text that mentions Mac OS Journal and then goes on about something else which might be emphasized in some way.

(If you're not seeing blue text with a small pink box near the end above, then your browser isn't displaying the styles correctly. I recommend Internet Explorer v5.)

At first glance that doesn't look like much of an improvement. It saved about 10 characters, but so what? So this. The definition of the appearance of text tagged as class="callout" is specified only once (either at the top of the page as it is here or in a separate document -- more on that later). This has a number of advantages: I can change the style definition in only one place and have all affected text change all at once. I save the extra code step of specifying the appearance every time I need it -- I just insert the style tag and I'm all set. And I can readily create a separate style sheet for a different kind of browser and deliver the same content in a different appearance whenever one of those differently-abled browsers comes calling.

As you know by now if you're a regular reader, there's usually a catch somewhere on the web. And with style sheets there is certainly a catch. The browsers -- all of them from large to small, from popular to also-ran, from mega-screen to PDAs -- have bugs in them. Most of those bugs, or so it seems on a bad day, involve the display of styles. This is such a problem that several web sites try to compile the bugs and offer advice as to usability of certain tags in various browsers. Have a look at Richinstyle, WebReview.com's Style Sheet Reference Guide, Index DOT Css, or A List Apart's Fear of Style Sheets. At the first of these you'll learn, for example, that only one of the top browsers has fewer than 100 CSS bugs!

I mentioned above that I'd say more about where to put the style definitions. Although you can put them in the page itself, it's really best to place them in another document and place a reference to that document into any page that needs it. You do it this way:

create your style sheet doc, perhaps called my_styles.css
put this doc on your server with the web pages that need it
place this bit of code within the HEAD tags of your pages...

That's it. Now browsers know where to look when they see a tag like . And if you create a second style sheet for a different kind of browser, you can use a bit of JavaScript to sniff out the browser type and serve up the correct style sheet depending on the answer.

If you view the source code of this page you'll see that Mac OS Journal uses a style sheet and has applied it to this column. So this is a styled column using styles to help illustrate how to use styles to style a column about styles... My head hurts. [Editor's Note: So does mine.]

So, now you know about Style Sheets and you understand their purpose. At this point, you should be able to implement a Style Sheet for your site. Next month, I'll show you how to write the style sheet itself.

Rob Stevenson - rstevenson@macosjournal.com
Rob's Page - Feedback Form