A quick detour for some CSS

A reminder to keep your code clean and simple. If you already know CSS, you might not want to bother. Really. There's nothing here for you to see. I might give a more detailed rant in a later lesson when there's more to worry about.

• Up
• Previous Lesson: Hello, world. Hello, Dave.
• Next Lesson: Break it up!

What is this CSS thing?

Cascading style sheets. It was invented a while ago (back in the late 90's), but took a good long while to gather widespread adoption. There's a lot of history you ought to take a moment and read—later. For now, just accept that it's going to make your life easier.

Though non-tabled solutions are often harder to get right, cross-browser, they increase accessibility, not just for "differently abled" visitors (which you yourself may be, for all I know), but also for yourself as a programmer who has to get his/her/hes/hir/its hands dirty with html every so often. I've never worked for a company so monolithic that I could just sit back and only worry about database interactions. And if you're doing this as a hobby, or just getting started, you're going to want to be able to do every last bit of it.

That said, I'm not going to go into fluid layouts and the magic three-column solutions and all that. Try A List Apart for some good reading, or CSS Zen Garden just to be impressed.

And even if you're going to swear up and down by tables for just hacking a site up quickly, there's still time-saving in some good, simple css. And really, if you just need to hack something up quickly, go grab a package from OSWD -- Open Source Web Design. Free web design that you can turn into a dynamic php site in no time! Once you understand the stark simplicity of the information below!

For now, all I'm going to say is add a stylesheet to your hello world page. Don't know how to do that? Well, there's two options--inline it with the page itself (bad idea, really), or "link" it. Now, there's a couple of different ways to link something, and you ought to worry about media types (screen versus print versus ...), but to get started just do the one, and the others will all make sense. Google for "link" and "stylesheet". Or look at the source of just about any real website you happen across.

Oh, but what is a stylesheet? Feel free to use google to find some information on that, but here's a crazy-simple one:

body {
	background: black;
	color: white;
}

.hello {
	color: #36f;
	font-weight: bold;
}

Save that as "mystyle.css" or some such, and link to it from your hello world page. Yeah, I'll give you an example for how to link a stylesheet, because I'm a sucker for giving away all the answers. Remember--View Source! I really do hope you're playing along at home, though, and using google to give you a better idea of the wide world of tubes that's out there. Note that I put mine in an "includes" directory. There's nothing special about putting it in a directory or naming that directory "includes", that's just what I do, and it's nice to put it out of the way so it doesn't clutter up your top level directory. Clutter at any level can be a major hazard for the maintainability of a site.

So what does using css like this save you? Time, for one thing--if you make an "error" css class, for instance, then whenever you feel like marking up a paragraph as an error, all you have to do is add class="error" to it. Then, if you feel like changing what an error looks like two years down the line--all you have to do is edit the stylesheet. Bam, a different-looking error. Maybe you just want to change the shade of red, or make it bigger, or bolder, or smaller, or a different font. Whatever, you don't have to touch the html.

I expect I'll do a longer rant later about css's misuses, where you wind up marking something up almost as if you were just using font tags everywhere. Bad idea. No coder-biscuit. Learn to generalize. But, again, that's later. For now, you've got a basic stylesheet attached, and you have the vaguest idea of what a css class is and how to specify it in the html. Good job! If you don't have a clue, still, take a deep long look at the example.