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.
Search WWH ::

Custom Search