Creating a Custom Class

Redefining the style for a tag gives you considerable control, as HTML has a tag for nearly any type of text you need to format. And yet, there are times when you want to create a style rule for something that doesn't already have a logical tag as a label. You can do that with a class . You get to create a custom name for the style when you create a class.

To create a class:

1.	With a page open in Dreamweaver, click the New CSS Rule button in the CSS Styles panel. The New CSS Rule dialog appears ( Figure 5.16 ). Figure 5.16. A class selector name is preceded by a period when creating a new style.
2.	Set the Selector type to Class (can apply to any tag), and set the Name to a name of your own choosing, preceded by a period ( . ). This is your new class name.
3.	Click OK, and the CSS Rule definition dialog appears.
4.	When you've completed filling out the CSS Rule definition dialog, click OK to accept your changes.

Tips

• Pick a class name that will serve you over time. A name that describes a purpose rather than a particular property works best. For example, if you wanted to highlight certain vocabulary words in red, you could name a class either .red or . vocab . If you redesigned the site later and change the color scheme, the name . red might not make sense any longer, but . vocab would still have meaning.

Choosing Between Classes and IDs

You can identify a particular element on a page by assigning it a name. Named elements can then be targeted with CSS rules. The two available methods for assigning names in CSS are with classes and ids .

A class is reusable. Many different elements on a page can be assigned to the same class. For example, in a blog you might create a class style called blogentry and assign it over and over again to every blog entry. Or there might be several vocabulary words on a page assigned to the class vocab .

An id, on the other hand, can only be used once per page. Since ids are unique, they are used for all sorts of things in addition to CSS rules, such as JavaScripts and link destinations. IDs are very useful in CSS when assigned to divs. Giving a div a named id enables you to write CSS rules for a specific block of content with regard to its position, background, margins, and other properties.

In the CSS Styles panel, you see the names of any id or class style rules you add to your style sheet ( Figure 5.17 ). In the style sheet a hash or pound sign ( # ) precedes an id selector. A period ( . ) precedes a class selector.

Figure 5.17. A complete style sheet contains ids ( #navlist ), restyled tags ( TD ), classes (. small ), and pseudo-class selectors ( a:visited ).