Extra Stylish

Hi folks -- sorry I've been scarce the past two days -- I've been in a CSS training class, the fruits of which I hope you'll be seeing soon.

If you're not familiar, CSS stands for Cascading Style Sheets; it's a way to control how elements on a page look.

CSS is different from the regular formatting than you might see in HTML -- the idea is that you might have some content done up in HTML -- some paragraphs, headlines, etc. --  but, the way the content looks is determined by the CSS.

It's very powerful, but it's also somewhat complex, since it has elements of a  programming language. So why would you want to do this and separate content from formatting, anyway?

One reason would be for  flexibility, especially if you want to apply changes to an entire document or Web site. If you define the styles properly, you could change the entire look and feel of a Web site, just by changing a single file.

Say you had header text defined a certain way, and it's used all across your Web site. In a good-sized site, that could be dozens or hundreds of occurances. If you wanted to change the header style, font, size and color, if you do it with CSS, you would only have to change one thing, instead of tracking down each and every header and changing it.

This is what's going to make custom skinning possible.

For example, our instructor John showed us the example of http://www.csszengarden.com, which is kind of a designer's playground Web site to show off what you can do with CSS.

If you look at the page, you'll see that each designer has submitted a different CSS, which can radically change the look, feel, layout, number of columns, color and art elements of the page, without having to touch the content itself.

Here are a few different examples from the site:

* Organica Creativa

* Wilderness

* 45 RPM

You'll notice that the content (the text) is the same, but the layout and even the graphical elements are different enough that each version looks like a completely different Web page.

You can do a bunch of other cool stuff with CSS, including change your cursor and border styles. For example, here is an evil example of something that you should not do -- I'm going to make a hyperlink, that when you put your mouse over it, should give you an hourglass cursor, instead of a pointing hand cursor: This Is Evil, Do Not Do This. Ever.

I know some of you have been playing around with embedded CSS tags, with varying success. One thing to consider is that not all CSS works in all browsers -- I've seen some Journals that look fine in Microsoft's Internet Explorer, but are completely illegible in Firefox or Netscape.

One thing I hope to do (with help, of course), is come up with some CSS templates that will work with AOL Journals that you can use for your entries, and that will work across most browsers. This will be kind of a stop-gap measure until we get custom skinning later this year.

Thanks -- Joe