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">
  <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! »