HTML and CSS Reference
In-Depth Information
Defi ning a Style Rule
In every version of CSS, you apply a
style rule
containing a list of style properties to an
element or a group of elements known as a selector. The general syntax of a CSS style
rule is
selector
{
property1
:
value1
;
property2
:
value2
;
property3
:
value3
;
...
}
where
selector
identifi es an element or a group of elements within the document and
the
property: value
pairs specify the style properties and their values. For example,
to display the text of all
h1
headings in blue and centered horizontally on the page, you
could use the following style rule:
h1 {
color: blue;
text-align: center;
}
To apply these style properties to more than one element, you specify the elements in
a comma-separated list. The following style rule causes all
h1
through
h6
headings to be
displayed in blue and centered on the page:
h1, h2, h3, h4, h5, h6 {
color: blue;
text-align: center;
}
Like HTML, CSS ignores the use of white space, so you can also enter your styles on a
single line, as in the following example:
h1 {color: blue; text-align: center;}
Writing a style rule on a single line saves space, but entering each style property
on a separate line often makes your code easier to read and edit. You will see both
approaches used in the CSS fi les you encounter on the Web.
Applying a Style Sheet
The design you apply to a Web site is usually a combination of several style sheets. In
general, the style sheet that is loaded last has precedence over style sheets loaded earlier.
Figure 3-4 summarizes the different types of style sheets in the order they are usually
installed and processed by browsers.
You can make your style
sheets easier to manage by
entering the style names in
alphabetical order.
