Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Syntax
span.label-class {
background-color: color;
color: text-color;
padding: value;
font-weight: value;
}
Basic Label Structure
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>
Example: Complete Label Styling
The following example demonstrates how to style labels with different colors and proper formatting −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
line-height: 2;
}
span {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 12px;
border-radius: 4px;
margin-right: 10px;
display: inline-block;
}
.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>
<h2>Status Labels</h2>
<p>
<span class="success">Success</span>
<span class="info">Information</span>
<span class="warning">Warning</span>
<span class="danger">Danger</span>
<span class="other">Neutral</span>
</p>
</body>
</html>
Five colorful labels appear on the page: a green "Success" label, blue "Information" label, orange "Warning" label, red "Danger" label, and gray "Neutral" label, each with rounded corners and proper spacing.
Key Properties Explained
| Property | Purpose | Example Value |
|---|---|---|
background-color |
Sets label background color | #4caf50 (green) |
color |
Sets text color | white |
padding |
Adds space inside label | 6px 12px |
border-radius |
Creates rounded corners | 4px |
font-weight |
Makes text bold | 600 |
Conclusion
CSS labels provide an effective way to categorize and highlight important information on web pages. By combining background colors, padding, and typography, you can create professional-looking status indicators without external frameworks.
2K+ Views
