Step 4: Dreamweaver CS3 Tutorial – Using CSS

[This is Step 4 of the Dreamweaver CS3 Tutorial]

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.

Some of the styles you can centralize in an external css stylesheet include styles for body tag, h1 tag, h2 tag, p tag, a tag (specifies the look of link), menu styles, footer styles, etc.

Create an external stylesheet :

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.

 

<< Go back to step 3: Edit a webpage

Go to step 5: Using Server Side Includes >>

 

---