W3.CSS Notes
Notes and Information
Notes are used to highlight information that deserves extra attention.
In W3.CSS, notes are commonly created with w3-panel.
Simple Note Styles
Notes can be styled with ordinary W3.CSS colors, borders, and round classes.
Note: Save your work before continuing.
Tip: Use meaningful class names in your HTML.
Remember: Test your page on different screen sizes.
Example
<p><b>Note:</b> Save your work before continuing.</p>
</div>
<div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue">
<p><b>Tip:</b> Use meaningful class names in your HTML.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-border w3-border-yellow">
<p><b>Remember:</b> Test your page on different screen sizes.</p>
</div>
Build a Helpful Tip
A good note should be noticeable without distracting from the main content.
Tip
Use max-width:100% to prevent fixed-width content from becoming wider than its parent.
Example
<h3>Tip</h3>
<p>Use max-width:100% to prevent fixed-width content from becoming wider than its parent.</p>
</div>
Use Colors Carefully
Do not rely on color alone to communicate meaning.
Include clear text such as Note, Warning, or Error.
Note Classes
W3.CSS 5 provides 5 semantic classes for notes.
Different colors suggest different meanings:
| Style | Typical Meaning |
|---|---|
w3-note |
General note or reminder |
w3-info |
Information |
w3-success |
Successful result |
w3-warning |
Warning |
w3-danger |
Danger or error |
The w3-note Class
Note
W3.CSS uses standard CSS only. No JavaScript library is required.
Example
<h3>Note</h3>
<p>W3.CSS uses standard CSS only. No JavaScript library is required.</p>
</div>
Use w3-note when the color should communicate the meaning of a note.
The w3-info Class
Information
Your profile was updated.
Example
<h3>Information</h3>
<p>Your profile was updated.</p>
</div>
The w3-success Class
Success
Your changes were saved.
Example
<h3>Success</h3>
<p>Your changes were saved.</p>
</div>
The w3-warning Class
Warning
Your subscription expires soon.
Example
<h3>Warning</h3>
<p>Your subscription expires soon.</p>
</div>
The w3-danger Class
Danger
Something went wrong.
Example
<h3>Danger</h3>
<p>Something went wrong.</p>
</div>
What You Have Learned
- Notes highlight information that deserves attention
- Panels can also be styled with pale colors, borders, and round classes
- Color can support meaning, but text should explain the message
- Notes should be noticeable without dominating the page
More Examples
Explore more ways to style W3.CSS notes.
Grey with Rounded Border
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>
Pale Blue with Side Bars
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>
Pale Red with Left Bar
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>
Pale Yellow with Border
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>
Pale Green with Bottom Bar
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>
Yellow with Top and Bottom Bars
London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Example
<p>This is a note.</p>
</div>