Style Sheets - Web Standards: Mastering HTML5, CSS3, and XML - page 163

Listing 5-57. Rule for Elements to Be Displayed As Block

display: block;

• Inline : Uses only as much width as needed without breaking the row (Listing 5-58)

Listing 5-58. Rule for Elements to Be Displayed Inline

display: inline;

• Not di.yed : Removes the element completely from the document so it does not take up any
space, even though its corresponding markup is still in the source code (Listing 5-59)

Listing 5-59. Rule for Elements to Hide Without Spaceholder

display: none;

• Hidden : Hides the element but still takes up space in the layout (Listing 5-60)

Listing 5-60. Rule for Elements to Hide with Spaceholder

visibility: hidden;

Cascading
The C in CSS stands for Cascading . It is a mechanism that determines one declaration among a set of styling rules
that should be applied for a certain element-property pair. Browsers consider three features in the following order to
choose that declaration [18]:

1. Weight : The declaration with the highest weight is chosen. In CSS3, the weight of a

declaration is based on the origin of the declaration and its level of importance . The origin
can be of three kinds: author , user , and user agent . CSS declarations have two levels of
importance: normal and important (the first one is the default level; the second one is
optional and should be marked). An important declaration looks like Listing 5-61.

Listing 5-61. A Rule with the Highest Level of Importance

#menu {
margin-top: 12px !important ;
}

■ Tip the proper exploitation of the cascading mechanism eliminates the need for !important rules.

The weight of style sheets derived from the different origins, in descending order, is as
follows:

a. User style sheets (important)

b. Author style sheets (important)

c. Author style sheets (normal)

d. User style sheets (normal)

e. Default style sheets of rendering engines