HTML and CSS Reference
In-Depth Information
defining properties that are straightforward. If, for example, the background color of a web document is defined, all
container elements, divisions, and paragraphs within the document will inherit that property. Certainly, any of them
can be arbitrarily overridden.
Certain CSS property values are defined as inherited . Unless a value is specified for these element-property
combinations, the value is determined by inheritance.
The inherit value can be used for all properties to be determined by inheritance. For example, color is an
inheritable property. However, the color of anchor elements is commonly set to blue by the user agent style sheet. By
using the value inherit , the declaration of the user agent style sheet can be overridden: all child anchor elements
inherit the value of the foreground color from the parent element (Listing 5-64).
Listing 5-64. Inherited Property Value
#warning {
color: #000;
}
#warning a:link {
color: inherit;
}
the more specific a property, the fewer elements it can be applied to. as you will see in the overview of CSS
properties, a large share of CSS properties are not inherited at all.
Note
Scopes and Structure
In contrast to the underlined blue hyperlinks used in the first years of the Web, modern web sites often apply different
colors and decorations to accommodate the overall design. When using a dotted underline for hyperlinks, however, it
is rather frustrating that linking images share the same style. To solve the problem, image borders should be removed
and more specific styles set. Listing 5-65 shows an example.
Listing 5-65. Specific Rules to Eliminate the Underline for Links Declared by General Rules
img {
border: 0;
}
a.nounder {
border-bottom: none;
}
The scope of rules has a large impact on their application. The rules that apply to more (most) elements within
the same category should be identified in an early stage of web site development. For example, if the vast majority of
paragraphs have the same indent, that value should be applied as a general CSS rule to all p elements (for example,
p { text-indent: 3em; } ), and another rule should be written to the class of paragraphs that are different (for
example, p.morein { text-indent: 5em; } ).
In the optimal case, both the scope and the inheritance are considered for those properties that can be used as
the basis for the entire web site, such as the default font size (Listing 5-66).
Listing 5-66. The Default Font Size of the Entire Web Site Can Be Inherited from the Document Body
body {
font-size: 0.8em;
}
 
 
Search WWH ::




Custom Search