CSS Display:
The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page. As the name suggests, this property is used to define the display of the different parts of a web page.
Syntax:
display: value;
Example:
<!DOCTYPE html>
<html>
<head>
<title>CSS | Display property</title>
<style>
#keep 1 {
height: 100px;
width: 200px;
background: teal;
display: block;
}
#keep 2 {
height: 100px;
width: 200px;
background: cyan;
display: block;
}
#keep 3 {
height: 100px;
width: 200px;
background: green;
display: block;
}
.ks{
margin-left: 20px;
font-size: 42px;
font-weight: bold;
color: #009900;
}
.keep{
font-size: 25px;
margin-left: 30px;
}
.main {
margin: 50px;
text-align: center;
}
</style>
</head>
<body>
<div class="ks">keep smiling</div>
<div class="keep">display: block; property</div>
<div class="main">
<div id="keep 1">Block 1 </div>
<div id="keep 2">Block 2</div>
<div id="keep 3">Block 3</div>
</div>
</body>
</html>
Output:
Keep smiling
display; block ; property
