CSS3’s display property can be used in a lot of different context to achieve a lot of different effects. The property takes dozens of different values, so really, it’s very versatile. Commonly it’s used to make an item disappear (display: none), or to make change a block level element to an inline level element, so that it will line up with other elements (display: inline), but there are also other tricks up this property’s sleeve.
Here are the basics of how you’d use the property and its css syntax. Here’s the code you’d use to get all of your div elements to no longer display on your page:
div{
display: none;
}
Be careful with this one — using the code above will remove each and every div from a page. If you’re only trying to remove certain divs, be sure to use more specific selectors, or use class or ID tags as selectors.
But the display property is so much more than hiding items from view. You can use it to achieve so many different types of effects, layouts, and element organization.
For example, you can also use it to determine the display and positioning of items so that they’re ordered like table data. Basically, with this property, you can take any HTML elements or set of elements and make them display like they’re part of a table or a grid. You can do this by using the following property values: table, table-row, table-cell, and table-column (there are actually a handful more — check out W3 School’s comprehensive list if you’re interested).
The values mentioned above when used with the display property in CSS will make any non-table HTML element behave like it is, in fact, a table. Like so:
div{
display: table;
}
div p{
display: table-row;
}
The above code will make any div display as though it’s a table, and any p tag that happens to find itself coming after a div display as a table row. Pretty neat.
Another cool feature of the display property is that you can use it to initiate Flexbox, which is super helpful in mobile friendly and responsive design. Flexbox, among many other features and functionalities, allows you to change the order of elements using CSS. This means that even if a div element comes before an h1 element in the HTML code, it doesn’t necessarily have to appear on the page in that order if you use Flexbox in your CSS.
To start using Flexbox, it is essential that you set your HTML elements to display as flex, like this:
div{
display: flex;
display: -webkit-flex;
}
It’s pretty important to use your vendor prefixes here. Even though the display property is supported by every browser under the sun, the Flexbox and the flex property value itself are pretty much universally unaccepted by recent versions of modern browsers without the use of those pesky vendor prefixes, so be sure to use them.
As you can see, the display property gives developers a whole lot of flexibility in terms of visibility of elements, organization of elements and data, and even the overall layout of a webpage. Definitely study up on the property so that you can be sure you’re taking full advantage of it in your coding.