CSS: The display property

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 (among others less 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 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: DEMO Create a simple design
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!