This chapter is from the book
This chapter is from the book
This chapter is from the book
HTML vs. CSS formatting
When comparing HTML-based formatting to CSS-based formatting, it’s easy to see how CSS produces vast efficiencies in time and effort. In the following exercise, you’ll explore the power and efficacy of CSS by editing two webpages, one formatted by HTML and the other by CSS.
Launch Dreamweaver (2020 release) or later, if it’s not currently running.
Create a new site based on the lesson04 folder, using the instructions in the “Getting Started” section at the beginning of the book. Name the site lesson04.
Choose File > Open.
Navigate to the lesson04 folder, and open html-formatting.html.
Click the Split view button. If necessary, choose View > Split > Split Vertically to split Code and Live view windows vertically, side by side.
Note how each element of the content is formatted individually using the deprecated <font> tag and the attribute color="blue" in each <h1> and <p> element.
Replace the word "blue" with "green" in each <h1> element in which it appears. If necessary, click the mouse cursor in the Live view window to update the display.
The <h1> elements display in green now in each line where you changed the color value. As you can see, formatting using the obsolete <font> tag is not only slow but also prone to error. Make a mistake, like typing greeen or geen, and the browser will ignore the color formatting entirely.
Open css-formatting.html from the lesson04 folder.
If it’s not currently selected, click the Split view button.
The content of the file is identical to the previous document, except that it’s formatted using CSS. The code that formats the HTML elements appears in the <head> section of this file. Note that the code contains only two color:blue; attributes.
In the property for the h1 rule color: blue; select the value blue and type green to replace it. If necessary, click in the Live view window to update the display.
In Live view, all the heading elements display in green. The paragraph elements remain blue.
Select the value in the p rule color: blue; and type green to replace it. Click in the Live view window to update the display, if necessary.
In Live view, all the paragraph elements have changed to green.
Close all files and do not save the changes.
)
)
In this exercise, CSS accomplished the color change with two simple edits, whereas using the HTML <font> tag required you to edit every line individually. Now think how tedious it would be to go through thousands of lines of code and hundreds of pages on a site to make such a change. Is it any wonder that the W3C, the web standards organization that establishes internet specifications and protocols, deprecated the <font> tag and developed cascading style sheets? This exercise highlights just a small sample of the formatting power and productivity enhancements offered by CSS, unmatched by HTML alone.