Wiki

An introduction to rapid web-development with CSS

James Gregory introduces CSS as a simple way to keep your websites consistent and to make formatting changes fast CSS is a relatively fashionable technology at the moment -- it's been around for a while, and browser support has progressed to a point that you can start to use it without alienating large chunks of your userbase. I won't claim universal support, but it is as ubiquitous as any other technology in your modern-day web-design toolbox (such as Flash for example). CSS is pretty scary stuff when you first look at it -- the W3C spec is monstrous. My aim in this article is not to ask all of you to invest weeks of time in learning every facet of this strange beast but to try and impart some simple uses of it that will help save time in your day-to-day work as a web designer.

So what's it all about?

Surprisingly, W3C are pretty concise on this point:

And that's pretty much it. You're probably all thinking "I can do that already. I've got my trusty <font> tags and what more is there to page layout than using tables?". I know where you're coming from, and I once recited that mantra myself. There are two other advantages that CSS gives you, and they're pretty important once you start working with them:

Before I give you the how-to, I'd like to point you at some really neat examples of what you can do with it. This is exciting stuff!

Content-formatting separation

I could wax lyrical all day about why this is a good thing, but instead I'll point you to CSS Zen-Garden. It's a little difficult to see, but on the left there are links to "select a design". Each of these links is just applying a different set of CSS directives to the page. The HTML remains exactly the same between each one. Seriously, there's no difference at all. Here's some screenshots of my favourites:

IMAGES

Admittedly, these guys are CSS ninjas. It takes some practice to be able to lay sites out like that. It's definitely a neat trick to show your clients once you've mastered it though.

More formatting directives

Heaps of them. Again, you'd go loopy if I tried to explain them all, so here's a few simple examples of CSS's support for borders

<style> .example1 {

} .example1 div {

</style>

<div class="example1"> <div style="border: 2px black solid;">Solid border</div> <div style="border: 2px black dashed;">Dashed border</div> <div style="border: 2px black dotted;">Dotted border</div> </div> <div class="example1"> <div style="border: 2px black groove;">Grooved border</div> <div style="border: 2px black ridge;">Ridged border</div> <div style="border: 2px black inset;">Inset border</div> </div> <div class="example1"> <div style="border: 2px black outset;">Outset border</div> </div>

Let's get started

So, the way this works is that you form descriptions of sets of formatting directives (called a CSS classes) and refer to those bundles of formatting information throughout your HTML. Common practice is to put all your CSS class definitions into a single, separate file, so you can use the same formatting on all the pages in your site (by referring to that file on every page). Let's leap straight into an example. Let's say that you had a site where it was vitally important that there was a section in the middle of the page that had red text on a yellow background. This is a perfect job for CSS. You start out by defining a class for your "main content". Let's call it ".main_content" (naming classes like that is largely a convention, though it isn't the only way to do it). Your class would look something like this:

.main_content {
    color: red;
    background: yellow;
}

Now, when you're assembling your page, you just need to refer to that class and the formatting will be applied automatically. Odds are you'll be using some kind of table, so your code will look something like this:

<style> pre b {

} </style>

<table>
    <tr>
        <td <b>class="main_content"</b>>This is the content</td>
    </tr>
</table>

Observe the part highlighted in red -- that's the part that tells your browser to use your CSS class. That will render something like this:

<style> #example2 .main_content {

} </style>

<table id="example2">

</table>

Now, those are pretty shocking colours. Imagine it turns out a few hours before the site goes like you are informed that your client is colour-blind. Suddenly all of these hideous colours make sense, and it occurs to you that you can change them to something less awful and your client will never know. Without CSS you'd be looking at making modifications to every page on the site. No-one wants to do that, and you can't afford it hours before a launch. With CSS it's easy. All you have to do is edit your CSS file. Very quickly you end up with something that looks like this (and equally quickly it will be evident that I am not a graphic designer :)):

<style> #example3 .main_content {

} </style>

<table id="example3">

</table>

Here's the CSS used in that example:

.main_content {
    color: white;
    background: #1e90c7;
    border: #dddddd solid 1px;
    font-family: serif;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

I've not gone into detail on what each of those lines does since this much of it seems reasonably intuitive to me. The important things to note are that each line needs to end in a semi-colon and that you need to remember to close the { with a matching }. The W3C has a reasonably straightforward chart of all the CSS formatting directives. It's a good place to look when you're trying to find how to do something more "colourful" than just changing fonts and colours.

A Technicality

Before I go on, I should give you some guidance about how you pull your CSS file in on each page. It's all straightforward boiler-plate stuff, so just copy and paste this when you start a new page.

On the very first line you need to have a DOCTYPE header. In general you should use the DOCTYPE for HTML 4.01 Strict. So your first line will look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Then in the <head> section of your HTML, you need to include a line to read in your CSS file. Something like this:

<link
    media="screen"
    href="styles.css"
    type="text/css"
    rel="stylesheet" />

Then you just drop all your CSS classes into a file called styles.css and you're done!

Author : James Gregory

Related links

Wiki: development/css_introduction (last edited 2008-04-23 13:23:46 by AndrewRogers)