Defining Class Styles

We have seen how Dreamweaver uses styles to control page layout and how it automatically creates styles as you apply some text formatting. Now we need to see how to define our own style rules.

Managing Styles Explicitly

In the bottom right corner of the CSS Styles tab in the CSS panel group is a row of four icons (five in CS5 and later). These icons provide access to the functions you need to manage your style definitions.

Style Buttons Attach Style Sheet New CSS Rule Edit Style Sheet... Delete CSS Rule

The first of these buttons, allows you to attach additional external style sheets to the document you are currently working on. This means that you will be able to use any styles defined in those style sheets in your page.

The second button allows you to define a new CSS rule (you will be asked for a name for the rule and where you want to store it). A wide range of style parameters are then presented to you in a comprehensive dialog box.

The third button allows you to edit an existing rule. This uses the same dialog box as the option for creating new rules.

The final button allows you to delete a style rule. See below for details.

Where to Keep Your Style Definitions

The styles that Dreamweaver creates implicitly are always added to the head of the page in which they are created. This means that they can only be used in that page. This is sometimes called an "internal" style sheet. It is more useful to have an "external" style sheet for your styles, because that can then be loaded by every page in your site that needs to use the style definitions.

When you explicitly create a new style rule, Dreamweaver will ask you where you want to put the definition. The options available and the issues around those options are the same for creating individual style rules as they are for managing page styles. These choices have already been discussed in relation to page layout.

Creating a New Style Rule

Click on the New CSS Rule button and you will see the following dialog:

New Style

There are a few options here that need to be explained. Firstly, you are asked to chose a Selector Type. This defines how your style rule can be applied. The first option is the most flexible - if you define a Class rule, then the style can be applied to any element in your web page by giving it the appropriate class. Of course, if you apply a style intended for text formatting to an image, then it will not have any effect, but in principle the style rule can still be applied. If you select a Tag rule, then you are able to redfine the appearance of any of the predefined HTML tags. For example, if you wanted to redefine how a main heading looked you could redefine the h1 tag. This is often a good thing to do as it prevents browser default styles from spoiling the look of your page. The Advanced option lets you, for example, define rules that control how a link appears based on whether it has been visited or not, or rules that only apply to specific IDs.

Next, if you are defining a Class rule (or an Advanced rule), you must provide a name for your new style. The rule is to start a class style name with a "." and an ID style name with a "#" and this must be stuck to. Also, you should pick a name that will help you remember what the style is for. In this case, I plan to define a style for emphasizing the initial capital of a paragraph. Note that if you are defining a Tag rule, then the name must be the name of an HTML tag (there will not be an initial "." or "#") and Dreamweaver will offer you a drop down list of all valid tags.

The final option defines where the new style will be stored, as already discussed.

Defining the Style

Once you have selected all your options and clicked "OK", you will see the dialog for defining a new style (or editing an existing one), as shown below:

Defining a Style

This gives you access to a good range of the most common style properties that CSS allows you to define. They are organized into logical categories which you can select in the left panel, and then set values for the relevant properties in the main panel. The example here shows some text formatting properties have been set.

Working through all the available properties is beyond the scope of these introductory pages. Instead I encourage you to experiment with different settings and see the effects they have. Refer to the W3Schools web page on style sheets for a comprehensive description of all the style properties.

If the class initCap were then applied to the initial letters of these last three paragraphs, then it would have the effect you see.

This would be done by selecting the initial letter and the setting the class in the Dreamweaver properties window, or using the following code:

<p><span class="initCap">I</span>f class initCap were then applied to the initial letters of these last three paragraphs, then it would have the effect you see.</p>

Remember that a class can be appplied to as many elements in a page as you wish and every element to which you apply the class will get the associated styling.

Note that the same drop cap effect could also be achieved using a pseudo-class selector, as I will discuss later.

The CSS Styles Tab

The Style Manager WindowThe full CSS Styles tab is shown on the left.

The top part of the panel displays all the CSS rules that are available in the current page, along with where they are defined. In this example, we can see a range of rules that are defined in the file oneColLiqCtrHdr (the main style sheet for the whole site) and a single style style1 defined locally within this page.

The style .initCap is selected in the window, and a summary of all the property settings for that style is shown in the panel beneath.

This panel also allows you to add new properties and edit the existing ones without having to access the style definition dialog. You can simply edit the values displayed in the properties window as shown. However, some older versions of Dreamweaver (CS3) do not consistently display colour pickers in this properties window. So, if you prefer to use that dialog, then you can simply select the style and click on the Edit Style... icon, as described above.

Remember, editing a style rule means that every place where that rule is applied will get the new style definition.

If you wish to delete a style rule, then select it in the rules list as before, but then click on the Delete CSS Rule button. Note that if you delete a rule, it is removed from you style sheet, but any elements in your page that were formatted using that rule will still actually have the class applied, even though they look normal because there is no style definition associated with that class. This means that if, in the future, you do define a style for the given class, the original elements will automatically take on the new style. This can sometimes cause unexpected behaviour, so although it can be time consuming, it is good practice to remove any unused classes from document elements.

A good example of the practical use of style rules is to position images within a page.

The next page discusses how Tag style rules can be used... Next