Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to style labels with CSS?
The labels on a web page can be used to symbolize danger, warning, information symbols in the form of colors. With Bootstrap, pre-defined classes are available. However, even CSS styles can help us to achieve the same without using Bootstrap.
Labels
The <span> element is used to set different labels for information, success, warning and danger. These are the different classes for each label we will set with CSS −
<span class="success">Success</span> <span class="info">Info</span> <span class="warning">Warning</span> <span class="danger">Danger</span> <span class="other">Other</span>
Style the buttons
The labels are styled like this −
span {
font-size: 18px;
font-weight: 600;
color: white;
padding: 8px;
}
The success label
The success label is styled with a different background color using the background-color property −
.success {
background-color: #4caf50;
}
The information label
The info label is styled with a different background color using the background-color property −
.info {
background-color: #2196f3;
}
The danger label
The danger label is styled with a different background color using the background-color property −
.danger {
background-color: #f44336;
}
The warning label
The warning label is styled with a different background color using the background-color property −
.warning {
background-color: #ff9800;
}
Example
To style the labels with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
span {
font-size: 18px;
font-weight: 600;
color: white;
padding: 8px;
}
.success {
background-color: #4caf50;
}
.info {
background-color: #2196f3;
}
.warning {
background-color: #ff9800;
}
.danger {
background-color: #f44336;
}
.other {
background-color: #e7e7e7;
color: black;
}
</style>
</head>
<body>
<h1>Labels Example</h1>
<span class="success">Success</span>
<span class="info">Info</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Other</span>
</body>
</html>
1K+ Views
