Introduction | Opening the Program | Different Views | Program Layout | Panels: 1 - 2
The Insert Bar: 1 - 2 - 3 - 4 - 5 | Creating a New Page | Opening a Page | Multiple Pages with Similar Styles
Page Properties | Text & Text Properties | Checking Spelling | Style Sheets: 1 - 2 - 3 - 4 - 5 - 6 - 7
Tables: 1 - 2 - 3 | Images: 1 - 2 - 3 - 4 - 5 | Links: 1 - 2 - 3 - 4 - 5
Publishing: 1 - 2 - 3 - 4 - 5 - 6 | Templates: 1 - 2 - 3 - 4 | Collaboration: 1 - 2 - 3
Outside References

Create a New Style Sheet From Scratch:
Making your own style sheet from scratch may seem a bit intimidating at first, but in the end, having one to work with can help make formatting your web site a lot easier.

To start a new style sheet, go to the menu bar and select “File” and then “New.” From the window that appears, make sure you are in the “General” tab area. Then, make sure you have selected “Basic Page” from the “Category” column, and select “CSS” from the “Basic Page” column. There will be a few selections to choose from that appear on the right side; pick whichever you want (“Basic: Arial” is fine). When these are selected, click on the “Create” button.

A new blank page will appear with the words “<< CSS >>” at the top. This is a comment that indicates that you are working with a style sheet. This will have no effect on the code you will create.

Hand Code a New Style:
Now it’s time to set up some styles of your own.

Body
The first style you should create is one that controls the look of the page itself. To create the style for “Body,” we’ll be entering new text inside the “BODY” tags in your new CSS document. After the first “font-family: Arial, Helvetica, sans-serif;” line, press the “Enter” key to bring you to a new line. You’ll want a background color for your web page, and this will be controlled in your “BODY” style. On this line, type:

background-color: #CCCCCC;

This will give all pages that have your style sheet attached to it a gray background. Now, your text will need a size. Make a new line, and type:

font-size: 10pt;

These will be all of the characteristics that the “BODY” style will manage. It is now time to close the tag. Do this by putting a close brace “}” right after the last line of code.

In Dreamweaver MX 2004, your styles sheet should now look something like this:

Save a Style Sheet:
Let’s save this style sheet as it current is, and then apply it to a web page. Go to the menu bar and select “File” and then “Save As.” Give your style sheet a name, and add “.css” at the end of the file name. For example, you can name your file “stylesheet.css”:

Now that you have saved your style sheet, you can now apply it to as many web pages in your site as you like.

>> next