HTML and CSS Reference
In-Depth Information
Assume this is applied to the following HTML (a simplified version of index.html):
<body>
<div id=”main” class=”group”>
<h1>Page Title</h1>
<p>Nulla facilisi. Ut porttitor sollicitudin nisi, tempus pulvinar nisl
volutpat aliquet.</p>
</div>
</body>
Although the
<body>
element doesn't contain any text itself, the text within
<h1>
and
<p>
will still have the blue
color applied to them. This is because the
color
property is inherited. From Chapter 5 onward,
CSS3 Foundations
explains properties in greater depth and points out whether each is inherited.
What is meant by inherited, though? Because
<body>
in the HTML example contains the
<h1>
and
<p>
elements,
they are known as the
descendants
of
<body>
. An inherited property is one that is passed down and applied to des-
cendant elements, unless that element overrides it with a property of its own.
Descendants can also be referred to as
children
, but only when an element is the direct descendant of another. For
example: the
<h1>
and
<p>
elements are descendants of
<body>
and children of
<div id=”main”
class=”group”>
. Likewise,
<div id=”main” class=”group”>
is a child of
<body>
.
An element that contains other elements may be called the
parent
, and two elements at the same level (such as the
<h1>
and
<p>
in the example) are called
siblings
.
More advanced selectors allow you to select an element based on its relationship with others, which you will see
shortly.
Selectors
Selectors
are the conditions of a CSS rule set. The true power of selectors comes from their capability to be com-
bined, allowing you to create very specific conditions, applying styles only to the exact element or elements you
want.
Universal Selector
The
universal selector
is represented by an asterisk (
*
) and selects every element that makes up a web page:
* {
color: black;
}
In this example, every element is given a black text color. Note that this isn't a very effective method of applying this
style, though. Because styles are inherited, rather than apply a style to
every
element, you could apply it to a body se-
lector instead, which would give the exact same result, but a little quicker. Because each rule set is an action the
browser carries out to turn HTML and CSS into a beautiful page, this sort of consideration means a browser can
work faster and the user can see a page quicker. So, because it's not always the most efficient approach to styling
multiples elements, universal selectors tend to be used with a combination of other selectors to make them apply
only to specific elements rather than all of them. More on combining selectors shortly.
