CSS Styles in DreamWeaver

Easy website upload with the SiteGround web hosting pack

The easiest way of formatting text and other web site contents is by using CSS style. You can define positioning and formatting style to text, images, layers, tables and so on. In this tutorial we will show you some basic steps in creating styles.

Open Dreamweaver and create a new document. Select Window -> CSS Style to open CSS palette if it isn't already open. Click on + sign to create a new style:

The following window will appear:

In Selector Type radio buttons group choose type of the style you wish to create. You can create style class that will be applied to content of your choice. These styles can be applied to any tags. With tag selector type you can create styles that will be applied to a particular tag of your HTML code. For example if you choose to define a style for all contents formated by <table> tags, you should choose tag selector type and select <table> from the list menu.

Advanced tap selector are a particular combination of tags (for example, "td" "h1" applies whenever an h1 header appears inside a table cell), pseudo-class selectors such as a:hover, a:link, a:visited, a:active and a specific ID attribute (for example, #style applies to all tags that contain the attribute-value pair id="style").

In Define in category you have to choose where to define the style. It can be either embedded in the current page or external. If you choose to be external, a dialog window will appear where to save .css file that can be applied to other pages further.

When you are ready with choosing what type of CSS style you wish to create click on OK button.

The following window will appear:

In this window you can define your style properties, such as font, color, background color, border style and etc. When you are ready click on OK and your new CSS Style will appear in CSS Style palette.

Select the content of your page that you want to apply CSS style to from the Properties panel from Style list menu choose the style that you desire to apply.

You can attach CSS style file to a particular page by clicking on attach button from CSS Style palette:

A dialog popup window will appear where you have to choose either to create a link to this css file or to import its content in the current page.