Quick Start Guide
102 Tutorial: Formatting Your Page with CSS
For more information about CSS, proceed to the next section. To start
creating CSS right away, proceed to “Create a new style sheet”
on page 104.
Learn about CSS
Cascading Style Sheets (CSS) are a collection of formatting rules that
control the appearance of content on a web page. When you use CSS to
format a page, you separate content from presentation. The content of
your page—the HTML code—resides in the HTML file itself, while the
CSS rules that define the presentation of the code reside in another file (an
external style sheet) or in another part of the HTML document (usually
the
<head> section). With CSS you have flexibility and control over the
exact appearance of your page, from precise positioning of layout to
specific fonts and styles.
CSS lets you control many properties that cannot be controlled with
HTML alone. For example, you can specify different font sizes and units
(pixels, points, and so on) for selected text. By using CSS to set font sizes in
pixels, you can also ensure a more consistent treatment of your page layout
and appearance in multiple browsers.
A CSS formatting rule consists of two parts—the selector and the
declaration. The selector is a term (such as
P, H1, a class name, or an id)
that identifies the formatted element, and the declaration defines what the
style elements are. In the following example,
H1 is the selector, and
everything that falls between the braces (
{}) is the declaration:
H1 {
font-size: 16 pixels;
font-family: Helvetica;
font-weight: bold;
}
The declaration consists of two parts, the property (such as font-family),
and the value (such as
Helvetica). The preceding example creates a style
for
H1 tags: The text for all H1 tags linked to this style is 16 pixels in size,
and uses Helvetica font and bold.