More Uses for the Thin and Caps CSS Classes in BlueTrip
In this sixth part of a seven-part series on the BlueTrip CSS framework, you will learn how to assign the “thin” and “caps” CSS classes to H2 and H3 elements of a web page. The use of these classes makes the elements look more elegant and visually appealing.
More Uses for the Thin and Caps CSS Classes in BlueTrip - Review: styling definition lists with BlueTrip (Page 2 of 4 )
Just in case you haven’t read the previous article, where I discussed how to style definition lists by means of the default CSS styles given by BlueTrip, below I included an example which shows how to accomplish this task in a few simple steps.
<!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>
From the above example, it’s clear how simple it is to style definition lists by using the CSS classes provided by default by BlueTrip. In this case, the code of the previous (X)HTML file is very easy to follow, so skip over it and pay attention to the following image, which shows the corresponding output generated by the browser:
Well, now that you’ve recalled how to style definition HTML lists with the BlueTrip CSS framework, it’s time to explore some of its other handy features. In the next section I’m going to discuss how to assign the already familiar “thin” CSS classes to the H3 elements of a basic web page.
The whole styling process will be really interesting, trust me. To learn more about it, click on the link that appears below and read the following segment.
Style Sheets 
HTML5 Boilerplate Introduction
