PUBLISHED ON: AUGUST 12, 2021
How to style labels with CSS?
The labels are used to define or set captions for any element on the web. It conveys useful information to the user about any element or maybe any section of the website.
The labels should be designed that it adds up the semantic meaning to it. Here, we will learn to style labels with CSS.
Styling the labels
The labels can be styled with some basic CSS properties like background-color , color, padding, font-size, etc.
Example: Styling the labels with CSS
Here, we have added three level topics. It has been added with some semantic background color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
span {
padding: 16px;
height: 10px;
width: 100px;
margin: 2px;
}
.label-1 {
background-color: green;
}
.label-2 {
background-color: yellow;
}
.label-3 {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<h2> Study Topics </h2>
<span class="label-1">Easy </span>
<span class="label-2">Medium </span>
<span class="label-3">Difficult </span>
</div>
</body>
</html>
Output
Here is the output of the above program.
Example: styling the labels with CSS
In the next example, we have taken the same example and changed the background-color on :hover. Also added box-shadow property to each label.
Conclusion
In this tutorial, we have learned to style labels with CSS. We can use basic CSS property to do so. Here, we have added examples to demonstrate it.
