Create CSS Stylesheet

CSS Styles help in consistency and maintenance. It is a good idea to centralize the text styles as much as possible in order to maintain consistency and easy updating.
In the case of layouts designed with div tags (instead of tables) or use of one of the prebuilt layouts that come with Dreamweaver CS 3 you would have already created the css stylesheet and assigned positional properties to the div tags. Various CSS website templates are also available which you can customize for a professional looking site.
Some of the styles you can centralize in an external css stylesheet include:

• H1 tag redefined
• H2 tag redefined
• p tag redefined
• a tag redefined (specifies the look of link)
• menu styles
• footer text styles

To create an external stylesheet follow these steps:

1. File > New
2. Page Type > CSS
3. Save the file in the website folder. You can name it 'styles' or any appropriate title. It will get saved as a .css file.

Once you have created the css file you will need to attach it to the dreamweaver template file. You can do this from the CSS Styles panel [Window > CSS Styles]. Click the  icon (attach style sheet), select the css file and click OK.

You can create new css rules by clicking on the "New CSS Rule" icon.

In the dialog box that appears,
If you want to create a custom style which can be applied to any tag:

1. Select the selector type "class"
2. Name it with a "." at the beginning like .heading
3. Define in: styles.css (or the name of your css file)

If you want to redefine the look of an existing html tag::

1. Select the selector type "Tag"
2. Select the Tag from the drop down menu e.g. "h1"
3. Define in: styles.css (or the name of your css file)

In the dialog box that appears, specify the properties of the style and click ok.

Posted in: Dreamweaver Tutorial