How to Create a Cutout Text using HTML and CSS ?

How to Create Style Labels using HTML and CSS ?

Last Updated : 16 Oct, 2024

Creating style labels using HTML and CSS involves designing form labels that enhance user interaction. By applying CSS properties like color, font, and spacing, you can improve the appearance of labels associated with input fields, making forms more visually appealing and user-friendly.

Creating Styled Labels with HTML and CSS

This approach utilizes HTML div elements with CSS classes to create visually distinct labels for different statuses. By applying background colors and styles, you enhance the user interface, making important messages like success, alert, and warning more noticeable.

Example: In this example, we will creates styled labels for success, alert, and warning messages. Each label has distinct background colors and text styles for easy identification and emphasis.

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>

Output:

style-labels

How to Create a Cutout Text using HTML and CSS ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to Create Pricing Table using HTML and CSS ?

Nowadays, every website contains pricing tables, such as e-commerce, e-tech, and even tourism websites also have pricing tables as they contain their plans, cost of plans, and information about plans to buy new facilities. So the pricing table is one of the most important parts of websites that sell

How to create linear gradient text using HTML and CSS ?

The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide

How to create a Hero Image using HTML and CSS ?

A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

How to Create a Cutout Text using HTML and CSS ?

Cutout text is used as a background header of the webpage. The cutout text creates an attractive look on the webpage. To create a cutout text we will use only HTML and CSS. We display the cutout text and then we make the text blending of an elementâ€™s background with the elementâ€™s parent. The CSS mix

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that

How to create Perspective Text using HTML & CSS ?

In this article, we are going to create an illusion of images below the main image. This is a simple article, we can achieve our target only by using HTML & CSS. Approach: Create a main div in which we have added a heading tag and then use the selectors in CSS to create the effects. HTML Code: F

How to create and use CSS Image Sprites ?

In this article, we are going to learn how we can how to create and use CSS Image Sprites. CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous

How to Create Section Counter using HTML and CSS ?

Section counter is like a card and is useful for webpage footer. It contains details about the company. In this article, we will introduce some predicted data about some companies. We divide this article into two sections, in the first section we will create the normal structure then we will work on

How to Create an Image Overlay Icon using HTML and CSS ?

Image overlay Icon can be an impressive addition to interactive detail or a set of features for your website. This article content will divide the task into two sections, the first section creating the structure and attach the link for the icon. In the second section, we will design the structure us