home > css > css and dreamweaver

css and dreamweaver

You can use css style sheets with Macromedia Dreamweaver (http://www.macromedia.com/software/dreamweaver/) in a variety of ways. You can create new external style sheets, create embedded style sheets, or link to existing external style sheets for each document. See the Dreamweaver section for advice on using Dreamweaver. These instructions are for Dreamweaver 4.

You can also learn how to use css to apply border styles and different link styles - includes Dreamweaver work-arounds.

create a new external style sheet in dreamweaver

1. Open your document
2. Click Window > CSS Styles
3. Click the "Edit Style Sheet" icon (3rd from left)
4. Select "New"
5. Make sure the "Define in" radio button is set to "New Style Sheet File" and not "This Document Only"
6. Decide whether you're going create a style sheet class, redefine a html tag or use a css selector
7. Select the item you're going to define and Dreamweaver will ask you to save your .css
8. Save it in your web site - best in a folder called /styles/
9. Edit your attributes and save.
10. To add more style sheet attributes for classes, html tags and selectors, click the "Edit Style Sheet" icon again
11. Select your new style sheet from the list
12. Click Edit and continue
    • Be aware that Dreamweaver allows you to assign attributes which may not be supported by all browsers yet
    • You can remove the link to the style sheet by clicking the "Edit Style Sheet" icon and then clicking "Remove"

creating an embedded style sheet

1. Open your document
2. Click Window > CSS Styles
3. Click the "Edit Style Sheet" icon (3rd from left)
4. Select "New"
5. Make sure the "Define in" radio button is set to "This Document Only" and not "New Style Sheet File"
6. Decide whether you're going create a style sheet class, redefine a html tag or use a css selector
7. Select the item you're going to define
8. Edit your attributes and click "Done"

Or

1. Open your document
2. Click Window > CSS Styles
3. Click the "New Style" icon (2nd from left)
4. Make sure the "Define in" radio button is set to "This Document Only" and not "New Style Sheet File"
5. Decide whether you're going create a style sheet class, redefine a html tag or use a css selector
6. Select the item you're going to define
7. Edit your attributes and click "Done"

link to an existing external style sheet

1. Open your document
2. Click Window > CSS Styles
3. Click the "Attach Style Sheet" icon (1st on left)
4. Browse for the existing style sheet
5. Select correct style sheet

using style sheets in dreamweaver

Whether you're using inline, embedded or external style sheets, Dreamweaver will display the html tags as defined in the style sheet (you'll need to define all the html tags you require) and the classes will be displayed in the CSS Style menu (Window > CSS Styles). Image to the right shows list of classes.

applying a class

To apply a class, simply click once in the area you wish to define. The html tag you will be applying the style class to will be highlighted in bold at the bottom of your Dreamweaver window (see image on the left with pink highlighted tag). If the correct bit of html is not highlighted, simply click on the correct one in this bottom bar. This will highlight the whole html tag. Then click on the appropriate tag in the CSS Styles menu. The class will now be applied to the whole html tag. If you just wish to apply a style to part of an area, select the area using your mouse, then click the appropriate style class. This will apply the style to only the highlighted area.