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.

Figure 1 - CSS Styles palette.

Look at the 4 buttons in the bottom right of the palette. Theses are, from left to right:

1. Attach style sheet
2. New CSS style
3. Edit style sheet
4. Delete CSS style.

As I said earlier, we can create a style sheet or we can embed a style or styles into a particular document.

NOTE: For this example, we are going to create a seperate style sheet, but before we do, let's discuss why you may want to embed a style or styles into a document.

By mixing both linked and embeded style sheets, you can set tags that are specific to only one doucument. This allows you to have dynamic elements that are different on individual pages, and use the normal attached style sheet for styles that are to be used site wide.

Ok, we're ready to create the style sheet for our page. From the CSS palette (figure 1) choose the Attach Style Sheet button. This will open the Link External Style Sheet dialogue box (see figure 2).

Figure 2 - Link External Style Sheet dialogue box.

This option is a little odd, because it's actually asking us to link to a file that doesn't actually exist yet. Ensure that the Link radio box is selected (as in figure 2 above) and press the Browse button. This will open the familiar open/save type dialogue window. Where it says File Name towards the bottom type in default.css - ensure that you are in the root of your site and press OK. You will be prompted to create the file, choose OK. This has now created a blank CSS file for us. (I told you it was strange!)

So far, we have no styles created in our CSS file. In this next step, we'll create the general rule to apply to our tables. This will include the outline, cell colour/image, text alignment, text style, etc. That's right, you can do all that and more from a style sheet and then at the click of a button apply that style to an item on your page.

Creating our first style.

Click the New CSS Style button from the CSS Style palette (see figure 1), this will open the New CSS Style dialogue box (see figure 3).

I've already typed in the name I want to use for my style where it says Name: When naming your styles you MUST but a full stop (.) at the beginning and not leave spaces or additional characters.

Below the name option we have 3 Types to choose from. This allows us to choose what kind of CSS we want to create.

Figure 3 - New CSS style dialogue with our newly named style (.table1)

By this, I mean we can create a custom style (as we are doing in this example), you can redefine a HTML tag - for example, we could rename the P (Paragraph) tag to set all the text that uses the P tag to a certain size, style, colour, etc. The final option - Use CSS selector enables us to alter the 4 tags used with links displayed on a web page. An example would be when you take your mouse over an underlined link on a page and the line disappears as your mouse moves over it. We'll look into this in another tutorial.

Finally we have Define In: You can see that it currently says default.css (that's the name of the style sheet we just created). Below that, is - This Document Only. Remember we briefly discussed linked styles and embeded styles? Well, choosing this option will embed the CSS INTO the page.

We're are going to use the options in Figure 3 - if yours differs from those settings, make the necessary alterations now.

You'll now be presented with the meat and bones of the CSS selector - CSS Style Definitions selector (Figure 4).

Figure 4 - Style Definition Selector - Currently displaying the Type category.

If you look to the left of this dialogue box, you'll see a list of 8 different categories. I'm not going to cover each and every option in all 8 of these. Rather, I'll describe what each setting we alter is doing within the document as we go along. Some options will be self explanatory from other applications you've used; others will probably be completely alien.

Category - Type
Font - Arial, Helvetica, Sans-Serif (this option specifies what font family to use)
Size - 10 (the size of the text that is displayed - this overides the browser font size setting)
Colour - #333333 (denotes the colour of the text - in this case a dark grey).

We can leave the other settings empty for this example, but feel free to play around with the settings later when editing your style sheet to see the effect they have on your document.

Category - Background
Background Colour - #99CCFF (this is going to set the background colour within the table)
Category - Block
Text Align - Justify (this specifies the way text will be aligned - choose from Left, Right, Centre & Justify).
Again, this is the only option we are going to alter. If you require intricate control over the way your text appears on screen, this is the place to do it.

Figure 5 - The available options for the Box Category.

Category - Box

This category looks a little more complicated, but if you look closer you'll see that the options are pretty straight-forward. We are only interested in one of the settings for this particular CSS Style. And that is the padding option. The padding is used to control the interior margins in our table cell. Mainly, we're using this to ensure the text doesn't stay aligned directly next to the edge of the table. Think of it as margins like your word processor uses.

Padding - 5 pixels (ensure the tick is in Same for All). This saves us having to set each one individually.

We are nearly done defining our first style, just one more setting to input and that is the Border option.

Figure 6 - The available options under the Border category.

Category - Border

We now have 3 options to set for the outline effect on our table (figure 6). This option really is very useful as the other (manual) alternative method for creating outlined tables is very time consuming and messy.

Styles - Solid
Width - 1.5 (you'll need to type the value in manualy)
Colour - #0099FF
Finally, ensure that Same for All is ticked for ALL 3 options.

Now you can click OK and you've just created your very first CSS style.

Well, that's all very interesting, but it hasn't done anything on screen! Well, no, not yet it hasn't. What we need to do next is actually give the CSS something to work with.

Create a new table. Use the following settings:

Rows - 2
Columns - 3
Width - 700
Once you've done that you'll need to set some more parameters for the inserted table. Select the first column and set it to 150 pixels wide, now choose the second column and set the width to 5 pixels. The reason we use three columns is to allow for some 'white space' between the two main columns (don't worry, you'll get used to it).

Now, position your cursor in the first column - 2nd cell. Now take a look at Figure 1 and ensure that the Apply Styles radio button is selected and NOT the Edit Styles option (very important you don't get these two mixed up as it can REALLY cause you problems).

Now click the word .table1 entry. Your cell should now immediately change to take on the characterisitics we have just set up in our CSS. Finally, put your cursor in the last cell on the right and click the .table1 style again. Now, type some text into your cells to see what it all looks like. Press F12 to test it out in your browser.

That's part one finished. Part 2 is going to add some more new features into our style sheet by setting another style with different options ready for our title bars at the top of our table.