Adding Style with Cascading Style Sheets

HTML used to be the only language you needed to know. You could build pages with colorful text and graphics and make words jump out using different sizes, fonts, and colors. But today, you can’t add much visual sophistication to a site without CSS. CSS is a formatting language that lets you design pages with sophisticated layouts and enhanced text. (CSS can provide site-wide design consistency of headings and subheads, for example, create a unique-looking sidebar, and add a special graphics treatment for quotations, and so on.)

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>, <h2>, and <title> denote headlines and assign them 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 make a list of recipe ingredients more intelligible).

Cascading Style Sheets, on the other hand, add design flair to that highly structured HTML content, making it more beautiful and easier to read. Take a look at the CSS Zen Garden site, for example (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 in style and design—is that each uses a different style sheet. Essentially, a CSS style is just a rule that tells a browser how to display a particular element on a page—for example, to make an <h1> tag appear 36 pixels tall, in the Verdana font and the color orange.

But CSS is more powerful than that. You can use it to add borders, change margins, and even control the exact placement of an element on a page.

To be a successful web designer, you need to get to know Cascading Style Sheets. You’ll learn more about this exciting technology throughout this book. In fact, it’s so important for current web design that this edition of Dreamweaver: The Missing Manual includes a new chapter dedicated to troubleshooting CSS problems.

Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.