HTML and CSS Reference
In-Depth Information
CSS Fundamentals
CSS can add style to your pages, enhancing and improving the presentation of your content. HTML
supplies the structure—each element designates a different portion of content, and attributes pass along
more information about those elements. CSS acts as another layer to influence the presentation of those
HTML elements. Colors, fonts, text sizes, borders, backgrounds, and the arrangement of elements on the
page are all presentational aspects of your content, and you can control them all through artful application
of CSS.
Anatomy of a CSS Rule
If elements are the building blocks of markup, the building block of CSS is the
rule
. It's a set of instructions
that a browser can follow to alter the appearance of HTML elements based on the presentational values
you supply. A
style sheet
is a collection of rules gathered together in a particular order, telling the browser
to “find this element and make it look like this, then find this other element and make it look like this” and
so on, until you've described every element you want to style.
A CSS rule consists of a few component parts, diagrammed in Figure 2-2.
Figure 2-2.
The components of a rule in CSS
The
selector
is the part of the rule that targets an element for styling. Its scope can be very broad, affecting
every instance of a particular element, or very narrow and specific, affecting only a few elements or even
just one. We'll cover some of the different kinds of selectors in the next section of this chapter.
A
declaration
comprises two more parts: a
property
and a
value
. The property is that aspect of an
element's presentation that is changing, such as its color, its width, or its placement on the page. Dozens
of properties are available in the CSS language, and you'll become familiar with many of them in the
following chapters. The property's value delivers the specific style that should be applied to the selected
element. The accepted values depend on the particular property, and some properties accept multiple
values.
Declarations reside in a set of curly braces (
{
and
}
), and multiple declarations can apply to the same
selector, modifying several aspects of an element's presentation in the course of a single rule. A property
and its value are separated by a colon (
:
) and the declaration ends with a semicolon (
;
). That semicolon is
important to separate multiple declarations, but if there's only one declaration in the rule or if it's the last
