Create Notes with CSS

To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes.

Set Different Divs for Notes

Here, we are creating three notes,representing danger success and information. We have set different divs −

<div class="danger">
   <p><strong>Danger!</strong>Operation may damage your computer</p>
</div>
<div class="success">
   <p><strong>Success!</strong>Operation has been performed successfully</p>
</div>
<div class="info">
   <p><strong>Info!</strong>Need more resources to perform this operation</p>
</div>

Danger Note

For our example, we have styled a design representing a danger note −

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

Success Note

For our example, we have styled a design representing an information note −

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

Information Note

For our example, we have styled a design representing an information note −

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

Example

To create ?notes' with CSS, the code is as follows −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      div {
         margin-bottom: 15px;
         padding: 4px 12px;
         font-size: 18px;
     }
      .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;
      }
   </style>
</head>
<body>
   <h1 style="text-align: center;">Notes Example</h1>
   <div class="danger">
      <p><strong>Danger!</strong>Operation may damage your computer</p>
   </div>
   <div class="success">
      <p><strong>Success!</strong>Operation has been performed successfully</p>
   </div>
   <div class="info">
      <p><strong>Info!</strong>Need more resources to perform this operation</p>
   </div>
</body>
</html>
Updated on: 2023-11-17T09:54:18+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements