property, which can only be sized using a <length> value or keywords thin, medium,
or thic k. Fortunately, all that info rmation is available in the CSS reference at the end
of this book. You simply look up the property you’re interested in, and you can also
read whether it a ccepts percentages and how they work fo r that spec ific property.
Note that, even though you can use percentages with several length properties, the
< percentage> data type is not the <len gth> data type. The latter is composed of a
< number> and a len gth unit like p x, or em.
Maria: You mentioned a containing block. Somehow I’ve got the impression that it
is not the same as a parent.
Professor: You’re perfe ctly right. A containing block is just what it says it is: a block
that contains an element. It can either be the element’s paren t or some more distant
ancestor. I will tell you how you can figure out which element represents th e ele ment’s
containing blo ck next time, when I w ill tell you about positioning.
I still owe you an expla nation about th e differences be tween the two styles on page 60
that set fo nt-size and font-style properties for a whole page. For seem ingly the
same purpose, we first used the asterisk and then the bo dy element selector.
If you use a single ele ment selec tor, then the style is applied only to elements of a
single type. So, using the body selector, we set the font only on the body. Because
the body is an ancestor of all the other elements on a page, the set font is propagated
throughout th e page via inheritance. Some font properties, however, are modified on
certain elemen ts by the web b rowser’s default style sheet. For example, the rule for
the <h1> element is defined in some browsers a s follows:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: .67em 0;
}
This means that you get different font sizes—and sometimes weights, or colors—for
different parts of you r page. But they are all based on the same font applied to the
body, which gives a page a uniform appearance.
The asterisk selector, however, selects all the elements on a page. T he r ule is applied
directly to each and every elem ent on a pag e, overridin g any othe r sty le s set by the
browser. Consequently, with the asterisk selec tor we sized all the text on the page to
16 p x, even headings.
Maria: You said that the asterisk selector h ad a zero specificity value. How can it
override a rule that uses an element selec tor, which has a higher specificity?
Professor: The default browser’s style sheet is less important than author style sheets,
so that even an asterisk selector w ill override the default browser rules.
Any more questions? Otherwise we’re done for toda y.
4.9. Relative Sizes 69