Formatting the Page with CSS

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 preformatted style. How this works in this project is that every paragraph is marked up with the HTML

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.
Click anywhere in the first paragraph (Dante Unit Contents), click the

in the tag selector, and click heading1 in the CSS panel.
You now have the actual, rather than the dummy, page title.

Click anywhere in the Page Title line, select the

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.
Select the second paragraph (Readings), click the

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

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 in the tag selector, or, in the case of a hyperlink