Styling Copy and Content | CSS, DHTML, and Ajax, Fourth Edition

The copy and content on your Web page is generally the reason a person will visit your page, and you should take great care to make it as attractive and easy to read as possible.

In our final example using the HTML shown in Code 21.2, we will be adding a few simple styles to clean up the layout of the content on the page and improve the readability of the text (Figure 21.7).

Figure 21.7. Our final design, with the copy and other content on the page nicely styled.

To add styles to copy and content:

#content .copy { }

Add the .copy class selector to your default.css file (Code 21.7). You can set any global style you want applied to all text in that block, but I generally find it better to apply these styles directly to the  tag, as shown in Step 2.

Code 21.7. default.css Add this code to style the content defined in Code 21.2.

#content .copy {      margin-top: 24px; } #content .copy p {      font-size: smaller;      line-height: 1.5;      margin: 0px;      text-indent: 2em; } .dropBox p {      margin: 0px;      padding: 0px;      width: 175px;      font: x-large "Party Let", "Comic Sans MS", Helvetica, Arial, sans-serif; } #footer p {      color: white;      font-size: small;      text-align: center;      padding-top: 4px;      border-top: 2px solid #999; }

In this example, I use this rule to add some extra space between the text and the chapter title head.

#content .copy p {…}

Add a contextual selector to style the  element if it is within a parent using the .copy class in the #content layer. This styles all the paragraphs of text that are part of the copy in the content area of the page.

In this example, I wanted to space out the lines of text to make it easier to read and to give some breathing room to the link underlines.

#content .dropBox p {…}

You can also style content defined by other  tags on the page independently, as with the paragraphs in the .dropBox class and the #footer layer.

In this example, I'm limiting the width of the captionso that it won't force the drop box to be too wideand giving it a fun and funky font face.

Tip

You could also set a general style for the  element and specify typographic controls there that could then be modified by the particular rules shown in this section. However, we already set the default font for the <body> tag and everything we would add to the  tag would be redundant to those styles. In general, you don't want to repeat style declarations that have already been applied earlier in the style sheet.