facebook google plus twitter
Webucator's Free Introduction to CSS Tutorial

Lesson: Display and Visibility

Welcome to our free Introduction to CSS tutorial. This tutorial is based on Webucator's Introduction to CSS Training course.

In this lesson, you will work with display and visibility.

Lesson Goals

  • Work with the display property.
  • Work with the visibility property.

display

The display property is used to determine if and how an element appears. The most common values are shown below:

  1. block
  2. inline
  3. none

For a full list of display values, see https://developer.mozilla.org/en-US/docs/Web/CSS/display.

We use the display property to control how an element displays on the page - to control its rendering box. The default value for most elements is either:

  • block, for <p>, <div>, <form>, <h1>, and others;
  • inline, for <span>, <img>, <a>, and others.

We can set display to none to hide an element. The display property is often used to:

  1. Hide and show elements by using JavaScript to toggle its value between block and none.
  2. To show elements hide elements on a particular media. For example, you might want to hide advertisements on the printed version of a page.

tables and lists

It is possible to use display to make non-table elements act like table elements and non-list elements act like list elements, but it is always better to use actual table and list elements to create tables and lists.

The following example shows how the display property can be used to turn links into block elements:

Code Sample:

DisplayAndVisibility/Demos/link-buttons-styles.css
a.button-link {
  background-color: #eaf1dd;
  border-color: silver;
  border-radius: 0.5rem;
  border-style: none solid solid none;
  border-width: 0 0.2rem 0.2rem 0;
  color: #060;
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 1.5rem;
  margin: .5rem;
  padding: .5rem .2rem;
  text-decoration: none;
  width: 300px;
}

Code Sample:

DisplayAndVisibility/Demos/link-buttons.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>Button Links</h1>
<div>
  <a class="button-link" href="https://www.washingtonpost.com">
    WashingtonPost.com
  </a>
  <a class="button-link" href="https://www.webucator.com">
    Webucator
  </a>
  <a class="button-link" href="https://www.google.com">
    Google
  </a>
</div>
</body>
</html>

Code Explanation

If we didn't set display to block, the page would look like this: display Link Buttons Broken

But with display set to block, it looks like this: display Link Buttons

visibility

The visibility property is used to hide or show an element without affecting the overall layout of the page. The values are listed below:

  1. visible
  2. hidden

collapse

visibility also has a third value: collapse, which is not as well supported, and is just used on table elements. To learn more about collapse, see https://developer.mozilla.org/en-US/docs/Web/CSS/visibility.

We can set visibility to hidden to hide an element. Like with display, we can use this property with JavaScript to hide and show an element.

Note that visibility: hidden is different from display: none: visibility: hidden will leave space for the hidden element, so that the layout is unaffected, and display: none will remove the element, changing the space of the layout. See the following demo:

Code Sample:

DisplayAndVisibility/Demos/none-vs-hidden-styles.css
/* The "box" class is used for display purposes only */
.box {
  background: silver; 
  border: 1px black solid;
  height: 50px;
  margin: 1rem;
  padding: 1rem;
  width: 50px;
}

#none {
  display: none;
}

#hidden {
  visibility: hidden;
}

Code Sample:

DisplayAndVisibility/Demos/none-vs-hidden.html
---- C O D E   O M I T T E D ----
<body class="webucator">
<h1>display: none vs. visibility: hidden</h1>
  <div class="box">This is div 1.</div>
  <div id="none" class="box">This is div 2.</div>
  <div class="box">This is div 3.</div>
  <div id="hidden" class="box">This is div 4.</div>
  <div class="box">This is div 5.</div>
</body>
</html>

Code Explanation

Without the display or visibility declarations, the code would render like this: none vs. hidden Demo before

With the display and visibility declarations, the code would render like this:none vs. hidden Demo

Notice that no space is left where div 2 was, while there is still a gap where div 4 used to be.