Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

An Overview of CSS in Dreamweaver MX 2004 – Forcing Dreamweaver to Add the Class to an Existing Tag

Forcing Dreamweaver to Add the Class to an Existing Tag

Since you applied the highlight class to pieces of text rather than to a block element, Dreamweaver has no choice but to add the <span> tag to your code to hold the class designation. Using this methodology efficiently requires that you understand when to apply the class styles to block elements instead of creating a new tag for holding it. The following example shows how you can force Dreamweaver to add the class to an existing tag.

  1. Click within the last line of text on the page (the one that reads Some things may need…).
  2. In the tag selector at the bottom left corner of the design window, select the entire paragraph tag by clicking the <p>.
  3. In the color text box in the Property inspector, type: #333300. Note that in the design window, the two words colored with the highlight class are still the brighter green, but the remainder of that line of text is now a dark, dull green.
  4. Switch to Code view and note that instead of adding yet another span tag, Dreamweaver has added a class attribute with the value of Style1 to the existing paragraph tag, <p class=”Style1″>.
  5. Switch to Design view and choose Rename Style from the Style pop-up menu.
  6. In the Rename Style dialog box, choose Style1 if not already selected and type: dullndark.
  7. In the table, click in the middle cell in the second row.
  8. In the tag selector in the bottom left corner, click the table data tag (<td>). This selects the entire TD tag in the code.
  9. With the table cell selected, choose dullndark from the Style pop-up menu. This adds the dullndark class to the table cell tag, and will affect any text contained within that table cell.