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
h1 is just like any other
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
foreground color and
background color. But CSS can do much more than this.
As an example of what CSS can do, take a look at CSS Portal.
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.
The Styling Basics chapter contains these sections:
Describes the basic problem that style sheets are designed to solve.
- 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.
- Classes and IDs
Explains how to create more specialized CSS rules by using CSS classes and IDs.
- Div and Span
Describes the “generic” HTML elements
span, which provide a way to apply styles to any given swath of HTML.
- 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.
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.
- Margins and Padding
Describes padding (extra space inside an element’s border) and margins (extra space outside an element’s border).
- 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.)