Working with CSS Rules

This tutorial demonstrates working with CSS rules in Dreamweaver CS5.

In the previous section we looked at some basic operations on CSS rules using the CSS Styles Panel.

Returning to our previous sample web page, let's take a look in a little more detail at some of the ways in which we can work with CSS rules.

As we saw before, we can open the CSS Styles panel and work on the rules using the panel. However, there is a useful alternative.

Open the CSS Styles panel.

Make sure that the All tab is selected (rather than Current) and double click the name of the style sheet. In this case the style sheet name is oneColFixCtrHdr.css.

The CSS style sheet opens in the Document window, and can be directly edited. Note that by default it opens in a Split view with the current document. Press the Code view button to fill the Document window.

The contents of the style sheet include comments about each of the rules, and these can help to understand what each of the rules does, and to some extent how it works.

Another very useful facility is the ability to move CSS rules between documents and style sheets. For example, look at the contents of the CSS panel again.

Here I've right clicked on the rule .header and a menu appears. The menu includes the option Move CSS Rules... Select this and the Move to External Style Sheet dialog appears.

Using this dialog I can move the selected rule to another external style sheet. Similarly, if I selected one of the internal CSS rules I could move it to an external style sheet.

And here's one more very useful feature which was introduced in Dreamweaver CS5. Look again at the properties of the .header rule.

It's possible to disable a specific property in a rule. This is normally done as a temporary measure, and can be useful when testing rules or debugging pages.

In this case, To disable the text-align property I select it, then press the Disable/Enable CSS Property button.

The rule can be enabled again be selecting it and pressing the same button.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Working CSS Rules in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!