If you take a look at the image above you can see the default view and the HTML markup of the container and circles. The CSS rule is, when a user hovers the cursor over the container, convert the the second div aka circle, display none. Now the CSS code that makes the middle circle vanish. I’ve added a container element with 3 div elements that have a class name, circle. Here’s what the HTML markup will look like. Let me show you how this looks like with code. It’s just hiding from the user until told otherwise.Īnd I can make it reappear when the user does not hover over the container.

What display none does is makes the HTML circle behave as if it’s been deleted.īut the HTML itself never really got deleted. Let’s pretend that we have a container that has 2 small circles.Īnd we want to hide the right circle when a user clicks on the container element (the imaginary box around the circles).

It makes an element vanish and remains hidden from the user.ĭisplay none is one of the most common, and useful properties that CSS provides. display: noneĭisplay none is like a ninja.

I’ll go over how each one behaves, the browser support, and perhaps draw a few silly pictures to drive my point. In this article I’m going over 5 different types of CSS display values. CSS in Dreamweaver Tutorial: Text Properties for CSS Styles

Center inline flex