This article provides advice on creating and linking a cascading sylesheet (CSS) to an html doc in Dreamweaver, and adding styles to change the appearence (from the browser defaults) of some basic tags. You may wish to read our page on CSS concepts first. Click here.
Ensure it is formatted with the correct DOCTYPE and meta code. Dreamweaver will do this automatically.
Add some text and format it 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 property/values will be defined in your style sheet.
Leave your html document open and follow these steps to create a new empty style sheet (css) ...
With your html document open and selected, link you style sheet to it. You will need to do this for every html page you want to style with the style sheet.
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 property/values of the following tags ...
body (you could define an overall font family and page background color here)
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. Property/values 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)
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.