Chapter 6: Display and Visibility

 

Congratulations. You have now learned a fair bit of CSS. In fact, we have covered most of the important concepts in CSS, including the CSS box model and the idea of floating and positioning. In this chapter, we’ll look at how to pull a disappearing act in CSS.

 

That’s right. CSS has not one, but two, properties that allow us to remove or hide an element. These two properties are the display and visibility properties.

 

Display

 

The CSS display property is used to modify how an element is displayed. There are three commonly used values: none, inline and block.

 

The first value ‘none’ makes an element disappear. The page will be displayed as if the element is not there.

 

The second value ‘inline’ causes an element to be displayed as an inline element. We briefly talked about inline elements in Chapter 2 when discussing the difference between <div> and <span>. Recall that an inline element does not start and end with a new line. Another characteristic of an inline element is that it will only take up as much height and width as it needs. Hence, there is no point specifying the height and width of an inline element.

 

In contrast, a block element starts and ends with a new line and its height and width can be changed. If you want an element to be displayed as a block element, you use the ‘block’ value.

Example:

 

display: none;

 

Visibility

 

The CSS visibility property is used to hide an element. You do that by writing visibility: hidden;.

 

The difference between visibility: hidden and display: none is that for the former, the element is hidden but still takes up space. Using the visibility property is just like wearing an invisible cloak. The element is still there, even though you can’t see it.

 

In contrast, when you use display: none, the element is essentially removed from the page and the page will display as if the element does not exist at all.

 

For instance, suppose the two properties are applied to the word “magic” in the sentence “This is just like magic. You can make words disappear.” below:

 

For visibility: hidden; you’ll get

“This is just like          . You can make words disappear.”

 

For display: none; you’ll get

“This is just like . You can make words disappear.”

 

Exercise 6

 

Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 6 - Display and Visibility folder.

 

Exercise 6.1

 

1.       Open the file Chapter 6 - Display and Visibility.html concurrently in your browser and text editor.

2.       Change the height and width in the CSS declaration for #displaydemo. Observe what happens to the yellow box.

Nothing changes right? The yellow box is declared as an inline element. Hence it will only take up as much width and height as it needs. In fact, you can remove the height and width properties and nothing will change.

3.       Now change the display property of #displaydemo from display: inline; to display: block;. What happens?

The yellow box is now displayed as a block element. It starts and ends with a new line. If you have declared its width and height, the width and height will be the values you specified. If you have not specified its width and height, the yellow box will occupy the full width of the page. It will take up as much height as it needs.

4.       Try changing the height and width in the CSS declaration for #displaydemo. Observe what happens.

5.       Now, let’s move on to the visibility property. Change the CSS declaration of #magic from display: inline; to visibility: hidden;. Observe what happens to the word 'magic' in the blue sentence.

6.       Next, change the CSS declaration of #magic from visibility: hidden; to display: none;. Observe what happens.