It is used to display element in block level and inline level on web page. In other words, it is specify how to display element on web page. CSS display is the most important property of CSS(Cascading Style Sheets). is knows as Display Property CSS.
Syntax
display:value;
Value of display property
- Inline
- It is use to create inline level tag element. In this case height and width cannot be defined.
<html>
<head>
<style>
p {
display: inline;
}
</style>
</head>
<body>
<h1>Inline</h1>
<p>Hello</p>
<p>Basic</p>
<p>engineer</p>
<p>google</p>
<p>Dell</p>
</body>
</html>
- Block
- It is used to display element in block level. In this case height and width cannot be defined.
<html>
<head>
<style>
p {
display: block;
}
</style>
</head>
<body>
<h1>Block</h1>
<p>Hello</p>
<p>Basic</p>
<p>engineer</p>
<p>google</p>
<p>Dell</p>
</body>
</html> 
- Inline-block
- It is similar to inline but we can set height and width.
<html>
<head>
<style>
p {
display: inline-block;
}
</style>
</head>
<body>
<h1>inline-block</h1>
<p>Hello</p>
<p>Basic</p>
<p>engineer</p>
<p>google</p>
<p>Dell</p>
</body>
</html> 
- None
- In this case element cannot be display.
- Contents
- It is use to remove the container.
- flex
- The element is a block-level flex container.
- grid
- The element is a block-level grid container.
- Inline-flex
- The element is an inline-level flex container.
- Inline-grid
- The element is an inline-level grid container.
- Inline-table
- The element is displays as an inline-level table.
- Iist-item
- The display all the elements in <li> element.
- run-in
- The element as either block or inline and depends on context.
<html>
<head>
<style>
p {
display: run-in;
}
</style>
</head>
<body>
<h1>run-in</h1>
<p>Hello</p>
<p>Basic</p>
<p>engineer</p>
<p>google</p>
<p>Dell</p>
</body>
</html>
- table
- The element behave like a <table> element.
- table-caption
- The element behave like a <caption> element.
- table-column-group
- The element behave like a <colgroup> element.
- table-header-group
- The element behave like a <thead> element.
- table-footer-group
- The element behave like a <tfoot> element.
- table-row-group
- The element behave like a <tbody> element.
- table-cell
- The element behave like a <td> element.
- table-column
- The element behave like a <col> element.
- table-row
- The element behave like a <tr> element.
- initial
- It is a set the default value
- inherit
- It is a inherit the property from it’s parents’ elements.
Visibility CSS
- Visible– It is the by default value
- Hidden– To hide element but can not be remove.
- Collapse– It must be used with table tag.
Syntax
visibility: visible|hidden|collapse|initial|inherit;
Example
<html>
<head>
<style>
h1.visible {
visibility: visible
}
h1.hidden {
visibility: hidden
}
</style>
</head>
<body>
<h1 class="visible">visible</h1>
<h1 class="hidden">invisible</h1>
<p><strong>Note:</strong> It is used to display element in block level and inline level on web page. In other words, it is specify how to display element on web page.</p>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article
To know more about CSS please check Wikipedia Click here.
Stay Connected Stay Safe. Thank you.
0 Comments