• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Project 6. Translating a Fireworks Layou... > Styling Individual Objects with Cust...

Styling Individual Objects with Custom Classes

Up to now, you’ve been using CSS Selectors to style individual objects on the page. In this next section, you’ll see how custom classes can be used to provide styling to elements on an as-needed basis. In particular, you’ll be setting the styles that will be applied to the nested tables that you inserted in the last section.

Click the New CSS Style button, and choose Class. Make sure that the pbr_style.css file is still selected as the destination to save the new style. Name the style .rightHeader, and click OK.

In the Style Definition dialog, choose the Type category and set Font Size to 0.8 ems. Set the color of the text to #FF9966, and the Style to Italic. Switch to the Block category, and set the Text Align property to Center. Click OK to close the Style Definition dialog and return to the page.


You’ll recall that 1em is equal in value to the size of the font element in use. Because this design calls for proportional spacing of fonts based on the viewer’s settings, a value of 0.8em will show a font at 80% of its standard size.

To apply the new style, click on the text at the top of the right column (Current Weather), and then click the Style list in the Property inspector and choose rightHeader from the list. The style is added to the first block-level element that Dreamweaver finds—in this case, the <td> tag.

Repeat the process for the remaining table headings, using the same custom class for each. As you do so, the text will be transformed to match your Fireworks design.

Create a new style in the same manner, and set it as a custom class. Name the class .rightBody, and set the Type Size to 0.7em and the color to black (#000000).

Add some dummy text in the second row of the three tables. (Don’t forget Karaoke night!) Assign the class to the three table cells as you did in step 5.

Save your work.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint