Styling Definition Lists with the BlueTrip CSS Framework - Styling different HTML headers
(Page 4 of 4 )
In a previous chapter of the series I explained briefly how to assign the "fancy" CSS class provided by BlueTrip to a few H1 elements. Now it's time to show you how to perform this task with H2 and h3 headers as well.
The code sample below does that:
<!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 h2 and h3 heading levels with fancy 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="caps">BlueTrip CSS Grid example using h2 and h3 heading levels with fancy class</h1>
</div>
<div class="span-8">
<h2 class="fancy">Level 2 heading</h2>
<h3 class="fancy">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="fancy">Level 2 heading</h2>
<h3 class="fancy">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="fancy">Level 2 heading</h2>
<h3 class="fancy">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="fancy">Level 2 heading</h2>
<h3 class="fancy">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="fancy">Level 2 heading</h2>
<h3 class="fancy">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>
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. |
