Tag Style Editing in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

You can edit and fine tune tag styles (new CSS rules) you’ve created in Adobe Creative Suite 5 (Adobe CS5) Dreamweaver. Click the Edit Rule button below the Targeted Rule drop-down list to open the CSS Rule Definition dialog box. This dialog box opens by default to the Type category, where you can modify type related properties. Some common type properties you’ll see in this category are as follows:

  • Font family: Notice that you can apply a font family by using the Font drop-down list. This method is preferred for assigning a font family.

  • Font size: Enter a text size and then, with the Unit drop-down list to the right of the size, enter it in pixels, points, inches, centimeters, and other units of measurement. By specifying a size and unit of measurement here — 12 pixels, for example — you can ensure that the text appears as relatively the same size on both the Windows and Macintosh platforms.

  • Line height: By assigning a size in any unit, you can define the space between lines of text. For example, if the type size is 12, the line height of 24 pixels is essentially the same as double spacing. If you come from the typesetting or design world, it works much like leading.

    Further fine-tune your tag style by modifying properties in the Property Inspector.
    Further fine-tune your tag style by modifying properties in the Property Inspector.
  • Font decoration: Hmm, if you want it, get it here! Blinking isn’t a good idea: It’s just plain B-A-D and also not compatible on all browsers. Try to use underlines to make key text stand out, or use underlines to create a line underneath paragraph or page headers.

    Don’t like underlines under links? Create a tag style for the <a> tag (this HTML tag is the one used to create a link) and select None in the Decoration drop-down list.

  • Font-Weight: Make text lighter or heavier with this drop-down list. Just so you know, a value of 700 is the typical boldness of bold text; any heavier is bolder than bold.

  • Font-Variant: Use this drop-down list to choose small caps.

    You may be wondering why Normal is a choice in the Style drop-down list. By creating a style defined in the document only with Normal selected in variant, you can override the style (small caps) definition on the external style sheet.

  • Font transform: Choose from Capitalize, Uppercase, Lowercase, or None.

  • Color: Assign a color to your selector by clicking the arrow in the lower right corner of the Color definition swatch or type a number in the Color text box.