How To Create Notes With CSS

Learn How to Create Notes with CSS

CSS Notes

Notes can be used to notify the user about something special: default/simple, danger, success, information or warning.

Simple! Some text…

Danger! Some text…

Success! Some text…

Info! Some text…

Warning! Some text…

Create CSS Notes

Step 1) Add HTML

<div class="simple">
  <p><strong>Simple!</strong> Some text...</p>
</div>

<div class="danger">
  <p><strong>Danger!</strong> Some text...</p>
</div>

<div class="success">
  <p><strong>Success!</strong> Some text...</p>
</div>

<div class="info">
  <p><strong>Info!</strong> Some text...</p>
</div>

<div class="warning">
  <p><strong>Warning!</strong> Some text...</p>
</div>

Step 2) Add CSS

<style>
div {
    margin-bottom: 15px;
    padding: 4px 12px;
    font-size: 17px;
}

.simple {
    background-color: #f1f1f1;
    border-left: 7px solid #5f5f5f;
}

.danger {
    background-color: #ffdddd;
    border-left: 7px solid #f44336;
}

.success {
    background-color: #ddffdd;
    border-left: 7px solid #4CAF50;
}

.info {
    background-color: #e7f3fe;
    border-left: 7px solid #2196F3;
}


.warning {
    background-color: #ffffcc;
    border-left: 7px solid #ffeb3b;
}
</style>

Complete Code

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin-bottom: 15px;
    padding: 4px 12px;
    font-size: 17px;
}

.simple {
    background-color: #f1f1f1;
    border-left: 7px solid #5f5f5f;
}

.danger {
    background-color: #ffdddd;
    border-left: 7px solid #f44336;
}

.success {
    background-color: #ddffdd;
    border-left: 7px solid #4CAF50;
}

.info {
    background-color: #e7f3fe;
    border-left: 7px solid #2196F3;
}


.warning {
    background-color: #ffffcc;
    border-left: 7px solid #ffeb3b;
}
</style>
</head>
<body>

<h2>Notes</h2>
<div class="simple">
  <p><strong>Simple!</strong> Some text...</p>
</div>

<div class="danger">
  <p><strong>Danger!</strong> Some text...</p>
</div>

<div class="success">
  <div class='code-block code-block-2' style='margin: 8px auto 8px 0; text-align: left; display: block; clear: both;'>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Inside post_beginnersbook1 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-3263020117496112"
     data-ad-slot="3730344728"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<p><strong>Success!</strong> Some text...</p>
</div>

<div class="info">
  <p><strong>Info!</strong> Some text...</p>
</div>

<div class="warning">
  <p><strong>Warning!</strong> Some text...</p>
</div>

</body>
</html>

Try it Yourself! »