How to Add CSS Style Sheets in Dreamweaver

01
of 07
Create a New CSS Style in Dreamweaver

Create a New CSS Style in Dreamweaver
Create a New CSS Style in Dreamweaver. Screen shot by J Kyrnin

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.

02
of 07
Style Specific Tags

Style Specific Tags
Style Specific Tags. Screen shot by J Kyrnin

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.

03
of 07
Style Complex Selectors

Style Complex Selectors
Style Complex Selectors. Screen shot by J Kyrnin

Dreamweaver also allows you to style complex selectors, everything from multiple tags:

html, body

To pseudo-classes:

a:visited

To IDs

#navigation

To sibling and child selectors:

div p
ul > li

To complicated combinations of all of the above:

div.left #nav a.up:visited

04
of 07
Style a Class Selector with Dreamweaver

Style a Class Selector with Dreamweaver
Style a Class Selector with Dreamweaver. Screen shot by J Kyrnin

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.

05
of 07
Select Your Styles

Select Your Styles
Select Your Styles. Screen shot by J Kyrnin

Dreamweaver provides many different options for your styles. You can change:

  • Type
  • Backgrounds
  • Block elements
  • Box properties
  • Borders
  • List elements
  • Positioning
  • 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.

06
of 07
Dreamweaver Adds the Styles to Your Style Sheet

Dreamweaver Adds the Styles to Your Style Sheet
Dreamweaver Adds the Styles to Your Style Sheet. Screen shot by J Kyrnin

View the HTML code and you can see that Dreamweaver added the styles to the head of your HTML document. Even though I didn't put the period (.) at the front of the class name, Dreamweaver did it for me. It also commented out the CSS in case older non-CSS browsers hit the site.

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.

07
of 07
Use the New Class in Your Dreamweaver Document

Use the New Class in Your Dreamweaver Document
Use the New Class in Your Dreamweaver Document. Screen shot by J Kyrnin

Once you've defined a class, you can use it to change the style of any associated element on your document. First select the element you'd like to style, then go to the Properties menu (Ctrl-F3 or Cmd-F3) and choose the style class from the drop down menu. As you can see, if the class has visual text styles, they will show up in the menu, so that it's easier for you to tell which style you're picking. You don't even have to remember the name.