HTML and CSS Reference
In-Depth Information
font-family
isn't the only property that's inherited. Here are the rules
for the
<p>
and
<em>
elements:
p { color: blue; font-size: 1.4em; }
em { color: teal; }
The p element
is size 1.4em
and blue
The
<em>
element
is also size 1.4em.
the property
inherits from
the
<p>
rule.
But the
<em>
is teal. the
property for
<em>
overrides the inherited
value from
<p>
.
Inheritance means you don't have to write style rules for every element
in the document. Setting a font or a color on the
<body>
element usually
means that all text in the document will be that font and color. To style
specific elements, you need to learn how to write selectors; these will be
covered in the next section.
Selecting elements to style
You learned in the previous section that a
CSS
rule consists of a selec-
tor and a declaration. The declaration is the set of visual effects to be
applied, and the selector determines what elements will be styled by the
declaration. You saw some selectors in the previous section; they were
examples of type selectors, where the selector consists of the element
name and selects a type of element. But there are many other
CSS
selectors as well. In this section, you'll learn about
ID
and class selec-
tors; using combinators to join selectors together for greater specificity;
using pseudo-classes to select elements in particular states; and using
media queries to target devices such as printers or cell phones.
ID selectors
An
ID
selector chooses an element based on the
id
attribute. This attri-
bute should have a unique value in any given document, so an
ID
