CSS design basics with Dreamweaver – Part 4: Defining and using class selectors

In this tutorial you will learn how to define and use class selectors by using the Adobe Dreamweaver CSS Panel. The use of class selectors is a much abused method for changing the appearance of content within a web page; it is a selector type that should be used sparingly.

Requirements

To complete this tutorial you will need to install the following software and files:

Dreamweaver 8

• Try
• Buy

Sample files:

• css_best_pt4.zip (ZIP, 1K)

Prerequisite Knowledge

• CSS design basics with Dreamweaver – Part 1: Learning about doctype
• CSS design basics with Dreamweaver – Part 2: Styling (X)HTML elements
• CSS design basics with Dreamweaver – Part 3: Margins and padding
• CSS design basics with Dreamweaver – Part 4: Defining and using class selectors

Using class selectors

A class selector is a CSS rule that can be applied to any element within your page and it can be reused as many times as you deem fit to achieve the results you desire. Unfortunately, this is often the first error that many developers new to CSS make. If you find yourself applying a class selector to a web page over and over again, then it is very likely that you are not being efficient with your code. Often you will find that there is a better way to achieve the results you require.

Before you can fully understand when a class selector should be used, you will need to attain a greater understanding of CSS and the options available to you within the different selector types. You will learn about such selectors and options as this series progresses, and you will then learn how you can most effectively deploy your CSS for optimum performance and minimum maintenance.

The syntax of the class selector

In part two of this series you learned about the type selector. The class selector is very similar in appearance. Take a look at Listings 1 and 2.

p {
  color: #ff0000;
}

Listing 1. The type selector

.blue {
  color: #0033ff;
}

Listing 2. The class selector

The selector in Listing 1 should be familiar to you. It is a type selector and by default will make all text contained within a p element red (#ff0000).

Listing 2 is a class selector. The prime difference here is the fact that the first character of the class selector is a period. The period is the defining point of the class selector; all class selectors must begin with a period. In this case your class selector will turn the text within the element it is applied to blue (#0033ff)

Class selectors work very differently to type selectors. A type selector targets an element, such as a p tag, and will affect all the targeted elements without the addition of any code at page level. The class selector does not target any elements at all; it exists for you to apply to an element within your web page. To trigger the properties and values that your class selector contains, it must be referenced from within your page-level code. The implementation of the type and class selectors is very different. Let’s look at two snippets of code in Listings 3 and 4.

<p>This text will be red because the p type selector defines it to be just that</p>

Listing 3. An example of how a type selector is applied

<span class="blue">This text will be blue because the blue class selector defines it to be just that</span>

Listing 4. An example of how a class selector is applied

You can see the difference between the two selector types. In Listing 3 there is a nice clean p element containing some text. In Listing 4 you need to apply extra code to the opening span tag, a reference to the class selector. Only when this additional code is added to the opening tag of an element will the class selector be applied. Whenever possible you will want to keep excess code out of your web page and in your style sheet. The class selector you have seen so far could easily have been written as a type selector.

span {
  color: #0033ff;
}

Listing 5. Your class selector written as a type selector

Of course, it will not always be possible to write a class selector you had in mind as a type selector. This is why the class selector exists. From the examples you have seen, you should have a good understanding of how a class selector is written and applied to an element within your page.

Creating class selectors from within Dreamweaver

Within the css_best_pt4.zip file linked at the beginning of this tutorial, you will find a page called 1.html. It contains an embedded style sheet and the class and type selectors that you have seen in this tutorial. Open 1.html in the Dreamweaver Design view.

In Dreamweaver, you create CSS rules from within the CSS panel. The CSS panel is made accessible by using the keyboard shortcut shift + F11 or by selecting the option from the Window menu. Open the CSS panel now using one of these options. Your CSS panel should look like that shown in Figure 1.

Figure 1. The CSS panel

Complete the following steps to create a class selector.

1. Click the third icon from the right. This is the New CSS Rule icon. The New CSS Rule dialog box opens.
2. Select the Class (can apply to any tag) option from the Selector Type: list.
3. In the Name combo box type .MyClass (don’t forget the leading period).
4. Ensure the This document only option is selected.
5. Click OK. The CSS Rule Definition dialog box opens.
6. Select Type in the Category list if it isn’t shown by default.
7. Click the Color cube.
8. Select a Green color.
9. Click OK.

Your CSS panel will now update to show your new class selector. It should look like Figure 2.

Figure 2. Your new class selector

You can of course add more properties and values to your class if you require them.

Applying a class selector

You have already learned that you need to apply a class to a particular element in order for the styles in your class to be shown. Dreamweaver makes this very easy.

Click inside your paragraph text and you will see the Dreamweaver quick tag selector update to show the body and p elements. You can see this in the bottom left corner of Figure 3.

Complete the following steps:

1. Right-click (Control-click on Macintosh) the p element in the quick tag selector. You will see a context menu appear.
2. Point to the Set Class option. You will see a flyout menu appear containing all classes in the style sheet.
3. Select the MyClass option.
4. The paragraph text will now change to green.

Figure 3. Applying your class selector

You can now switch to Code view to see exactly what has happened when the class was applied. Take a look at Listing 6.

<p class="MyClass">This text will be black because the p type selector defines it to be just that</p>

Listing 6. The p element with the MyClass class applied to it

In Listing 6 you can see that just like in the earlier example I used, the class has been applied to the opening tag of the element. In this case it is the p tag rather than the span tag though the results are the same in that the values of the class selector are now shown in your web page.

Conclusion

In this tutorial you have discovered how you can create class selectors and then apply them to your work to alter the appearance of an element. Don't get class happy and start applying classes to all elements within your web page; that would be the wrong way to go about things. I will review the correct usage of the class selector in forthcoming tutorials, but first we will need to expand our knowledge of CSS a little further. See you next time!

Check out CSS design basics with Dreamweaver – Part 5: The ID selector next.

About the author