Precise positioning: Display types

  1. Unique identifiers
  2. Precise positioning
  3. List style types

There are three basic kinds of elements, as far as style sheets are concerned: block, inline, and list-item. Block elements are elements such as paragraphs, headlines, and div. Elements that are what in a word processor we’d call character-level styles, are inline elements. You can use the display property to change an element from one to another. You can also use the display property to hide an element, by settings its display to “none”.

When used in conjunction with hover or active pseudo-elements, this can be used to create pull-down or pop-down menus or other information. When used with printing, it can be used to show or hide certain information when the document is printed.

For example, the following style sheet properties will cause the movie quotes in the menu to disappear:

ul#menu p {

display: none;

}

Reload the page, and the movie quotes are no longer visible.

  1. Unique identifiers
  2. Precise positioning
  3. List style types