W3CSS Notes

W3CSS Notes are used to create typical note type elements on a webpage. A note is an element that is used to convey short but important message that should be prominent on the webpage. In W3CSS, you can create variety of notes using combination of w3-panel, w3-pale-color, w3-border-color, w3-leftbar and w3-rightbar classes. In this article, we shall see different types of notes along with their code.

Simple W3CSS Note

To create a simple note, with a pale background you only need two classes w3-panel and w3-pale-color. Take a a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-blue">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    

</html>

Download the code Try the code

W3CSS Notes with Left or Right Border Bars

To enhance visual aesthetics of a note, sometime a left border or right border is added to a note. To do so, simply add class w3-leftbar, w3-rightbar along with classes for panel, border and background color. You can also add both the right and left borders using both the w3-leftbar and w3-rightbar classes. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-blue w3-rightbar w3-border-yellow">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    
    <br>
    
    <div class="w3-panel w3-pale-blue w3-leftbar w3-border-yellow">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    
    <br>
    
    <div class="w3-panel w3-pale-blue w3-rightbar w3-leftbar w3-border-yellow">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    

</html>

Download the code Try the code

If you open the above webpage in a browser, you shall see three notes. All the three notes will have a pale blue background. The first note will have a right border, the second will have a left border while the third will have both the right and left borders.

W3CSS Notes with Top or Bottom Border Bars

Apart from right and left bars, you can also add top and bottom bars. To do so, simply add class w3-bottombar, w3-topbar along with classes for panel, border and background color. You can also add both the top and bottom border bars using both the w3-topbar and w3-bottombar classes. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    <div class="w3-panel w3-pale-red w3-topbar w3-border-red">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    
    <br>
    
    <div class="w3-panel w3-pale-red w3-bottombar w3-border-red">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    
    <br>
    
    <div class="w3-panel w3-pale-red w3-topbar w3-bottombar w3-border-red">
        <p>Nothing is more important in this world than loyalty.<p>
    </div>
    

</html>

Download the code Try the code

If you open the above webpage in a browser, you shall see three notes. All the three notes will have a pale red background. The first note will have a top border, the second will have a bottom border while the third will have both the top and bottom borders.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .