How to Create Style Labels using HTML and CSS ?

Last Updated : 27 Dec, 2023

This article will show you how to create style labels using HTML and CSS. Labels are the caption for an item in the user interface i.e. it provides the metadata for the specified field.

To create the style labels, we use HTML and CSS. HTML creates the basic structure of the label, and CSS properties add styles to that element.

Example: In this example, we will create style labels with the help of HTML and CSS.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to Create Style Labels
        using HTML and CSS?
    </title>
 
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
 
        .label {
            font-size: 1.5rem;
            padding: 0.5rem;
            margin-bottom: 10px;
            display: inline-block;
            border-radius: 3px;
        }
 
        .success {
            background-color: #28a745;
            color: #fff;
        }
 
        .alert {
            background-color: #dc3545;
            color: #fff;
        }
 
        .warning {
            background-color: #ffc107;
            color: #212529;
        }
    </style>
</head>
 
<body>
    <div class="label success">
        Success
    </div>
 
    <div class="label alert">
        Alert
    </div>
 
    <div class="label warning">
        Warning
    </div>
</body>
 
</html>