Using BlueTrip`s Success, Notice and Error CSS Classes
Welcome to the final installment of a series on the BlueTrip CSS framework. Made up of seven comprehensive tutorials, this series shows you how to master the main CSS classes that come bundled with BlueTrip through a decent variety of code samples.
Using BlueTrip`s Success, Notice and Error CSS Classes - Showing notices and warnings with BlueTrip (Page 3 of 4 )
Showing notices and warnings: working with the "notice" CSS class
As its name implies, the "notice" CSS class provided by BlueTrip is used for displaying notices and warnings. That's it. So what is the difference between this one and the "successful" class discussed in the previous section? Well, not much really, since when an element is styled with the "notice" class, it'll be assigned a yellow background color.
The code sample below shows how to use this CSS class with a few paragraphs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<h1 class="caps">BlueTrip CSS Grid example using notice class</h1>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-8 last">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p class="notice">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-16">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="span-8 last">
<h2 class="caps">Level 2 heading</h2>
<h3 class="caps">Level 3 heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</body>
</html>
If you examine the above example, you'll realize that it looks nearly identical to the one created in the preceding segment, except for one subtle difference: there are three paragraphs that have been assigned the "notice" CSS class.
Logically, the code sample itself won't tell you much about how these paragraphs look, but the following image should dissipate any possible doubts that you might have:
As you can see, the "notice" CSS class should be utilized for displaying some kind of warning on a web site in the appropriate cases, and it can be easily enhanced by adding custom styles as well.
So far, so good. Now that you've grasped the logic that stands behind applying "notice" CSS classes to elements of a web document, it's time to examine another default CSS class bundled with BlueTrip. In this case, I'm talking about the "error" class, which should be used for displaying error messages on a web page.
This topic will be discussed in depth in the last section of this article.
Style Sheets 
HTML5 Boilerplate Introduction
