HTML and CSS Reference
In-Depth Information
Figure 8-38
. The label text is rendered in Calibri, as inherited from the
body
element, but text in the various form
elements is in a different font and at a different size.
To overcome the default typeface, you could declare the
font-family
property specifically for the
input
,
select
,
textarea
, and
button
elements. However, if you'd like those elements to share the same font
family as the rest of your page, you needn't re-declare the same font properties you applied to the
body
element; you can instead use the
inherit
keyword, as shown in Listing 8-33.
Listing 8-33
. A simple CSS rule instructing form controls to inherit values for
font-family
and
font-size
input, select, textarea, button {
font-family: inherit;
font-size: inherit;
}
Some properties in CSS—including most font properties—are
inherited
, passed down from parent
elements to child elements. The
inherit
keyword instructs the browser to use the same value for this
property that was applied to the element's parent. Because the value of
font-family
is automatically
inherited by every other element (except these pesky form controls), the browser will follow the document
tree all the way up to the
body
element to determine what font and size values to use, assuming no other
ancestor along the way has been assigned a different value.
This CSS rule also combines all four elements into a single selector, separated by commas. Whenever the
same set of declarations is meant to apply to several elements, you can merge them into a single CSS rule
to minimize redundancy and keep your style sheet clean.
Figure 8-39 shows the same form, now with a consistent font family and size in all the form controls. The
controls have also grown in size a bit because their size is determined by the font size.
