Re-defining typographical elements with CSS styles in Dreamweaver

You may wish to read our page on CSS concepts first. Click here.

NOTE: I will assume you have created an XHTML compliant document and taken the advice on this page and formatted it with the correct DOCTYPE and meta code.

1. Format your HTML text

First, format your text using the Properties palette. Select your text in design view and make a selection (Paragraph, Heading 1 etc) from the Format menu. Depending on your Dreamweaver and browser preferences, it will be styled in variations of Arial or Times Roman at different weights and sizes. These are defaults and will be overruled by the CSS you are about to create.

WARNING: DO NOT USE THE FONT, SIZE OR COLOUR OPTIONS. These attributes will be defined in your style sheet.

2. Create a new external/linked style sheet

Follow these steps ...

Go to File>New and select Page type = CSS and then click "Create".
A new empty style sheet document will appear. Save into your local site folder. It must be named in accordance with ISO naming conventions and end in the .css extension. This sites style sheet is entitled "styles.css".
You can leave the style sheet open, if you want to edit it manually later, or close it. Dreamweaver can edit existing styles, and write new ones, to a style sheet that is not currently open.

3. Attach (link) the style sheet to your html documents

Create or open an existing html document and link you style sheet to it. You will need to do this for every html page you want to style.

4. Add styles to the style sheet

Create your first style. With the html doc you want to style open in design mode, open the CSS Styles Palette from the Window menu. Click the "New CSS Style" button at the bottom of the palette
In the dialogue box that opens, choose a tag to redefine in the Tag dialogue box at the top. In the image below, the h1 (heading 1) tag is selected, selector type = tag, and define in = styles.css (or whatever your style sheet is called). Click "OK".
Choose attributes for your style using the dialogue box that opens. Basic styling suggestions are below.

5. Create additional styles in the style sheet you have created

You can create additional styles in the CSS file you have created. Click the New CSS Style button at the bottom of the CSS Styles palette. Define the style in your existing style sheet.

It's worth re-defining the attributes of the following tags ...

body (you could define an overall font family and page background color here)
p (Paragraph)
h1 (Heading 1)
h1 (Heading 2)
h2 (Heading 3)
h4 (Heading 4)
strong (bold ... this will give you flexibility if you want to easily change the styling of all bold type. Attribute options that work are "bold" and "normal")
em (italic ... this will give you flexibility if you want to easily change the styling of all italic type)

6. Edit the existing styles

Later, when you have defined your styles you can edit them from the CSS Styles palette by selecting the style and then clicking the Edit Style ... button at the bottom (the pencil icon).

NOTE: Don't forget to stick to standard font families like Arial, Times or Verdana. All computers have these.