How to create Notes with HTML and CSS

Notes are the common feature in websites and web applications. Notes can be used to notify the user about something special: danger, success, information or warning.

In this tutorial, I will show you how to create notes by using HTML and CSS. I will show you how to create two types of notes; Notes with square corners and rounded corners notes.

Step 1. Copy the HTML codes below to you codes. It includes rounded corners and square corners notes

<h2>Square Corners Notes</h2> 
<div class="danger notes"> 
    <p><strong>Danger!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
 
<div class="success notes"> 
    <p><strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
 
<div class="info notes"> 
    <p><strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
 
<div class="warning notes"> 
    <p><strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
<h2>Rounded Corners Notes</h2> 
<div class="danger_rounded notes"> 
    <p><strong>Danger!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
<div class="success_rounded notes"> 
    <p><strong>Success!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
 
<div class="info_rounded notes"> 
    <p><strong>Info!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div> 
 
<div class="warning_rounded notes"> 
    <p><strong>Warning!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p> 
</div>

Step 2. Copy the Notes CSS codes below to your codes. You may add them in <head>…</head> part or in your CSS file.

.notes { 
    margin-bottom: 15px; 
    padding: 4px 12px; 
} 
 
.danger { 
    background-color: #ffdddd; 
    border-left: 6px solid #f44336; 
} 
 
.success { 
    background-color: #ddffdd; 
    border-left: 6px solid #4CAF50; 
} 
 
.info { 
    background-color: #e7f3fe; 
    border-left: 6px solid #2196F3; 
} 
 
 
.warning { 
    background-color: #ffffcc; 
    border-left: 6px solid #ffeb3b; 
} 
.danger_rounded { 
    background-color: #ffdddd; 
    border-left: 6px solid #f44336; 
    border-radius: 0px 10px 10px 0px; 
} 
 
.success_rounded { 
    background-color: #ddffdd; 
    border-left: 6px solid #4CAF50; 
    border-radius: 0px 10px 10px 0px; 
} 
 
.info_rounded { 
    background-color: #e7f3fe; 
    border-left: 6px solid #2196F3; 
    border-radius: 0px 10px 10px 0px; 
} 
 
 
.warning_rounded { 
    background-color: #ffffcc; 
    border-left: 6px solid #ffeb3b; 
    border-radius: 0px 10px 10px 0px; 
}

Step 3. Save and preview your work

I hope now you are able to create notes with HTML and CSS on your website. Feel free to share this post or to leave your feedback in the comment bellow.

Post Views: 999