**NOTE: I can't get Movable Type's escape characters to work, so I'm using square brackets to represent angle brackets.**
In the last post, I mentioned that the new homepage and web template use more CSS than before, and suggested brushing up on style sheets. I realized afterward that we have some new members of the Web Developers Team who may have never used style sheets, so I put together a short list of online tutorials that might help.
Background - Why do we need style sheets? What do they do?
It's important to first remember what HTML does and does not do. The purpose of HTML is to mark up your text and give it meaning. For example, if something is a heading, it gets an [H1] tag (or some sort of [H*] tag). If text is meant to be plain old paragraph text, it gets a [p] tag. Links get [a] tags. Blockquotes get [blockquote] tags. In other words, HTML is designed to give some semantic context to the text in a document.
HTML is NOT designed to dictate the look of a page, or of any of the text on a page. Yes, you can add an [h2] tag to some text if you want to make it bigger and bold, but at that point you're doing something with HTML that it was not designed to do. Also, different browsers will render [h2] tags differently, so [h2] text will change size depending on what browser you're using.
Similarly, [table] tags are not designed to dictate layout. They are designed for one purpose: to indicate that the information contained in them is tabular data. You can use them for layout, but that's not what they're for.
CSS (cascading style sheets, often just called style sheets) should be used to handle everything involving the look of the page -- the layout, the font size, the text color, the background color, etc. For the most part, the purpose of style sheets can be summed up in one statement: Style sheets allow you to separate content from presentation. HTML is about content. Style sheets are about presentation.
The best example
Here's a great example of the power of style sheets:
Look at the page at: http://www.csszengarden.com/
Now look at the ones at: http://www.csszengarden.com/?cssfile=/201/201.css&page=0 and http://www.csszengarden.com/?cssfile=/200/200.css&page=0
These pages have IDENTICAL HTML!! Look if you don't believe it. The only difference between these three pages is that they each use a different style sheet.
Tutorials
1) http://www.w3.org/MarkUp/Guide/Style I don't usually like W3C tutorials - they tend to be boring and overly technical. This one's pretty good, but forget the parts about web-safe colors; that's not an issue. Also, [font] tags are no longer part of the official HTML standard.2) http://www.csstutorial.net/
This one's not bad, but there's lots of code. It's probably better as a refresher for those who already know some CSS, since it doesn't do much to explaing what [div] tags are. There's also an article by the same author at http://www.killersites.com/articles/articles_CSS.htm that has some good introductory stuff.
3) http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html
This is the mother lode of CSS tutorials. Look around; there's lots here for every level.
Some things to keep in mind
Probably the thing about style sheets that people have trouble wrapping their brain around are the undefined tags -- the [div] and [span] tags. These are really important when it comes to using style sheets to create your page layout, though, so don't skip them. A good introduction is at: http://www.htmldog.com/guides/htmlintermediate/spandiv/.Please also remember that DREAMWEAVER DOES A HORRIBLE JOB AT CREATING STYLE NAMES. It likes to calll things ".style1" and ".style2". This isn't okay! Use style names that make sense in the context of your page. Don't use a style called ".style1" to make a title bold. Call the style ".title" or something meaningful like that. Relying on Dreamweaver to create style names for you is always a mistake.
