How To Create an Alert Message Box using CSS?

How To Create an Alert Message Box using CSS?

Last Updated : 09 Oct, 2024

An alert message box using CSS is a styled container that displays important messages or notifications to users. It is often used for warnings, errors, or success messages, and typically includes styles like background colors, borders, and icons to attract attention.

Approach

Basic Structure: Use divs with classes to create different types of alert message boxes.
Styling Alerts: Define .alert class for common styles like padding, border-radius, and font size.
Custom Classes: Use classes like .success, .error, and .warning for specific background, border, and text colors.
Display Messages: Each alert box displays a message tailored to its type (e.g., success, warning, error).
Responsive Design: Using relative units and scalable font sizes ensures alerts adapt to different screens.

Example: Here we are following the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Alert Message Boxes</title>
    <style>
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            font-size: 16px;
            font-weight: bold;
        }

        .success {
            color: #155724;
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
        }

        .warning {
            color: #856404;
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
        }

        .error {
            color: #721c24;
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
        }

        .info {
            color: #0c5460;
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
        }

        .primary {
            color: #004085;
            background-color: #cce5ff;
            border: 1px solid #b8daff;
        }

        .secondary {
            color: #383d41;
            background-color: #e2e3e5;
            border: 1px solid #d6d8db;
        }

        .dark {
            color: #fff;
            background-color: #343a40;
            border: 1px solid #6c757d;
        }
    </style>
</head>

<body>

    <div class="alert success">
        Success: Your changes have been saved.
    </div>

    <div class="alert warning">
        Warning: This action cannot be undone.
    </div>

    <div class="alert error">
        Error: Please enter a valid email address.
    </div>

    <div class="alert info">
        Info: Your account has been updated.
    </div>

    <div class="alert primary">
        Primary: This is a primary alert.
    </div>

    <div class="alert secondary">
        Secondary: This is a secondary alert.
    </div>

    <div class="alert dark">
        Dark: This is a dark alert.
    </div>

</body>

</html>

Output:

Screenshot-2024-05-20-214213 — Output

How To Create an Alert Message Box using CSS?

B

bishalmanhoze

Improve

Article Tags :

Similar Reads

How to Create Callout Messages using CSS?

Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS.Preview ImagePreviewApproachFirst

How to Create Style Labels using HTML and CSS ?

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 Styl

How to Style Alert Buttons using CSS?

Styling alert buttons with CSS enhances user experience by making buttons more visually appealing and interactive. We can customize their look using CSS properties like color, padding, and hover effects. In this tutorial, we will focus on how to style "alert" buttons using CSS. These are the followi

Create a Chatbox UI Template using HTML and CSS

Real-time chat applications are designed to provide a responsive and interactive experience, where messages are delivered and displayed immediately as they are sent. This means that users can engage in conversations and receive updates in real-time, without significant delays. In the chat applicatio

How to create an Alert icon using jQuery Mobile?

jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making an Alert icon using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€