How to Use the Text Panel in Dreamweaver’s CSS Property Panel

By Janine Warner

The Dreamweaver Text panel features a collection of options that control the display of the text in your pages. You can access the Text panel options by scrolling down the Property panel until you get below the Layout options, or by clicking the T icon at the top of the panel.


The Text panel includes the following formatting options:

  • Color: Set the text color. You can click the color well and choose a color, use the eyedropper to sample any color on the screen, or enter a hexadecimal color code in the color field. If you enter a hexadecimal color code, include the beginning pound sign (#).

  • Font-Family: Define a font family or a series of families. You can add fonts from your local hard drive or from Adobe TypeKit by choosing Manage Fonts in the bottom of the drop-down list and launching the Manage Fonts dialog box.


  • Font-Style: Enter Normal, Italic, or Oblique. However, italic and oblique are rarely different in a web browser, so stick with italic unless you have a specific reason not to.

  • Font-Variant: Change text to small caps. Test your designs carefully because this attribute is not supported by all browsers.

  • Font-Weight: Make text appear bold by selecting Bold or Bolder from the drop-down list. You can also enter a number between 100 and 900 to more precisely control how bold the text appears. To remove bold formatting, choose Normal or Lighter.

  • Font-Size: Define the size of the text. You can choose a specific numeric size or a relative size. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. Pixels, ems, and percentages are the most commonly used options for text sizes.

  • Line-Height: Specify the height of the line on which the text is placed. Much like text size, you can specify line height in a variety of ways, including pixels, ems, and percentages. It is good practice on the web to add line height because increasing space around your text makes it easier to read on a computer screen.

  • Text-Align: Left align, right align, center, or justify your text by clicking the corresponding icon. The first icon, for Inherit, is the default. For example, you could center the text in the footer of your web page by including Text-Align set to Center in the definition of a style you apply to the <div> tag at the bottom of the page.

  • Text-Decoration: Specify whether text is underlined, overlined, displayed with a strikethrough, or displayed with the blink effect. You can also choose None, which is frequently used to remove the underline from linked text.

  • Text-Indent: Specify the amount that text will be indented from the left side of the page by entering a number in one of the size options, such as pixels, ems, or percentages.

Why so many fonts?

You may have heard that you can now use any font you want on your web pages, thanks to the latest version of Cascading Style Sheets, CSS3. This statement is true but with some limitations: You must have the legal right to publish the font, and the font must be hosted on a web server.

To help ensure that your text appears as you intend, Dreamweaver includes collections of the most common fonts on Windows and Macintosh computers. These fonts are grouped in families, such as

  • Gotham, Helvetica Nue, Helvetica, Arial, sans serif

  • Cambria, Hoefler Text, Liberation Serif, Times, Times New Roman, Times, and serif

You can create your own font collections using the Manage Fonts dialog box, which is accessible by selecting the Manage Fonts option at the bottom of the Font-Family drop-down list in the Text panel in the CSS Designer panel.

The Text-Shadow section of the Text panel

The Text-Shadow section of the Text panel provides tools for adding text shadows, one of the newest CSS properties included in the CSS3 definition. The most popular options are the following:

  • H-shadow: Add a shadow to your text on the horizontal axis. First choose a size option, and then enter a number in the field. For example, enter 2px, to add a horizontal shadow that is 2 pixels wide.

  • V-shadow: Add a shadow to your text on the vertical axis. First choose a size option, and then enter a number in the field.

  • Blur: Control the amount of blur in the shadow. The larger the number, the more the shadow is spread out, or blurred.

  • Color: Enter a hexadecimal color code to specify the color of the shadow, or use the eyedropper to sample any color on the screen.


The features at the bottom of the Text panel, which are not as common as the other Text panel options, are as follows:

  • Text-Transform: Change the case of your text. Options are Capitalize, Uppercase, and Lowercase. Click the corresponding icon to set this property.

  • Letter-Spacing: Defines the amount of white space inserted between letters. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch.

  • Word-Spacing: Defines the amount of white space inserted between words. Size options are pixel (px), point (pt), pica (pc), percent (%), em, rem, ex, and ch. (See the preceding sidebar “Comparing CSS size options.”)

  • White-Space: Tell the browser how to handle line breaks and spaces in a block of text. Your options are Inherit, Normal, Nowrap, Pre, Pre-line, or Pre-wrap. Nowrap is especially useful because it prevents elements from being separated if they must wrap to fit within a browser window or another container.

  • Vertical-Align: Align inline elements, such as text and images, in relation to the elements that surround them. You can set a numeric value or choose Baseline, Sub, Super, Top, Text-Top, Middle, Bottom, and Text-Bottom.