Using the BlueTrip CSS Framework`s Thin and Caps Classes - Working with the thin CSS class
(Page 3 of 4 )
If you're not completely satisfied with the visual appearance achieved when using the "fancy" CSS class that you learned before, the BlueTrip framework provides other classes that will produce useful variations of any text-based element included in a web document.
To demonstrate this concept more clearly, I'm going to develop a brand new example. It will assign another CSS class called "thin" to some H2 headers within a basic web page to make them look thinner. The example looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using BlueTrip (using the thin class)</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/print.css" type="text/css" media="print">
<!--[if IE]>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection">
<![endif]-->
</head>
<body>
<div class="container">
<div class="span-24">
<h1 class="thin">BlueTrip CSS Grid example using the thin class</h1>
</div>
<div class="span-8">
<h2 class="thin">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">
<h2 class="thin">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="thin">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="thin">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="thin">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 show before, the above sample web page not only creates a simple layout using the already familiar "span-x" CSS classes that you learned in previous chapters of this series, but it assigns the "thin" CSS classes to a few H2 elements, making them look a bit more elegant. Of course, this particular class (and others, naturally) can be applied to any text-based element of the web page, so I suggest you do that as homework.
In addition to the above code sample, here's a complementary image that shows how the H2 headers of the example page are displayed after assigning the "thin" CSS class to them. Here it is:
Not too bad, right? Undeniably, BlueTrip provides web designers with a solid foundation of CSS classes that permits you to change the look of HTML headers, paragraphs, lists and so forth very easily. And speaking of the visual appearance of text-based elements, what if you wish to make them be displayed entirely in upper case in the browser?
Well, thanks to the existence of another CSS class that comes with BlueTrip called "caps," this process can be accomplished with minor hassles. I'd like to finish this tutorial by showing you a simple usage of this specific class.
Therefore, to learn how this will be utilized in a concrete example, read the upcoming section. It's only one click away.
Next: Using the caps CSS class >>
More Style Sheets Articles
More By Alejandro Gervasio
