Designing with CSS – Part 4: Styling headers and main content

Note: This tutorial was written for Dreamweaver CS3. Although Dreamweaver CS4 adds new CSS functionality (revised Property inspector, Code inspector, related files), the CSS panel in Dreamweaver CS4 has not changed, and you should still be able to follow this tutorial using Dreamweaver CS4.

This is the fourth part of a six-part tutorial series on CSS design concepts. If you missed any of the previous sections, it may be helpful for you to review them to become familiar with the concepts previously discussed before beginning this part:

• Part 1: Understanding CSS design concepts
• Part 2: Defining style properties and working with floats
• Part 3: Using CSS Positioning for site layout

In Part 3, we analyzed the page layout design to see how it is constructed with div elements to wrap the outer "container" and create a sidebar area. We discovered how different elements within the design work together to ensure that the design remains readable and can be resized by the user as desired.

This part of the tutorial series covers the next phase in our project—styling the header and main content areas using the features available in Dreamweaver CS3.

Controlling the look of the header content

In this article, we’ll create an image for the header area of the page and we’ll blend the color to match the background color of the header div element. As we look at the work we’ve done so far, one very important part of the website is missing—a navigation system. We’ll address that shortly. First, we’ll create the header image. Download the sample files that are provide at the beginning of this tutorial, if you haven’t already. Uncompress the ZIP file, and then open the bmwHeader image in Fireworks CS3, (see Figure 1).

First, we’ll increase the canvas size to the right of the image; this is the area we will fade out, using the fade image command.

• Play the demo: Fading the header image

Here are the steps reviewed in the demo:

1. Launch Fireworks and open the image file bmwHeader.jpg.
2. Select Modify > Canvas Size.
3. In the Canvas Size dialog box, select the center left square to indicate that the added width will expand the canvas to the left side of the image.
4. In the width field, enter 320 and check that the measurement is set to pixels.
5. Click OK.
6. Select Modify > Canvas color and select the Custom color option.
7. Click the color picker to access the eyedropper tool. Choose a blue color from the car image. In the demo, the hexadecimal value used is: #4467A7
8. Click OK.
9. Select Commands > Creative > Fade Image
10. In the Fade Image dialog box, select the left to right fade, in the second left top row.
11. Use the gradient bar to adjust the fade until it looks smooth
12. Save the image file: bmwHeader.jpg.
13. Select File > Image Preview
14. Specify optimization settings, as desired. Click Export.
15. Save the image, overriding the existing image in the sample files folder.

At this point, the image file is ready to be displayed in the header area.

Setting the image and changing the header’s background color

Launch Dreamweaver and open index.html (the file we’ve been working with) or alternately download the sample files and use the provided index page. Set the Document window to the Design view, if it is not already.

• Play the demo: Modifying the header

Here are the steps reviewed in the demo:

1. Place the cursor inside the header text.
2. In the Quick Tag Selector, click h1 to select the header.
3. When selected, the header will be highlighted.
4. Press the Delete key to remove the header text.
5. From the Insert bar, select the Image button.
6. In the Insert Image dialog box, navigate to select the header image: bmwHeader.jpg.
7. In the Image Tag Accessibility dialog box, add the alt text for the header image.
8. Click OK
9. The image is now inserted in the header area of the page.
10. The gap to the left of the image is caused by the padding values set on the header.
11. Open the CSS Styles panel and click the All button at the top.
12. Select the .twoColElsLHdr rule for the header, and then expand the Box property.
13. Select the padding property and click the Delete CSS Style button.
14. In the Document window, click in the Design view to refresh the page content.
15. The header image moves to the left and the extra space disappears.
16. In the CSS Styles panel, select the Background property.
17. Click the color chip to select a background color
18. From the color swatches, choose a blue canvas color
19. After making this selection, the header div displays as blue
20. In the CSS Styles panel, expand the Border property
21. Add a bottom border to the header div by selecting the bottom border color using the color cube. Select black.
22. In the drop-down menu for the bottom border, choose the solid option.
23. In the drop-down menu for the bottom border width, select the thin option.
24. Click on index.htm in Design view to refresh the page content.
25. The header div element displays the bottom border based on the applied settings, (see Figure 2).
26. Save the CSS file.
27. Choose File > Preview in Browser to review your work.

The new CSS layout templates provided with Dreamweaver CS3 are very useful, and will save you valuable time. Use the layouts to start from scratch as you build new projects, or analyze the code to better understand how CSS can be used to control and improve the look and feel of your page designs.

Styling the main content

The header looks great as it fades into the background; so let’s proceed to the next step—styling the main content. In the next part of this tutorial series, we’ll focus on the sidebar element content and adding the navigation bar. For the upcoming exercise, we’ll concentrate on the main content area. We’ll take a look at how we can improve the color palette, and we’ll also see how we adjust the spacing to make the content look better.

• Play the demo: Adjusting the main content with CSS styling

Here are the steps reviewed in the demo:

1. Launch Dreamweaver and open index.html. Set the Document window to Design view, if it is not already.
2. In the CSS Styles panel, click the All button to see all styles.
3. Select the CSS rule for the mainContent element in .twoColElsLtHdr for #container.
4. Expand the Box property and select the top margin property.
5. In the drop-down menu next to width, enter: 1.
6. As the unit of measurement, select ems
7. Select the Font property and use the eyedropper tool to select a dark gray / blue color. In the demo, the hexadecimal value used is: #393B4A.
8. Scroll down to the h2 level heading
9. Select the CSS rule for the mainContent #container in .twoColElsLtHdr
10. Expand the Font property, and use the color picker to get the eyedropper tool.
11. Select a color from the h1 title.
12. Select the P rule listed in the CSS Styles panel
13. Expand the Font property and click the color cube to access the eyedropper tool. Select a color from the h1 color.
14. Adjust the color to display P elements, to make them lighter
15. By lightening the P element color, you ensure that the headings are always darker than the main content text.
16. Save the CSS file.

We’ve now completed the styling for the header and the main content area.

In part five of this series we’ll create a navigation bar in the left side area. We’ll also find out how easy it is to manipulate a CSS layout when a site client is fond of last minute changes.

Where to go from here

After exploring with setting different font colors and background colors for main content areas, try adding borders with various settings to the elements within your page. Once you are comfortable with the steps covered here, continue onward with part five of this tutorial series.