Introduction to CSS: The Display Property. The display property specifies a rendering behavior of an element. And in this video, I will cover four common display properties. On the screen, I have three paragraphs, and they all share a class named text. For demonstration purposes, I have an orange border surrounding each paragraph. The default display for the majority of HTML elements is block. An element with display block will start on the new line and try to take up the full width of the page, causing the elements to stack on top of each other as though they were boxes.

In the text class CSS that's on the left, I will add display: block. After doing so, nothing changes with the paragraph's rendering behavior. And this should be expected because display: block is a default property. If I wanted to change the rendering behavior, there are other display types. I will change display's value from block to inline. Now the three paragraphs are on the same line, the element will also take up the necessary width to fit its content. Elements that are displayed inline are not affected by the width or height CSS properties. They do not have a top or bottom margin. To demonstrate this, I'm going to add a width and height of 100 pixels to the text class.

After doing so, the paragraph elements are the same as before as these properties are ignored when an element is inline. So, what if I wanted inline elements to be affected by height and width? I'm going to change display: inline to display: inline-block. Now the paragraphs have a width and a height of 100 pixels. Inline-block elements behave the same as inline elements, except they no longer ignore height or width properties. Now the last display property in this video is a little different. What if I wanted to take an element out of the web page? Paragraph One has an id with the name one.

In the CSS panel, I'm going to add the id one as a selector. Instead of the one CSS block, I will type display: none. Display none treats the element as though it does not exist, and it will not be rendered on the web page. The use case for display: none is when you don't want the content, whatever that's not being rendered, to be visible at all, but then shown later on, maybe using an event or some other method for the element to appear on screen, and that's it. Thanks for watching at Cloud Academy.