How to Edit the Styles in a CSS Layout in Dreamweaver - dummies

How to Edit the Styles in a CSS Layout in Dreamweaver

By Janine Warner

After you create a new page with a CSS layout in Dreamweaver, you have a seemingly infinite number of options for editing it, but first you have to determine which styles in the style sheet correspond to the elements you want to edit.

As you can probably imagine, you can edit the styles in a CSS layout in many ways to create your own designs.

After you adjust the existing styles to get the basic page design the way you want it, you can create as many additional styles as you desire.

How to check out the available styles and make basic edits

You can use these same basic instructions with any CSS layout included in Dreamweaver. To edit styles in a CSS layout, follow these steps:

  1. Open a page file that’s based in a Dreamweaver CSS layout, and choose Window→CSS Styles (or click the CSS Designer tab to expand the panel).

    The CSS Designer panel opens or expands.

  2. Click to select the name of the style sheet in the Sources panel at the top of CSS Designer.

    All the styles associated with the new page are listed in the Selectors panel.


  3. Select the name of any style listed in the CSS Designer Selectors panel.

    The corresponding CSS rules defined for the style are displayed in the Properties panel, at the bottom of the CSS Designer panel. Clicking through the list of styles and reviewing their corresponding rules is a good way to get a quick overview of the design and to see where the various page-formatting options are stored.

The HTML5 header, .nav, and footer tags control the main sections of the page. For example, the header style includes a rule that makes the background color green. Thus, to change the color of the header area at the top of the page, you change the background color setting in the header rule.

How to edit page-wide settings

To edit page-wide settings — such as the background color of the page or the main font face, size, and color of the text used throughout the page — follow these steps:

  1. In the CSS Designer Selectors panel, select the style named body.

    The properties defined in the selected style rule are displayed in the Properties panel.


  2. Click the T icon at the top of the Properties panel, and change or add your desired font and other text settings.

    You can change the font face, size, style, and weight. To change the space between lines of text, change the line height.

  3. Scroll down to the Background area of the Properties panel and use the color well in the Background-Color field to specify a color for the entire background of the page.

    Alternatively, you can enter any hexadecimal color code in the Background-Color field or use the eyedropper to sample any color. To add a background image, click in the URL field in the Background section and then click the Browse button that appears and select the image that you want to serve as the background. Use the Background-Repeat icons to specify how the background image should repeat on the page.

  4. Make any other changes or additions to the style rule.

Changes to style rules in the Properties panel are automatically saved and applied to content formatted with the rule.

How to customize content areas

To change the width or other settings of the main content areas, which control the overall size of the page and the header, footer, and sidebar, follow these steps:

  1. To change the width of the entire main design area:

    1. Click the .container style in the Selectors panel of the CSS Designer panel.

      The properties of the .container style rule are displayed in the Properties panel, where you can also edit the style.

    2. Change the size in the Width field or type a new number for your desired page width.

      The width of the page design is automatically changed based on the size you entered. When you alter the width of the .container style, you change the width of the entire design because all the <div> tags and other elements are contained in the <div> formatted with the .container style — and they’re all set to expand to fill the .container <div>.

  2. To alter the size of the content area of the page, select the style named .content and specify the size and other options you desire in the Properties panel.

    If you change the width of the content area in a layout that includes a sidebar, you must change the width of the sidebar as well.

  3. To change the background color of any style on the page, click the name of the corresponding style and change the settings in the Background section of the Properties panel.

    For example, in the CSS layouts in Dreamweaver, the sidebar is defined in a style named .sidebar1. Thus, to change the background color, you would click .sidebar1 in the Selectors panel, select the Background category in the Properties panel, and select the color you want. Similarly, to change the background color of the header, select the style named header in the Selectors panel and use the color well.


  4. To add an image to the header:

    1. Select the placeholder image labeled Insert Logo and press the Delete or Backspace key.

    2. Choose Insert →Image→Image and select an image using the Select Image Source dialog box.

  5. Replace text and insert images in the sidebar and main content areas.

    You can add or replace text and insert images in any page created from a CSS layout, just as you would in any other web page.

  6. Choose File→Save All to save the page and styles.