Chapter 3: Styling Basics

So far we’ve learned some basic HTML constructs: paragraphs, headings, and lists. That’s all very nice, but by themselves, these elements are kind of lifeless. An h1 is just like any other h1 out there… right?

Fortunately, no. We can customize the appearance of our h1s (and any other element) using a language called Cascading Style Sheets (CSS). We already saw a hint of what style sheets can do when we were mucking around with the foreground color and background color. But CSS can do much more than this.

As an example of what CSS can do, take a walk through the CSS Zen Garden. Each page in the CSS Zen Garden has exactly the same text and markup. The only difference is the CSS, but each page appears radically different.

First, we’re going to learn a new method for applying styles that is much more efficient than what we’ve been doing in the previous chapters. At first, we’ll only be changing the color, because color is simple and gets the point across. But by the end of this chapter, you’ll have expanded your style vocabulary dramatically.

When you’re done with this section, you should be able to:

• Create a style sheet for your web page or for your entire web site.

• Create named, reusable styles using classes and IDs.

• Apply sophisticated font changes to any HTML element.

• Change the padding, margins, and borders.

• Align and indent your text.

Section Summaries

The Styling Basics chapter contains these sections:

1. The style Attribute — Describes the basic problem that style sheets are designed to solve.

2. Style Sheets — Describes style sheets, which provide a convenient method for collecting styling rules in one place and applying them to an entire website. We’ll cover CSS rule syntax and the basics of cascading.

3. Classes and IDs — Explains how to create more specialized CSS rules by using CSS classes and IDs.

4. Div and Span — Describes the “generic” HTML elements div and span, which provide a way to apply styles to any given swath of HTML.

5. Font Control —Provides more sophisticated methods for controlling a document’s font. We examine how to change the font family, font size, and font styling. We’ll also take a look at a stylesheet that is a bit more complex than the ones we’ve seen in earlier sections.

6. Borders — Explains how to set border properties such as color and thickness, how to set different borders on all four sides, and how to use border shorthand notation.

7. Margins and Padding — Describes padding (extra space inside an element’s border) and margins (extra space outside an element’s border).

8. Align and Indent — Describes text indentation and alignment. We’ll learn how to create hanging indents and align text horizontally. (Aligning blocks will come later, in the sections on positioning.)