How to Create Important Notes Area in HTML/CSS
In this article, We are creating Important Notes area in HTML/CSS. This article will demonstrate the example of creating important notes area on your website. If you are thinking what is the important area is all about. The important area is the noticeable area which you wanted to notice by someone. It is really very important when you want to notice someone some important thing. We will show you how it looks like.
You can understand it with this image.
I think now you better understand it.
You will see this Important Notes area on this website also. In this article, we will create this area in HTML and CSS.
You can use this anywhere you want.
Let’s jump into the code.
First, You need to create an HTML file. In this file, we will add code to generate this design. Then we will link Style.css file to Index.html file.
Import this code into the index.html file.
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="Style.css" />
<h6 class="wodpress-primary html">HTML5/CSS3</h6>
<h6 class="wodpress-primary asp">Asp.net</h6>
<h6 class="wodpress-primary php">PHP 7</h6>
<h6 class="wodpress-primary boot">Bootstrap 4</h6>
In this code, we had added simple HTML5 Code.
So we had created division with notes class. we are creating this class in style.css to impart color.
After that, we had added h6 level heading tag. This class demonstrates your important notes text. This h6 level heading contains the classes HTML, asp, PHP, bootstrap, and WordPress.
Ok Now we will add code to Style.css file. This file contains the design of your tutorial. Using CSS we will color it and add some border left and more.
So let’s look at the code.
border-left: 3px solid #FF7723;
margin: 5px 8px;
border-left: 3px solid #3A1772;
border-left: 3px solid #FF0054;
border-left:3px solid black;
So when you import this code into the style.css file you will see the result which is shown in the image.
Now your Important Notes Area with HTML/CSS is created.
You can use this on any blog, website and also on WordPress site.
I hope you learn everything about this tutorial. If you find anything useful then share this video.
Look out some more important article of HTML and Bootstrap. We will see you in the next article.
If you have any question then comment me in the comment section.
Follow us on Facebook and Instagram. Also, subscribe to our youtube channel Daily Tuition.