Josh Campbell: Techniques

Design Techniques

CSS: Cascading Style Sheets

Create a Simple Centre Panel Web Site

This tutorial works through the steps to build a simple web site using Cascading Style Sheets (CSS). It runs through some of the fundamental building blocks and should offer a good starting place to get your head around visual layout with CSS.

Note: We will be jumping between the CSS and HTML as the site progresses so you can see the effects of changes made in the CSS. This immediate feedback is one of the great things about designing with CSS.

Setting up

I've included all the files you'll need to build this site in a zip file (51k). This includes the HTML and CSS files for reference and an image directory with the graphical elements we'll use. Once you've got this downloaded and set up in a directory we'll start on the HTML file.

Starting with the HTML file

We will start off with a blank file called "ninja.html" (you can call it anything but 'ninja' is relevant for this one). We are going to follow good coding standards from the start and make the page XHTML-transitional compliant (You can read more about what this means in this article about DOCTYPES). In this case it means the first thing to add to the HTML page is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Note: It's important to have a DOCTYPE tag at the start of every web page for validation purposes.

From here things progress in much the same way as they always have with only one new addition. The link tag points at the CSS file we are about to create and essentially tells the browser that there is a CSS and where it's located.

<html> <head> <title>Ninja Tutorial</title> <link rel="stylesheet" href="globalstyle.css"> </head> <body> </body> </html>

Starting the CSS file

Create a new blank file called "globalstyle.css". This is the file that we are linking to from the HTML and will define the general styles for the site.

We are going to use 2 CSS files here to get around Netscape 4's lack of support. The common approach is to basically hide all the layout from N4 and give those users pure, unformatted content and navigation.

At the top of "globalstyle.css" add the following link:

@import "layout.css";

Netscape 4 is unable to understand the "@import" link so will only see the styles defined in "globalstyle.css". This leaves our second CSS free to do all the layout for standards compliant browsers while still allowing for N4 users.

The next step is adding some styles to the CSS and building up the HTML.