How to Change Background and Text Colors in Dreamweaver

By Janine Warner

In Dreamweaver, you can change the background and the text colors available from the Appearance categories. Note that the CSS options are recommended over HTML options. When you use the Appearance (CSS) options, Dreamweaver creates corresponding styles for the body tag automatically. When you use any CSS options in the Page Properties dialog box, Dreamweaver creates corresponding styles automatically and lists them in the CSS Styles panel.

Although you can apply global settings, such as text size and color, in the Page Properties dialog box, you can override those settings with other formatting options in specific instances. For example, you could set all your text to Helvetica in Page Properties and then change the font for headlines to Arial using CSS.

To change the font settings, background color, text color, and page margins for an entire page, follow these steps:

  1. Choose Modify→Page Properties.

    The Appearance (CSS) category of the Page Properties dialog box appears.

  2. In the Page Font drop-down list, specify the fonts you want for the text on your page.

    In this example, the font face is set to the collection that begins with the Cambria font. If you don’t specify a font, your text appears in the font specified in your user’s browser, which is usually Times.

  3. If you want all the text on your page to appear bold or italic, choose the corresponding font options in the drop-down lists to the right of the Page Font options.

    If you select one of these options, all your text appears bold or italic in the page. Most designers leave these two fields blank because they want to limit the use of bold or italics to drawing special attention to a word or words.

  4. In the Size drop-down list, specify the font size you want for the text on your page.

    Again, you can override these settings for specific text on the page, such as headlines.

  5. Click the Text Color swatch box to reveal the color palette. Choose any color you like.

    The color you select fills the color swatch box but won’t change the text color on your page until you click the Apply or OK button.

  6. Click the Background Color swatch box to reveal the color palette. Choose any color you like.

    The color you select fills the color swatch box, but the color doesn’t fill the background until you click the Apply or OK button.

  7. If you want to insert a graphic or photograph into the background of your page, click the Browse button next to the Background Image box and select the image in the Select Image Source dialog box.

    When you insert a background image, it automatically repeats, or tiles, across and down the page unless you choose an option from the Repeat drop-down list. No-Repeat prevents the background image from repeating at all. Repeat-X and Repeat-Y repeat the image vertically (x axis) or horizontally (y axis), respectively, across the page.

  8. Use the margin options at the bottom of the dialog box to change the left, right, top, or bottom margins of your page.

    Most web browsers add a little space to the top and left sides of the browser window around any web page. Entering 0 in all four of these fields removes any default margin space, enabling you to create designs that begin flush with the edge of a browser.

  9. Click the Apply button to see how the colors look on your page.

  10. Click OK to finish and close the Page Properties dialog box.