Submodule 4.2: Pseudo-classes and display properties

CSS Display

The display property is used to define how elements would appear on the page.

The most common values for display are inline and block.

A practical use of the display property is in the navigation bar.

The navigation bar consists of a list of links.

In a navigation bar, we want all the area of our link items to be clickable (including its border area). This is achieved by using the block value. Thus the CSS would be:

li { display: block; }

 A navigation bar can be vertical or horizontal.

By default, the list will appear vertical.

However, if we want to create a horizontal navigation bar, we should make the list items to appear next to each other. This can be achieved by applying the value inline to the CSS property display.

Example:

li { display: inline; }

 

 Note:

In the above examples we apply the display property to the list items and not to the <ul> since it’s their behavior the one we want to change.

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them.