AI Workshop: learn to build apps with AI →
CSS Basics: The display property

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


In the HTML lessons in Module 1, we talked about inline elements and block elements, and how a p tag creates a block and span creates an inline element.

All elements in HTML are by default either block or inline.

We can change this behavior by using CSS, in particular using the display property.

For example, the span element by default is an inline element, but we can set a span to be a block element using this syntax:

span {
  display: block;
}

display accepts a wide variety of possible values, including others that are less commonly used:

- `block`
- `inline`
- `none`
- `flex`
- `grid`

As you can imagine from this big list, display is a super important property because it can totally change how elements are displayed by setting them to block or inline.

You can also completely hide elements setting display: none;.

It is very important to know that by using display we can enable advanced layout features like CSS Grid and Flexbox, two things that we will learn next.

Lessons in this unit:

0: Introduction
1: Colors
2: More selectors
3: Cascade
4: Specificity
5: Units
6: Advanced selectors
7: Typography
8: The box model
9: ▶︎ The display property
10: Responsive design
11: Create a simple design
12: The CSS Guide