Adding a Custom Class

---

Sometimes it isn't practical to redefine a specific selector to set up a style. Remember, properties set for a selector apply every time that selector is used in the page. When you want to use a style selectively and independently of a selector, define a custom class and apply it as needed. To build a custom class in Dreamweaver, add a new style and choose the Make Custom Style (Class) option. Always begin the name of the class with a period. You cannot use spaces or special characters in the name, not even an underscore.

On the CD-ROM 

Save the Habitat Alert36 folder from the chapter36_exercise folder to your hard drive. Define a new site. Hint: If you already have another Habitat Alert site defined, then choose the Edit Site option in the Site panel of the Site Definition drop-down menu and change the path to the Local Root folder.

 Habitat Alert site   In this section, you use the project site to build a custom class that sets the background element in the circle area of the page. Currently this page sets that element using the cell's background image property. The downfall of using HTML to set background image is that steps must be taken with the image to prevent unwanted tiling. In the case of the circle's background image, thousands of white pixels were added to the bottom of the image so that it would not repeat vertically. This results in a larger-than-necessary image. With CSS, you can avoid this trick and build the image without the extra white space at the bottom, and use no-repeat in the style. Follow these steps:

1. Still working in the home page (site/index.htm), place your cursor in the cell containing the circle image. Select the <td> using the Tag selector, and remove the value found in its Bg image field.

2. Add a new style and choose Make Custom Style (Class). Name this new style .circlebg. Be sure that you select Define In This Document Only. Remember, you are setting the URL for the background-image property.

   Tip 

   If the This Document Only isn't available, cancel and select  index.htm in the CSS Styles panel, and add the new style.

3. Click the Background category and set the cell's background color to #FFFFFF (white). Then navigate to the sharedimages/backgrounds folder and locate circlebtm_plus.gif.

4. Choose no-repeat from the Repeat menu. Click OK.

5. You need to apply the circlebg style to the cell. Right-click the <td> tag and choose Set Class circlebg.

6. Save your page and preview it. Keep this page open for additional style exercises.

---