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 - Tying thin CSS classes to H3 elements (Page 3 of 4 )
As I expressed in the section that you just read, it’s possible to assign the “thin” CSS class provided by default by BlueTrip to any text-based HTML element. In a previous tutorial of the series, I explained how to use the class with H2 headers, but in this particular case I’d like you to see how this same process can be applied to H3 headers as well.
Basically, the code sample that performs this task is as follows:
<!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 h2 and h3 heading levels with fancy class</h1>
</div>
<div class="span-8">
<h2 class="thin">Level 2 heading</h2>
<h3 class="thin">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">
<h2 class="thin">Level 2 heading</h2>
<h3 class="thin">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="thin">Level 2 heading</h2>
<h3 class="thin">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-16">
<h2 class="thin">Level 2 heading</h2>
<h3 class="thin">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="thin">Level 2 heading</h2>
<h3 class="thin">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>
As shown above, it’s extremely simple to turn H2 and H3 elements into thinner ones, by assigning to them the “thin” CSS class. What’s more, the following image should give you a clear idea of how these elements are rendered on the browser after being styled:
Pretty nice, huh? It’s clear to see how easy it is to create a fully-styled web page layout with BlueTrip. But there’s more to come. It's also feasible to convert text-base HTML elements to their upper case versions by means of the “caps” CSS class that you learned in a preceding article of this series.
With this idea in mind, in the section to come I’m going to develop another example similar to the one that you just saw, but this time the H2 and H3 headers will be styled with the “caps” class.
To learn the full details of this styling process, click on the link below and read the following segment.
Style Sheets 
HTML5 Boilerplate Introduction
