Part 1 - Creating a Cascading Style Sheet in Dreamweaver

[djbosak]

Creating a Cascading Style Sheet in Dreamweaver

Note: This article has been updated for Dreamweaver 8. The CSS features in have been vastly improved in Dreamweaver 8.
This article is the first in a series of tutorials about Cascading Style Sheets (CSS). The aim in Part 1 is to familiarize you with some of the basics of CSS. I'll review some of the problems you may run into. I'll also cover the shorthand and longhand versions of the CSS syntax layout.
I would like to make it clear that I do not advocate you dropping the use of tables as design elements. It is a case of what suits you best. Whatever you feel comfortable with is a good way to go. What this series of tutorials will do is provide you with the ability to create CSS layouts using Dreamweaver 8. Once you have some of the basics down, you will move on to Part 3 to create a simple but effective CSS layout.
All exercises you undertake in this series are available as downloads, so you can work alongside, or just review the code as you read through. I will keep the same structure as you work throughout the series so you can keep everything structured locally for easy reference if required.
Requirements

To complete this tutorial you will need to install the following software and files:
Dreamweaver 8

• Try
• Buy

Sample files:

• css1_samples.zip

Creating a Cascading Style Sheet

First, I wouldt like to touch on the outmoded use of font tags. By default, Dreamweaver 8 uses styles rather than font tags to define the appearance of your text content. This is a good move in the right direction because it is quite easy to make changes to revert back to font tags.
To begin with, font tags are deprecated, which means they probabaly will not be supported by browsers in the future. They are no longer a part of the XHTML specification. This is a good enough reason not to use them.
The real problem with font tags begins when your design client, "if you are designing a web page for a client" requests changes. Maybe the font color needs to be changed or perhaps the font face needs to be changed from Verdana to Arial. If the content has been generated using font tags, making these changes can take a huge amount of time. By contrast, you can make changes such as these, and indeed far more complicated ones in a very short time by editing an external style sheet because it applies the changes on a sitewide basis instantly. You also get easier document manipulation and lighter, faster-loading pages. These are a few of the benifits of style sheets.
Taking the time to learn CSS, even if you only want to use it for redefining elements rather than full-fledged page layout, is well worth enduring the small learning curve it takes to get you there.
How Do You Use CSS?

Let's start at the beginning of the CSS trail and look at the methods available to you when you want to apply a Cascading Style Sheet to your documents. You can use an external style sheet, an embedded style sheet, or inline styles. External style sheets are best because they give you the most control over thestyles you use.
Using an External Style Sheet

By using an external style sheet, you exercise global control over the appearance of every page in your site that is linked to that CSS file. This is a very powerful method of using CSS. By using a linked style sheet, you have the ability to make sitewide changes on countless numbers of pages from a single location. This can be completed in what may amount to no more than a few seconds' work. Powerful indeed!
Dreamweaver makes setting up an external style sheet just about as easy as it can be. In the first exercise, I willreview the procedure of creating an external style sheet and how to link it to your web pages.

1. Select File > New or press Control+N to open the New Document dialog box (see Figure 1).
   
2. Figure 1. The New Document dialog box
3. In the Category column, select Basic Page.
4. In the Basic Page column, select CSS.
5. Click the Create button.

Your newly created Cascading Style Sheet will open in a Dreamweaver window. If you are completely unfamiliar with CSS, you will notice that style sheets do not have a "Design view". Your style sheet is little more than a text file that contains your CSS rules, their properties and values.
Alternatively, if you select the CSS Style Sheets option in the Category column of the New Document dialog box, the Basic Page column will show a list of "starter" style sheets that already contain some of the CSS rules you may use. You will not be using these starter pages at the moment. Instead, you will be building your own style sheet, and I will discuss why you are setting the properties and values you will use.
Now that you have created your first CSS file, use the following steps to save it in a defined site:

1. If you haven't already defined a site, now is the time to do so. If you need help defining a site, see the How to Define a Site in Dreamweaver Section.
2. Create a new folder called CssFiles in the root of your site.
3. Save the CSS file in the new CssFiles folder and name it external.css.

Note: Usually, I suggest saving CSS files in their own folder just for the sake of good organization. This keeps your site neat and tidy as it grows.
In this section, you will create two pages that will demonstrate the power of using an external style sheet:

1. Open the New Document dialog box (File > New).
2. Select Basic Page from the Category column.
3. Select HTML from the Basic Page column.
4. (Optional step) Click the Make Document XHTML Compliant option.
5. Click the Create button.
6. Save the page to your site root and name it external.html.
7. Repeat Steps 1–5 to create a second page.
8. Save the second page to your site root and name it external2.html.

You now have all the documents you need to complete the first section of this tutorial.
Linking the Cascading Style Sheet

You should now have Dreamweaver open and have the following three documents displayed, saved, and ready to work on.

• external.css
• external.html
• external2.html

If you do not have these files opened in Dreamweaver, please open them now.

Here are the steps required to follow in this tutorial.

1. Open external.html, external2.html, and external.css in Dreamweaver 8.
2. Press Shift+F11 to open the CSS Styles panel.
3. Make sure external.html is the active document, and click the Attach Style Sheet button in the lower right corner of the CSS Styles panel. The Attach External Style Sheet dialog box opens. Dreamweaver remembers your last selection.
4. Select the Link option.
5. Click the Browse button.
6. The Select Style Sheet File dialog opens.
7. Select Document from the Relative To pop-up menu.
8. Select the external.css file you created earlier. The path is inserted in the File/URL field.
9. Click OK to add your style sheet name to the CSS Styles panel.
10. Click the Code view button. You will see that Dreamweaver has inserted the necessary code linking your document to your style sheet.
11. Select File > Save to save the file.
12. Repeat the process to link external2.html to your style sheet.

Before you begin to add rules into your style sheet, there are one or two things that you should cover first. In the next section, you will learn why it is important to use a complete doc type. I will then give a quick introduction to margins and padding before discussing browser default settings and why it is a good practice to zero off these defaults so you start on a level playing field.