How to Create Notes using CSS?

Last Updated : 30 Jul, 2024

In web design, a "note" is a styled container that stands out from the surrounding text and is frequently used to highlight particular information. We can make visually appealing notes that improve user experience with CSS.

Approach

The HTML structure includes 'div' elements to create notes. The CSS defines a base '.note' class with a light yellow background, light grey border, padding, margin, rounded corners, and a specific font family.
Additional classes ".danger", ".success", and ".info" modify the background color to red, green, and blue respectively, for different types of notes.
These classes can be applied to any div with the class 'note' to indicate different statuses or categories of notes.
Similarly, in the second example The CSS styles '.decorative-note' class adds a dark teal left border, padding, margin, and a light bulb emoji as a decorative element using the ':: before' pseudo-element.

Example 1: In the below example the HTML creates three notes with these styles applied. the CSS styles the .note class with a light yellow background, padding, margin, rounded corners, and Arial font, while additional classes .danger, .success, and .info provide different background colors for indicating various statuses.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .note {
            background-color: #ffffe0;
            border: 1px solid #ddd;
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            font-family: Arial, sans-serif;
        }

        .danger {
            background-color: #ffdddd;
        }

        .success {
            background-color: #ddffdd;

        }

        .info {
            background-color: #e7f3fe;

        }
    </style>
    <div class="note danger">
        This is a basic note.
    </div>
    <div class="note success">
        This is a basic note.
    </div>
    <div class="note info">
        This is a basic note.
    </div>


</body>

</html>

Output:

Example 2: In the below example the HTML creates three notes with these decorative styles applied. The CSS styles the .decorative-note class with a dark teal left border and an icon, while additional classes .danger, .success, and .info provide different background colors.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Decorative Note</title>
</head>

<body>
    <style>
        .decorative-note {
            padding: 10px 15px;
            margin: 10px 0;
            position: relative;
            font-family: Arial, sans-serif;
        }

        .decorative-note::before {
            content: "? ";
            font-size: 20px;
            position: absolute;
            left: -1px;
            top: 5px;
        }

        .danger {
            background-color: #ffdddd;
            border-left: 5px solid #a42020;
        }

        .success {
            background-color: #ddffdd;
            border-left: 5px solid #00796b;

        }

        .info {
            background-color: #e7f3fe;
            border-left: 5px solid #6aa1d4;

        }
    </style>
    <div class="decorative-note danger ">
        &nbsp; This note has decorative elements.
    </div>
    <div class="decorative-note success">
        &nbsp; This note has decorative elements.
    </div>
    <div class="decorative-note info">
        &nbsp; This note has decorative elements.
    </div>

</body>

</html>

Output:

How to Create a Sidebar in NextJS & Tailwind CSS?

heysaiyad

Improve

Article Tags :

How to Create Notes using CSS?

Approach

Similar Reads

Thank You!

What kind of Experience do you want to share?