HTML and CSS Reference
In-Depth Information
key css concePTs
To represent CSS rules consistently, browsers follow a set of implementation guidelines that adhere
to three main principles in CSS
➤
cascading
➤
inheritance
➤
specificity➤➤
The cascading Principle
The “cascading” in cascading style sheets refers to the idea that, given two identical CSS rules, the
one closest to the targeted element wins. For example, say you have the following two rules, one
after the other:
h1 { color: red; }
h1 { color: blue; }
In this situation, the second rule — with the declaration that the color should be blue — would take
effect and the heading would be blue. As you learn later in this lesson, CSS rules can be located in one of
three places: an external style sheet, embedded in the
<head>
of a document, or inline with the affected
tag. The cascade concept dictates that in any CSS rule conflict, an embedded rule would best one in an
external style sheet and an inline rule would beat them both.
The inheritance Principle
You've seen how much of HTML is based on the principle of nested tags, where, for example, all
content is within the
<body>
tag. CSS rules defined to target outer or
parent
tags also affect inner
or
child
tags, thanks to the principle of inheritance. For instance, this rule, which uses the
<body>
tag as the selector, also sets the font-family property for every other text element on the page unless
otherwise specified:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Many style sheets start with a series of so-called reset statements that rely on the inheritance principle
to establish a baseline of values for a wide spectrum of tags.
As you learn later in this lesson, CSS declarations can be applied to more than just tags. You can also
create custom selectors, called classes and IDs. You've seen what happens when two rules with identical
selectors conflict — thanks to the cascading principle, the one closest to the actual tag overcomes the
other — but what happens when two rules with different selectors affect the same tag? For example,
say you have one rule that sets the color of
<h1>
tags to red, like this:
h1 { color: red; }
