Creating a CSS Style

This tutorial illustrates creating a CSS style in Dreamweaver CS5.

We have already seen that there are three ways that CSS can be applied to an HTML document. Although we're going to concentrate on the use of external styles, it's worth knowing how to use the other two as well. Let's look at creating CSS styles now.

Let's open one of our earlier pages.

Click on the Format menu and hover over the CSS Styles option. You see this fly-out menu.

Select New... and the New CSS Rule dialog appears.

Firstly, look at the options for Selector Type.

With each of the options there is a brief explanation of its application and limitations. On this occasion, let's choose Class. Now give the Selector a Name. I've chosen TestClass.

Now look at Rule Definition.

This gives us the option of defining the style in this document only or in a new style sheet file. We'll choose this document only on this occasion. Press OK.

We now see the CSS Rule Definition for .TestClass dialog. Note that Dreamweaver adds the mandatory period at the start of the name for us. We use this dialog to choose the properties we want for this CSS style.

Here I've made a number of selections, including some to make it very distinctive for our purposes.

Click OK and my CSS style is created.

To use the new style, I select some text in my document, then use the Targeted Rule dropdown on the CSS page in the Properties Panel.

Select TestClass and see the effect of the new style on the selected paragraph.

To create an external style, let's select the second paragraph and follow pretty much the same procedure, except that we specify that the new style should be defined in a new style sheet file.

Click OK. A new style sheet is created with a name I specify, and the new CSS style is specified in it. Now I select that style and apply it to the second paragraph.

In fact, here I've applied the two new styles to alternate paragraphs in my document.

Although the effects are the same, it's important to remember that we have implemented these styles in very different ways. One is defined in the header of the current document as shown in the code here.

The other is defined in a separate external style sheet.

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: Creating a CSS Style in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!