Applying CSS from Screen to Print to Handheld – Part 4: Navigation and Main Content

Styling the Main Content Area

In this section you will look at styling and adding structured content to the center column—your content div. Using the correct elements for your markup is of paramount importance. Good semantic markup enables your XHTML document to have a meaningful structure that is not only structured in the visual sense but is also machine-readable by screen readers and other assistive technologies.

First, remove the height and background-color properties and values from the #content selector:

#content h1 {
    
    color: #577f1c;
    font-family: Georgia, "Times New Roman", Times, serif;
}

The selector for the content div is a descendant selector. By mapping the selector in this way, you are free to use h1 elements in other areas of your design without one area affecting another. For example, if you wanted to add h1 elements to the #rightcol div, you could write a selector like this:

#rightcol h1 {
Properties: values;
}

When you write rules as descendant selectors, you isolate one selector from another. In other words, despite both elements being h1 elements, none of the properties and values set in one would affect the other. This is the beauty of mapping your selectors in this manner—it provides structured organization.

To create your #content h1 selector, complete the following steps:

1. Open your health.css file.
2. Locate the #content selector.

3. Create a blank line below the closing } and then enter the following (pressing Enter after each line):

   #content h1 {
   
   color: #577f1c;
   font-family: Georgia, "Times New Roman", Times, serif;
4. Save your work.
5. Open health.html in Code view and create a blank line immediately below your opening #content div tag.

6. Type <h1>Welcome to Health & Spa</h1>

   Your content div should now look like the following code:

   <div id="content">
   <h1>Welcome to Health & Spa</h1>
   <!-- Close content -->
   </div>
   

Tip: Be sure to use & as the code for the ampersand instead of just &.

You now need to add some content to the page. However, first you must define how that content will appear in the browser. You'll do this by defining the #content p selector. You need to set margin values on your p elements.

You might recall that the first thing you did in your style sheet was to remove the default values. If you do not specifically set margins on the p elements, then your paragraphs will not have any spacing between them. Follow these steps:

• View the movie: Styling the Content Div p Element

1. Open your health.css style sheet.
2. Locate the #content h1 selector.

3. Enter a blank line below the closing } and type the following (pressing Enter after each line):

   #content p {
   
   }
4. Switch back to your health.html file.
5. Locate the closing tag of the h1 element and press Enter.
6. Switch to Design view.
7. Use the Lorem Ipsum extension (linked to under Requirements at the start of the article) to insert 500 characters.

8. Place your cursor close to the center of the generated text and press Enter. You now have two paragraphs. Note that you have no space between them (see Figure 1). This is due to your zeroing selector.

   

   Figure 1. Paragraphs with no padding or margins

9. Return to the #content p selector.
10. Type margin: 12px; and then save your CSS file.
11. Switch back to your health.html file.
12. Switch back to Design view. Your page should now resemble Figure 2.

Figure 2. Paragraphs with the added margin setting

Now repeat the steps above with the following changes:

• Create an h2 selector for the content div, make the font size 130%, and keep the same font and color that you set for the h1 element
• Add an h2 element to your health.html document immediately below the second paragraph
• Add two paragraphs below the newly created h2 element

Tip: You do not need to create a second p selector. The styles for your element will be picked up automatically from the existing selector you created in the previous section.

After you complete those changes, preview your page in Firefox. It should resemble Figure 3.

Figure 3. Did you get it right?

Next, you'll add a blockquote element to our document and set up a default link that you can use throughout the design.

Styling a blockquote Element

Follow these steps to add a blockquote element to your text:

• View the movie: Styling a Blockquote

1. Open your health.html file.
2. Switch to Code view.
3. Locate the end of the first paragraph below the h2 element.

4. Type the following:

   <blockquote>This is some quoted text. We are going to style this blockqoute and then we will apply a hover effect to it.</blockquote>

5. Open your health.css file and type the following below your existing style rules (pressing Enter after each line):

   blockquote {
   
   background-color: #EBF4E1;
   border: 1px solid #003300;
   padding: 6px;
   }
   blockquote:hover {
   border: 1px solid red;
   }
6. Save your work.

Your page should now look like Figure 4.

Figure 4. Blockquote now in place

The second selector you created enables the blockquote's border to change color when a user places the mouse cursor over the blockquote element (see Figure 5).

Figure 5. Border color changes on hover

Styling the Content of the #rightcol Div

With the main content area complete, you can now look at styling the content that resides in the #rightcol div.

The #rightcol div contains three basic elements: the h4 element for each sections title, the p element for holding the text information, and an a element to provide links to other pages where the information can be read in detail.

Using the knowledge you have gained in this tutorial, complete the following task:

1. Open the health.css file.
2. Locate the #rightcol selector and add a blank line below it.

3. Using a descendant selector, create an h4 selector that applies only to the #rightcol div and give it the following properties:

   Size: 80%
   Color: #960
   Single padding: 3 px

4. Using a descendant selector, create a p selector that applies only to the #rightcol div and give it the following properties:

   Size: 70%
   Left and right padding: 3 px
   Top padding: 0
   Bottom padding: 8 px
5. Locate the #rightcol selector.
6. Delete the height property and value.
7. Delete the background-color property and value.

Next, add the elements to your page and create the default link styles. Follow these steps:

• View the movie: Creating the rightcol Content

1. Open the file health.html in Code view.
2. Locate the end of the opening #rightcol div and then insert, with dummy content, the following elements: h4, p, h4, p.
3. Save your work.

4. Open the health.css file in Code view and add the following to the end of your CSS file:

   a {
   color: #CC0000;
   }

5. Insert a blank line and then type the following:

   a:hover, a:focus {
   color: #FF3333;
   text-decoration: none;
   }
6. Save your work.
7. Return to the health.html file and switch to Design view.
8. Select the last two words in each of the p elements below the h4 elements.
9. Type # into the Link Text box in the Property inspector.
10. Save your work.
11. Preview your work in Firefox.

That completes the styling of the #rightcol div content.

Styling the Content of the #footer Div

Place a copyright notice in the #footer div. For this task, you will create a selector for the p element within the footer. Follow these steps:

• View the movie: Styling the Footer Content

1. Open your health.css file and type the following:

   #footer p {
   
   color: #fff;
   padding: 8px;
   text-align: right;
   }
2. Save your work.
3. Switch to the health.html file in Code view.
4. Locate the opening #footer div tag and place your cursor at the end ot the tag.

5. Press Enter and type the following:

   <p>This site is copyright
6. Select the Text Menu tab.

7. Select the copyright icon and then type the following:

   of me!</p>
8. Save your work.

You have now completed Part 4 of this tutorial.

Where to Go from Here

In this part you have learned how to use descendant selectors to map CSS rules to specific areas of your document. You have seen how hover and focus techniques can be applied to elements and learned how to make CSS buttons and make them clickable.

In Part 5 of this series, you look at the CSS rules you have written so far and what you need to do to make it cross-browser compatible. You will look at conditional comments and learn how to use filters within your style sheets.

Applying CSS from Screen to Print to Handheld – Part 5: Cross-Browser Compatibility

Incidentally, in case you're wondering why you don't have style content within your XHTML document, the aim of CSS and XHTML is to separate content from style—and you have done just that.

Page 3 of 3

Previous Page