Display None in CSS

CSSWeb DevelopmentFront End Technology

To remove an element, use the display none property value in CSS. Let us see an example to implement the none property value −

Example

Let us now see an example −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background-color: orange;
   color: white;
}
p.demo {
   display: none;
}
span.demo1 {
   display: inline;
}
</style>
</head>
<body>
<h1>Match Details</h1>
<div>
Match will begin at <p class="demo">9AM</p> 10AM on 20th December.
</div>
<div>
Match will end at <span class="demo1">5PM</span> on 20th December.
</div>
</body>
</html>

Output

Example

Let us now see another example −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
span {
   display: none;
}
.demo2 {
   text-decoration: underline;
   text-decoration-style: double;
   text-decoration-color: red;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near <span>XYZ College</span> ABC College.</p>
<p class="demo2">Exam begins at 11AM.</p>
</body>
</html>

Output

raja
Published on 30-Dec-2019 16:54:31
Advertisements