STYLE SHEETS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

November 18, 2009

TABLE OF CONTENTS:

<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>

<h2 class="caps">Level 2 heading</h2>

<h3 class="caps">Level 3 heading</h3>

</div>

<h2 class="caps">Level 2 heading</h2>

<h3 class="caps">Level 3 heading</h3>

</div>

<h2 class="caps">Level 2 heading</h2>

<h3 class="caps">Level 3 heading</h3>

</div>

<h2 class="caps">Level 2 heading</h2>

<h3 class="caps">Level 3 heading</h3>

</div>

</body>

</html>

Here you have it. From the above code sample, it’s clear to see that upper-casing H2 and H3 headers is a truly straightforward process that can be tackled with minor effort.

Considering that the previous example is indeed way too easy to follow, you should look at the following screen shot, which shows how these HTML headers are displayed on screen after being styled with the “caps” CSS class:

As you might have guessed, it’s also possible to upper case all of the text-based HTML elements of a web document by using the “caps” class. In this particular case I decided to perform this task only with H2 and H3 headers, but you can try it out with lists, paragraphs, and so forth. The possibilities are endless.

And finally, feel free to edit all of the code samples shown in this article to help you build a better background in using the most relevant styles that come packaged by default with the BlueTrip CSS framework. The experience will be educational and why not, also fun!

Final thoughts

In this sixth episode of the series, you learned how to assign the “thin” and “caps” CSS classes provided by BlueTrip to H2 and H3 elements of a web page. As you saw in the complementary images that accompanied each of the previous code samples, the use of these classes makes the elements look more elegant and visually appealing.

Moving forward, in the last installment I’m going to demonstrate how to work with three useful classes that come with this framework, called “success,” “warning” and “error” respectively. As their names suggest, they can be used for informing users in a visual and clean way when some of these events occur.

Don’t miss the last part of the series!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.