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 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—to make an <h1> tag appear orange, 36 pixels tall, and in the Verdana font, for example.

But CSS is more powerful than that. You 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.

Get Dreamweaver CS6: 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.