CSS default value of a property

Question

So i am reading this book Programming in HTML5 with JavaScript and CSS3 by Microsoft and there is this exercise using tables, there is a css rule to display and hide some elements but only the hidden or actually in css display:none property is working and the display:normal says its an invalid value in css.

.hidden {
    display: none;
}
.visible {
    display: normal;
}

Is it possible that this book is actually wrong about the display:normal property or am i doing something wrong?

Answer 1

Yes, display: normal is invalid.

The default value of display may depend on what you mean with "default".

1. Initial value:

   Each property has an initial value, defined in the property’s definition table. If the property is not an inherited property, and the cascade does not result in a value, then the specified value of the property is its initial value.

   The initial value of display is inline.

2. Inherited value, in case the property is inheritable

   Inheritance propagates property values from parent elements to their children. The inherited value of a property on an element is the computed value of the property on the element’s parent element.

   display in not inheritable, so this is not relevant.

3. User agents style sheets:

   Conforming user agents must apply a default style sheet (or behave as if they did). A user agent’s default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See e.g. the HTML user agent style sheet.

   In that stylesheet, browsers style some elements with display: block, display: table, etc.

4. User style sheets,

   The user may be able to specify style information for a particular document.

5. Author stylesheets

   These are your stylesheets.

The cascade will result in the latest applicable (in fact it's more complicated because there are things like specificity, scoping and !important).

When you want to set some property to a default value, you can use

• initial (introduced in CSS Cascade 3)

  the property’s initial value becomes its specified value.

  Then, display: initial will be equivalent to display: inline.

• inherit (introduced in CSS2)

  the inherited value becomes the property’s specified and computed values

  Then, display: inherit will use the value of the parent element (or the initial value for the root element).

• unset (introduced in CSS Cascade 3)

  if it is an inherited property, this is treated as inherit, and if it is not, this is treated as initial.

  Since display is not inheritable, display: unset will be equivalent to display: initial, that is, display: inline.

• revert (introduced in CSS Cascade 4)

  When used in an author stylesheet,

  Rolls back the cascade to the user level, so that the specified value is calculated as if no author-level rules were specified for this property.

  This is probably what you want.