This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Class Selector
The easiest type of selector to understand and to create is the class selector. You create a class and then you can apply it to elements in the web page. When creating the class, you can define properties such as the font, font size, and font color. To create a class that modifies font attributes, follow these steps:
- Click the New CSS Rule button from the CSS Styles panel (shown in Figure 6.2).
- The New CSS Rule dialog box appears. Select the radio button beside Class (Can Apply to Any Tag).
- Enter a name for the style in the Name box at the top of the New CSS Rule dialog box. A class name must begin with a period. Dreamweaver enters the period for you if you forget to enter it.
- Select the radio button beside This Document Only in the Define In section, as shown in Figure 6.4. This places the style definition in the web page instead of in an external style sheet. We'll discuss external style sheets later this hour.
Figure 6.4 Begin defining a CSS style by selecting the type of style, giving it a name, and indicating where it will be stored.
- The CSS Rule Definition dialog box appears, as shown in Figure 6.5. The box opens with the Type category selected. In the Type category, select a font and font size from the appropriate drop-down menus. In addition, select a font color by using the color picker.
Figure 6.5 The CSS Rule Definition dialog box is where you set up the attributes of a style.
- Select OK to save the style.
)
)
){kind=link}
The CSS Styles panel lists the new class (make sure that the All button is selected at the top of the CSS Styles panel). The top portion of the panel shows the class selector you just created and the bottom displays its attributes. There are three different attribute display settings, shown in Figure 6.6. I prefer the Show Only Set Properties setting, as displayed in the figure, because it shows only the properties contained in the style instead of every possible property.
)
Figure 6.6 You can set the way the properties are displayed in the lower half of the CSS Styles panel.
Applying a Class Selector
You select a block of text to apply your style to by dragging the cursor across it. You can also select other objects on the web page and apply the style. All the text in the object will then appear as defined by the style. Apply the class to an object by first selecting the object and then selecting the class from the Style drop-down menu in the Property inspector, as shown in Figure 6.7. Notice that the style names display in their respective fonts and font styles in the Style drop-down menu.
)
Figure 6.7 Select an object and then apply a class by using the Style drop-down menu in the Property inspector.
Removing a Class Selector
If you accidentally apply a style to an object, you can easily remove it. If you simply selected a few words instead of an entire block of text, Dreamweaver added a new tag around the text. Tags wrapped around the text are necessary because Dreamweaver needs to apply the class attribute to a tag. Instead of selecting the text by dragging the cursor over it, it's better to use Dreamweaver's tag selector, shown in Figure 6.8. When you select the tag with the tag selector, Dreamweaver is smart enough to remove not only the class selector but also the extra tag that is now unnecessary.
)
Figure 6.8 The tag selector enables you to easily select and remove a class selector.
To remove a style from text, do the following:
- Select the object that has the unwanted style applied to it. Using the tag selector is highly recommended.
- Select None from the Style drop-down menu in the Property inspector.