HTML and CSS Reference
Assume this is applied to the following HTML (a simplified version of index.html):
<div id=”main” class=”group”>
<p>Nulla facilisi. Ut porttitor sollicitudin nisi, tempus pulvinar nisl
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
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
The universal selector is represented by an asterisk ( * ) and selects every element that makes up a web page:
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.