The **display** property in CSS determines how an element should be displayed on the web page. It can be used to control the layout of multiple elements on a page at once and to adjust how an element is displayed in relation to other elements. There are several different values that the display property can take, each of which has a different effect on the element it is applied to.

Here are the different values that the display property can take, along with examples and explanations of how each value works:

## inline
This value causes an element to be displayed inline with the surrounding text rather than on its own line.
```css
a {
  display: inline;
}
```

## block
This value causes an element to be displayed on its own line, taking up the full width of its parent element.
```css
div {
  display: block;
}
```

## inline-block
This value causes an element to be displayed inline with the surrounding text, but it can have its own dimensions (such as width and height). For example
```css
span {
  display: inline-block;
  width: 200px;
  height: 50px;
}
```

## none
This value causes an element to be hidden and not displayed on the page.
```css
p.hidden {
  display: none;
}
``` 

## flex
This value causes an element to become a flex container, which allows its child elements to be laid out in a flexible and responsive way.
```css
ul {
  display: flex;
}
```

## grid
This value causes an element to become a grid container, which allows its child elements to be laid out in a grid pattern.
```css
section {
  display: grid;
}
```

## table
This value causes an element to be displayed as a table with rows and columns.
```css
table {
  display: table;
}
```

You can use the display property in combination with other CSS properties and selectors to control the layout and appearance of your web page. For example, you might use the `display` property to create a navigation bar that is displayed as a row of `inline-block` elements or create a `grid` of items displayed as a `table`.

Continue learning CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

This section will cover the general styling used for layout and text formatting to create a visually appealing and user-friendly design for your webpage. Part II.

This section relates to colors and backgrounds in CSS. You will learn about various color formats, combining multiple colors into a gradient, and any CSS element's background management.

This section will focus on positioning elements on a webpage. By the end of this section, you should have a solid understanding of the different layout options available in CSS.

Introduction to CSS Part II

Basic Display Properties

inline

block

inline-block

none

flex

grid

table