image
Introduction to CSS: The Display Property
The Display Property
Difficulty
Intermediate
Duration
3m
Students
88
Ratings
5/5
Description

This practical course offers an introduction to the CSS Display Property.

Learning Objectives

  • Learn how the display property specifies the rendering of the box
  • Learn about the block, inline, and inline-block display property values
  • Learn how to use the display property to have a specific element not render on the page

Intended Audience

This course is intended for anyone who wants to learn how to use the CSS Display Property.

Prerequisites

Anyone with an interest in CSS in general. The following course will serve as a brief introduction to CSS: Introduction to CSS Syntax

Transcript

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.

About the Author
Students
7038
Labs
24
Courses
73
Learning Paths
31

Farish has worked in the EdTech industry for over six years. He is passionate about teaching valuable coding skills to help individuals and enterprises succeed.

Previously, Farish worked at 2U Inc in two concurrent roles. Farish worked as an adjunct instructor for 2U’s full-stack boot camps at UCLA and UCR. Farish also worked as a curriculum engineer for multiple full-stack boot camp programs. As a curriculum engineer, Farish’s role was to create activities, projects, and lesson plans taught in the boot camps used by over 50 University partners. Along with these duties, Farish also created nearly 80 videos for the full-stack blended online program.

Before 2U, Farish worked at Codecademy for over four years, both as a content creator and part of the curriculum experience team.

Farish is an avid powerlifter, sushi lover, and occasional Funko collector.

Covered Topics