Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Design > Adobe Creative Suite

  • Print
  • + Share This
This chapter is from the book

Formatting the Page with CSS

In the first lesson, you applied a CSS style to a paragraph to format it. In this task, the productivity benefit of using CSS comes into its own. Once you know what to do, you can mark up the entire page in about a minute.

The key to a CSS's efficiency is that it separates the content from the presentation. Rather than selecting one paragraph and choosing the font and style, and then continuing on to the next paragraph, you simply click and instantly apply a pre-formatted style. How this works in this project is that every paragraph is marked up with the HTML <p> tag regardless of what it should eventually look like. As far as the HTML is concerned, all text looks the same. You then use the custom-made, descriptively named CSS styles to apply the desired formatting to each paragraph.

  1. Click anywhere in the first paragraph (Dante Unit Contents), click the <p> in the tag selector, and click heading1 in the CSS panel.

    Figure 5


  2. Click anywhere in the Page Title line, select the <p> in the tag selector, and press Delete to remove the whole line.

    You have the real page title now, so you don't need this placeholder anymore.

  3. Select the second paragraph (Readings), click the <p> in the tag selector, and select the heading2 style in the CSS panel.

    The page is divided into sections, which shows students the structure of the course. The first section is readings, the second is learning interactions, the third is quizzes, and the fourth is contact information. If this was a real course, each unit would probably have a similar structure.

    It is possible that clicking once in the line is sufficient—you may not need to select the <p> in the tag selector. However, clicking the appropriate tag in the tag selector before applying a CSS style is a good habit to form because in some cases (especially with hyperlinks), Dreamweaver has to guess which tag to apply the style to. In any event, you know you are safe if, after you have applied the style, you see <p.stylename> in the tag selector, or, in the case of a hyperlink, <a.stylename>.

    Figure 6


  4. Proceeding in this way (click in the paragraph, click the <p> in the tag selector, and then click the style in the CSS panel), apply styles to the remaining paragraphs as follows: Apply the bodytext style to paragraphs 3 to 6 ("For This Unit" through "Digital Dante"); apply the heading2 style to "Interactions"; apply the bodytext style to the Circlefinder paragraph; apply the heading2 style to "Quiz"; apply the bodytext style to the "Use this online" paragraph; apply heading2 to "Contact"; and finally, apply bodytext to "Email the instructor."

    Figure 7


  5. Drag-select the three readings paragraphs in the Readings section and click the bullet list icon in the Property inspector.

    It is easy to apply bullet lists. Dreamweaver converts each paragraph to its own bullet. If what should be two bullets are jammed into one, they were probably initially separated by a <br> tag, rather than a full <p> tag. No matter. To correct this problem, if it occurs, simply position the cursor between what ought to be two items and press Return/Enter.

    Figure 8


  6. With one or all of the bullet list items selected, click the <ul> tag in the tag selector. In the CSS panel, select bodytext to attach it to the entire list.

    The <ul> tag creates an unordered (or bullet) list. Each <li> tag represents a single bullet item in the list. When you initially created the list, no style was attached, and so the list items appeared in a different font than the rest of the paragraph text. By applying the bodytext style to the <ul> tag, all of the bullet items are formatted correctly.

  • + Share This
  • 🔖 Save To Your Account