Styling Definition Lists with the BlueTrip CSS Framework
Welcome to the fifth part of a seven-part series on the BlueTrip CSS framework. In this part, you'll learn how to style definition lists with BlueTrip and how to assign its default “fancy” CSS classes to a few H2 and H3 headers. You'll see that this flexible framework allows you to apply different styles to web page elements in a quick and simple manner.
Styling Definition Lists with the BlueTrip CSS Framework - Quickly styling definition lists with BlueTrip (Page 3 of 4 )
In reality, the process of styling definition lists by using the default CSS styles given by BlueTrip doesn't differ too much from using ordered and unordered HTML lists. All that is needed in this case is to include the definition lists in a web page; BlueTrip will simply do the rest automatically.
To clarify how BlueTrip deals with definition lists, here's another code sample that incorporates these elements into a simple web page. Look at it, please:
<!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 definition lists</h1>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<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>
<dl>
<dt>Definition list title 1</dt>
<dd>Description list 1</dd>
<dt>Definition list title 2</dt>
<dd>Description list 1</dd>
<dd>Description list 2</dd>
</dl>
</div>
<div class="span-8">
<h2 class="caps">Level 2 heading</h2>
<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>
<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-16">
<h2 class="caps">Level 2 heading</h2>
<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>
<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>
As you can see, the above web document includes a simple definition list with a few items. Now here's where things get really interesting; if you try out this example on your browser, then you'll get an output very similar to the one below:
Not too bad, right? In this case, BlueTrip has done its job, and the definition list mentioned previously has been provided with a decent appearance. Of course, it's always possible to enhance the styles assigned to different HTML elements by default by the framework, but for now this will be left as homework for you.
So far, so good. Now that I've discussed how to style definition lists, it's time to explore some other capabilities provided by the framework. With that idea in mind, in the last section of this tutorial I'm going to explain how to assign the "fancy" CSS classes that you learned in previous tutorials of the series to H2 and H3 HTML headers.
To see how this will be accomplished, click on the link below and read the next few lines.
Style Sheets 
HTML5 Boilerplate Introduction
