Dreamweaver CS6: The Missing Manual

Add Style with Cascading Style Sheets

HTML used to be the only language you needed to create web pages. You could build them with colorful text and graphics, and make words jump out using different fonts, font sizes, and font colors. But today, you can’t add much visual stimulation to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text. For example, it provides site-wide design consistency for headings and subheads, creates unique-looking sidebars, and adds special graphics treatment for quotations.

From now on, think of HTML as merely the scaffolding you use to organize a page. It helps identify and structure page elements. Tags like <h1> and <h2> denote headlines and reflect their relative importance: A Heading 1 is more important than a Heading 2, for example (and can affect how a search engine like Google adds a page to its search listings). The <p> tag indicates a basic paragraph of information. Other tags provide further structural clues: For example, a <ul> tag identifies a bulleted list (to, say, make a list of recipe ingredients more intelligible).

Cascading Style Sheets, on the other hand, add design flair to that highly structured content, making it more beautiful and easier to read. Take a look at the CSS Zen Garden site (www.csszengarden.com). Each of the striking, very different websites profiled there use the same underlying HTML. The only difference among them—and the sole reason they look so different—is ...