Cascading Style Sheets are one of the most useful but least understood parts of modern web design. They're not hard to create, they're exceptionally useful even on small-scale web sites and supported across the board. However, they do involve throwing out much of the old design rulebook, and there's no point in a half-hearted implementation. Which leads us to the first big question: what in the blazes is CSS anyway?
Like many web technologies, CSS is somewhat nebulous until you actually start working with it. Luckily, getting a solid grip of the basics is very, very easy – and you can start applying your newly earned knowledge from the start. To begin with, let's see how your site shouldn't look, and why CSS is important.
Open up your own site, or any homepage on the net, and you'll see that it's divided into distinct sections – a hyperlink here, a heading there, black coloured text on a white background or whatever else. CSS takes this to its logical conclusion. Instead of having to remember that your headline is 14pts high and underlined, you simply label it as 'Headline' in your HTML code and fill in the details in an external CSS file – your 'style sheet'. By linking every page to this one file, you can maintain consistency across the board, and make any changes (such as making the headline text red) without having to manually edit each page's HTML code, or fill your code with outdated font tags.
There are plenty of specialist programs out there to help you create CSS files, such as Aptana Studio ( http://www.aptana.com ), as well as tools in the main website editors.
They're plain text, and perfectly readable. This example will create 11pt bold, italicised text – incredibly, making it ideal for use in a strapline.
.strapline {
font-size: 11pt;
font-weight: bold;
font-style: italic;
}
Who'd have thought? Save this onto your computer as 'test.css' and create a new webpage. Add the following tag to the head section.
<link href="test.css" rel="stylesheet" type="text/css">
Save it into the same directory. The CSS file is now linked to your web page. You can save yourself even this small amount of work if you're using a WYSIWYG editor like Aptana Studio, but make sure that you choose to 'Link' the CSS file instead of 'Import'. Importing it will save all the data into the HTML file itself, greatly reducing the system's flexibility.
Labelling it up Type a few lines of text into your HTML page. To mark one of them as being a 'strapline', wrap it up in the following code.
<span class="strapline">this is a strap</span>
Open the HTML page in your favourite web browser and the line should appear differently. If not, check that your HTML and CSS files are in the same directory, that the HTML file refers to 'strapline' and the CSS is marked as '.strapline'. CSS is supported across all modern browsers, but it can be finicky at times.
Once you've checked that it's working, try experimenting with the values in the CSS file to change the look of the strapline. You can change the colour using 'font-color', its alignment with 'text-align', and many other settings. I've listed a few of the other useful ones in the box 'Tag – you're it!'.
Marking up your documents in this way gives you a superb level of control over their look and feel, but CSS goes several steps further with its support for advanced page design and outright special effects. CSS gives you the ability to assign custom styles to any element of the page – including interactive elements, such as hyperlinks. Forget about Javascript – this is all that you have to do to create hyperlinks that 'light up' in red when your user sweeps the mouse over them:
A: hover {
color : #FF0000;
}
You'll notice a couple of slight differences in this example. Firstly, and most importantly, there's no need to label up every hyperlink to get this effect – the hover effect slips into all of them automatically, both straight text and the edges on image links. Secondly, we specifically point to one element of the linking tag – its hovering. We can return to our web site and colour everything blue, green or neon pink. They will all still light up on cue. One of CSS' most powerful features is that it doesn't actually lock you down to a style. Imagine that instead of starting with a blank page, you have a fully laid out screen. Everything pulls its formatting information straight from the CSS file. Your own formatting information then goes on top of this. Even if the style of a particular paragraph calls for it to be in 8pt Verdana, it will write it up in 72pt Wingdings if specifically instructed, then return to its preset style. For obvious reasons, it's best not to overuse this ability – after all, that's why you created the style in the first place!
The simpler your CSS files, the more compatible they'll be. All modern browsers – Internet Explorer, Mozilla, Opera, Konqueror and so on – fully support CSS, although as ever, the slight differences in their approaches to page rendering can lead to finely-ground teeth. We'll be coming back to this next month when we look at layout – but it's wise to get into the habit of testing your style-sheet's results under every browser that you can get your hands on. Many editing packages feature the option to check that your code is valid under the main browsers available, and you can run your results through the online CSS Validator service at jigsaw.w3.org/css-validator/ to ensure that your page follows the official specification.
Mastering CSS is a matter of getting its most important tags under your belt. An excellent set of tutorials on each variety are at www.w3schools.com/css/
{font-weight: bold}
Make this selection bold.
{font-style: italic}
Make this selection italicised.
{text-decoration: underline}
Underline this text
{color: #000000}
Make this object black.
{text-align: right}
Align this text to the right.
{font-stretch: wider}
Stretch this text horizontally.
{font-family: courier}
Set this font to Courier family.
And in place, they might look like this...
.strapline {
font-style: italic;
font-weight: bold;
font-size: 14px;
}
.header {
font-size: 24px;
font-weight: bold;
}
.urlbar {
font-size: 11px;
font-weight: bold;
text-transform: lowercase;
}
.thispage {
font-size: 11px;
font-weight: normal;
text-transform: lowercase;
}