CSS and Dreamweaver

Creating Styles in Dreamweaver

In the code view

One way to create styles in Dreamweaver is to start a new file (File > New) and choose "CSS" as the file type, then start typing the styles in text mode. Experienced CSS coders usually use this method. But there are other methods available for those who don't like to type things out in plain text.

Using the CSS side bar

Another way is to first create the HTML file, then click on the CSS icon in the upper right area of the screen.

This will open up a new side window and will allow you to create styles, link to style sheets, and edit existing styles.

Use the "chainlink" icon to link to external style sheets.

The chainlink icon will cause a popup window to appear.

Select the CSS file by browsing for it.
Choose how you will link to the file ("Import" is usually recommended).
Choose the media type. Your main style sheet will be for "screen," meaning for the computer screen. You may also choose to specify that the same styles should apply to "projection" circumstances, such as when giving a PowePoint presentation. See also the section on media types for more information.

Use the "paper plus" icon to create new styles.

This will cause a popup window to appear.

Choose which method to apply the style: class, tag, or id (or pseudo-class).
Type the name of the style. Important: Don't forget the period ( . ) for class attributes or the pound sign ( # ) for id attributes.
Choose where you want the style to be defined. If you are using an external style sheet, the CSS file will appear in the drop-down list. If you have not yet created an external style sheet, you can start one by selecting "New Style Sheet File." If you already have an external style sheet but have not yet linked to it, you will need to cancel this process and click on the chainlink icon to link the style sheet to the HTML file. If you want the style to apply only to this particular document, select "This document only." This will cause the style to appear in the <head> of the document.

Once you specify the type, name, and location of the style, you will see another popup window. From here you can specify styles by selecting your specifications from lists of options.

Some people like this method better than typing all of the styles. Others (like me) find it easier to type them, rather than hunt for all the properties in Dreamweaver's interface. One advantage to using the Dreamweaver interface is that it shows you what the options are for particular types of styles, and helps to give you ideas on how to apply the styles.

Use the "pencil" icon to edit existing styles.

Select "All" under the "CSS Styles" tab.
Select the style name that you want to edit.
Click on the pencil icon. This will cause a popup window to appear, wherein you can edit the styles.

You can also edit the style properties directly in the side bar if you feel comfortable doing so. This method does not provide you with drop-down lists of options, but is faster for those who are familiar with the capabilities of CSS.

Use the "trash can" icon to delete styles.

Select the style that you want to delete.
Click on the trash can icon.

Applying Styles within Dreamweaver

The following instructions assume that you have already created your style sheet and you just need to add the styles to the HTML page.

Using tags:

When applying styles to tags such as <p> or <body> or <h1>, etc., you don't have to do anything to the HTML code at all. As long as a style is declared in the CSS document, the style will work.

Using id:

When applying styles using the id attribute, you have to get into the code view in Dreamweaver. You just go to the tag in the code and type id="whatever" in the proper spot.

Using class:

When applying styles using the class attribute, you have a choice. You can either go to the code and type class="whatever" in the proper spot, or you can follow the steps below:

Place your cursor in the WYSIWYG view area on the item that you want to attach the style. For example, if you want to apply the style to a paragraph, click somewhere on that paragraph.
Click on the proper tag in the lower left corner of the WYSIWYG view area. In our example, we would click on the <p> icon.
Select the appropriate class from the drop-down list of styles
Note: If you have more than a few styles, the list will "drop up" rather than down.

To portions of content:

If you want to apply a style to a portion of a sentence, or some other portion of a block level tag (e.g. if you want to highlight a phrase in a paragraph):

Select the portion with your mouse.
Select the style from the drop-down list.

When you do this, Dreamweaver will automatically create a <span> tag with the appropriate style.

Why Don't All of the Styles Look Right in Dreamweaver?

Dreamweaver may be a powerful in many ways, but it is not powerful enough to display all of the styles correctly. When you start experimenting with advanced CSS, you'll notice that Dreamweaver can't handle it all. It would be nice if Dreamweaver could handle it, but it can't. You should preview the page in real browsers (Firefox, Internet Explorer, Safari, Opera, etc.) to see what the page actually looks like.

Previewing Pages

Dreamweaver allows you to preview pages by clicking on the F12 key. This will open the HTML file in your default browser. You can configure keyboard shortcuts for other browsers by setting your preferences in Edit > Preferences > Preview in Browser.

Things to Avoid in Dreamweaver

Avoid the following buttons in Dreamweaver's "Properties Bar", because they will either produce code that is not valid XHTML or add unnecessary items to your style sheet:

The "align" buttons
Use the CSS property text-align instead (e.g. text-align: center;)
The "size" drop-down list
Use the CSS property font-size instead (e.g. font-size: 120%;)
The "font" drop-down list
Use the CSS property font-family instead (e.g. font-family: Verdana, Arial, Helvetica, sans-serif;)
The "color-chooser" in the Properties area
Use the appropriate CSS color selector instead (e.g. color: red; or background-color: red; etc.)
The "Target" drop-down list
It's usually a good idea to not cause pop-up windows to appear, so most of the time you don't need to do anything like this.