Creating Web Pages/Sites using CSS (Part 1)

If you're new to web design or an old veteran you can't have failed to have heard about CSS (Cascading Style Sheets). These files that you can attach (or tags you can embed in a particular page) allow for intricate page layout, text control, etc. In this tutorial I'll be taking you through creating a simple page layout using only two CSS Styles.

I know that sounds a bit simplistic, but once you see how easy some of the techniques are you'll wonder why you ever bothered creating pages the old fashioned way.

Our page is going to consist of two tables and one style sheet (comprising of 2 styles). We are going to outline the tables, have different shades within the table and use a repeating graphic for the table heading.

Take a quick look at the HTML code for the page and you'll be able to see that a lot of the information on the page isn't there. However, at the top of the source code you should see (<link href="default.css" rel="stylesheet" type="text/css">). This tells the browser to use the file default.css to control the way certain elements on the page are displayed. In the first part of this tutorial we are going to create that style sheet and define our two style tags. We'll also take a look at how altering the style sheet will update all the pages that are linked to it without our intervention. So, as you can see, style sheets make altering aspects of your entire website as easy as changing a single parameter. Cool huh?

We'll be using DreamweaverMX for this tutorial, but the differences with earlier versions of Dreamweaver may vary, but only slightly.

Step 1 - Creating the Style Sheet

Open Dreamweaver and have a new page open.

You'll need to have a site defined (ideally) for this tutorial as we are going to be using images, etc.

If you haven't already, save the file and name it css_1.htm. This is going to be our sample page so we can see the changes as they take effect while altering our CSS later. Open the CSS window/tab (Shift+F11) - see figure 1.

Figure 1 (right) shows the CSS Styles selector palette. As you can see, there are already some styles created - your palette will be empty.

Get All Tutorial