STYLE SHEETS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

November 17, 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="fancy">Level 2 heading</h2>

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

</div>

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

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

</div>

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

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

</div>

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

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

</div>

</body>

</html>

The above code sample demonstrates how to assign the "fancy" CSS class to all of the h2 and h3 headers included in the pertinent web document. Since the code speaks for itself, I suggest you look at the following image, which shows the output generated by the browser:

Here you have it. At this point, you learned how to turn h2 and h3 headers into truly elegant elements by using the handy "fancy" CSS class packaged with BlueTrip. As usual, feel free to edit all of the code samples created in this article, so you can get a more solid background in the numerous features offered by this popular CSS framework.

Final thoughts

In this fifth chapter of this series, you learned how to style definition lists with BlueTrip and how to assign its default "fancy" CSS classes to a few H2 and H3 headers. From the examples developed earlier, it's clear to see that the framework allows you to apply different styles to web page elements in a quick and simple manner.

In the forthcoming part, I'm going to discuss how to assign the "thin" and "caps" CSS classes reviewed in previous articles to H2 and H3 elements as well. So here's my suggestion: don't miss the next tutorial!

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.