Controlling Display and Visibility

Tutorial 3 of 5

1. Introduction

Welcome to this tutorial! Our goal in this lesson is to understand how to control the display and visibility of HTML elements using CSS.

By the end of this tutorial, you will be able to:
- Understand the difference between the display and visibility property in CSS
- Manipulate the visibility of HTML elements using CSS
- Use the display property to control the layout and behavior of HTML elements

Prerequisites

Basic understanding of HTML and CSS is recommended. Familiarity with using CSS selectors to target HTML elements will be beneficial.

2. Step-by-Step Guide

Display Property

The display property in CSS determines the type of box used for an HTML element. It has several values like none, block, inline, inline-block, etc.

display: none; - This value will completely hide the element, and it will take no space on the page.
display: block; - This value will display the element as a block element. It will start on a new line, and take up the full width available.
display: inline; - This value will display the element as an inline element. It does not start on a new line and it only takes up as much width as necessary.

Visibility Property

The visibility property in CSS is used to show or hide an HTML element.

visibility: hidden; - This value hides an element, but it will still take up the same space as before.
visibility: visible; - This value shows the element.

3. Code Examples

Example 1: Using `display` Property

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  display: none;
}
</style>
</head>
<body>

<h2>Display Property Example</h2>
<div id="myDiv">
  <p>This is a paragraph.</p>
</div>

</body>
</html>

In the above example, the div with id "myDiv" has display: none; so it is not visible on the page and also doesn't take any space.

Example 2: Using `visibility` Property

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  visibility: hidden;
}
</style>
</head>
<body>

<h2>Visibility Property Example</h2>
<div id="myDiv">
  <p>This is a paragraph.</p>
</div>

</body>
</html>

In this example, the div with id "myDiv" has visibility: hidden; so it is not visible on the page, but it still takes up space.

4. Summary

We've covered how to control the display and visibility of HTML elements using CSS. We've learned the difference between the display and visibility properties and how to use them.

For further learning, you could explore other values of the display property like flex, grid, table, etc.

5. Practice Exercises

Exercise 1: Hide an element without affecting the layout.

Solution: To hide an element without affecting the layout, we can use the visibility property. Here's the code snippet:

#myDiv {
  visibility: hidden;
}

Exercise 2: Hide an element and also the space it was taking up.

Solution: To completely hide an element including its space, we can use the display property. Here's the code snippet:

#myDiv {
  display: none;
}

Remember to practice these concepts and experiment with different values to get a better understanding of how they work.