Home
CSS Tutorials
HTML Tutorials

Notes Area Using HTML and CSS

Learn how to create a stylish CSS Notes Area with unique colors, icons, gaps, and live previews for each note.
Mr.Shiva

CSS Notes Area Tutorial with Preview

css notes

Creating a CSS Notes Area allows you to highlight important information, tips, warnings, or errors in your HTML content. Each note can have unique colors, icons, and spacing for clarity.

Step 1: Add HTML Notes


<div class="alphaarp-notes1">Info: This is a sample text.</div>
<div class="alphaarp-notes2">Success: This is a sample text.</div>
<div class="alphaarp-notes3">Warning: This is a sample text.</div>
<div class="alphaarp-notes4">Danger: This is a sample text.</div>
<div class="alphaarp-notes5">Tip: This is a sample text.</div>
<div class="alphaarp-notes6">Neutral: This is a sample text.</div>

Step 2: Add CSS Styles


.alphaarp-notes1 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #2b7cff; background:#e8f4ff; color:#05305f; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes1::before { content:"ℹ️"; font-size:1.2rem; }


.alphaarp-notes2 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #16a34a; background:#ecfbf0; color:#064e2b; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes2::before { content:"✅"; font-size:1.2rem; }


.alphaarp-notes3 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #d97706; background:#fff8e6; color:#5a3606; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes3::before { content:"⚠️"; font-size:1.2rem; }


.alphaarp-notes4 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #dc2626; background:#fff1f1; color:#5a1212; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes4::before { content:"❌"; font-size:1.2rem; }


.alphaarp-notes5 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #0ea5e9; background:#f0f7ff; color:#053047; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes5::before { content:"💡"; font-size:1.2rem; }


.alphaarp-notes6 { display:flex; align-items:center; gap:10px; padding:12px;
  border-left:4px solid #6b7280; background:#fafafa; color:#111827; border-radius:10px; margin-bottom:15px; }
.alphaarp-notes6::before { content:"📝"; font-size:1.2rem; }

Live Preview:

Info: This is a sample text.
Success: This is a sample text.
Warning: This is a sample text.
Danger: This is a sample text.
Tip: This is a sample text.
Neutral: This is a sample text.

Conclusion

The CSS Notes Area improves readability and helps users quickly identify information types. Customize icons, colors, and spacing to match your website.

Post a Comment