Styling Unordered and Ordered HTML Lists with BlueTrip
Welcome to the fourth part of a seven-part series on the BlueTrip CSS framework. In this part, I explain how to use the framework's default styles to enhance the visual appearance of both ordered and unordered HTML lists. This is an easy and straightforward process.
Styling Unordered and Ordered HTML Lists with BlueTrip - Styling ordered HTML lists (Page 4 of 4 )
As I stated previously, the last example that I'm going to create for this tutorial will demonstrate how to style ordered lists with BlueTrip. As with unordered HTML lists, the framework provides a default style for these elements that make them look pretty polished.
The code sample below creates a basic web page in which some ordered lists have been included:
<!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 ordered lists</h1>
</div>
<div class="span-8">
<h2 class="caps">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>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
</ol>
</li>
</ol>
</li>
</ol>
</div>
<div class="span-8">
<h2 class="caps">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="caps">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="caps">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="caps">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>
Even though the above code sample looks very similar to the one developed in the previous segment, in this case it shows how an ordered HTML list is displayed with the BlueTrip styles applied to it. Of course, this example would be incomplete if I didn't show the screen capture that depicts the browser's output. Here it is:
Definitely, understanding how to work with ordered lists and BlueTrip is an extremely simple process, so I won't spend more time explaining how the previous example works. However, I do encourage you to try including other HTML elements to see how they're rendered using the default styles provided by the framework. It'll be an educational experience, trust me.
Final thoughts
In this fourth part of the series, I explained how to use the default styles provided by BlueTrip to enhance the visual appearance of both ordered and unordered HTML lists. As you saw, this is a simple process, so you shouldn't have major problems grasping its logic.
In the upcoming article, I'm going to discuss how to work with definition lists when using the BlueTrip CSS framework. Therefore, now that you've been warned about the topics that will be covered in the next tutorial, you can't miss it!
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.
Style Sheets 
HTML5 Boilerplate Introduction
