How to Add CSS Style Sheets in Dreamweaver
Create a New CSS Style in Dreamweaver
In a new HTML or CSS document, open the CSS Styles palette. Click on Window then CSS Styles or Shift-F11.
At the bottom of the window is a small document icon with a plus on it. This allows you to start creating new CSS styles. Click on it.
Dreamweaver makes it easy to style a specific tag in your document. Just click on the “Tag” radio button, and write the tag name in the Tag: box.
Note: This option will allow you to style only one tag. If you want multiple tags to have the same style, you need to use the next option.
Style Complex Selectors
Dreamweaver also allows you to style complex selectors, everything from multiple tags:
To sibling and child selectors:
div p ul > li
To complicated combinations of all of the above:
div.left #nav a.up:visited
Style a Class Selector with Dreamweaver
One of the most common CSS selectors is the class selector. So Dreamweaver offers it as your first choice for creating a style. Click on the “Class” radio button, and put your class name in the Name: box. Remember that a class name must be all one word, is case-sensitive, and cannot start with a number.
I named my class “bigHead”.
Dreamweaver allows you to create a style sheet for your entire site by choosing to define it in a new style sheet file, an existing style sheet file, and in the current document only.
I chose to put it in the current document.
Select Your Styles
Dreamweaver provides many different options for your styles. You can change:
- Block elements
- Box properties
- List elements
- and a few audible and visual styles
Once you’ve made all the style changes you’d like for this class, click OK to add it to your CSS.
I set my Dreamweaver options to use shorthand for my CSS font properties, so Dreamweaver wrote the font styles as just one long font property.
If you chose to write your styles to a separate style sheet, Dreamweaver will create a new CSS file and write the CSS there. You will then need to link to that style sheet from your Web pages.
Use the New Class in Your Dreamweaver Document
You don’t even have to remember the name.