Re-defining typographical elements with CSS styles in Dreamweaver

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

1. Format the text

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.

First, format your text using the Properties palette. Select your text and choose, Paragraph, Heading 1 etc from the Format menu. It will appear in variations of Times Roman (the default font). DO NOT USE THE FONT, SIZE OR COLOUR OPTIONS. These attributes will be defined in your style sheet.

2. Create a new external style sheet

The easiest way to create a new CSS style sheet is to select a "New CSS Style" (eg redefine a tag) from the CSS Styles palette and define it in a new Style Sheet. It's worth re-defining the attributes of the following tags ...

body (you could define an overall font family and 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)

Open the CSS Styles Palette. Click the "New CSS Style" button at the bottom of the palette

In the window that opens select Selector Type: = Tag, and Define In: = New CSS Styles. Then choose a tag to redefine in the Tag dialogue box at the top. In the picture the h1 (heading 1) tag is selected.

Click OK and name and store your CSS file in your local site. It must be named in accordance with ISO naming conventions and end in the .css extension. This sites style sheet is entitled "styles.css". Ensure at the bottom of the save dialogue box that Relative to: is set to Document.

Your new style sheet will appear in the CSS Styles palette window and a dialogue box will open to allow you to set the attributes for your first style (h1).

3. Attach the style sheet

Click here to learn how to attach the stylesheet in Dreamweaver.

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

You can create additional re-defined 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.

5. 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.