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 unordered HTML lists (Page 3 of 4 )
As with other CSS frameworks, BlueTrip allows you to set default styles for both unordered and ordered HTML lists. In this case, I'm going to create a whole new example for you, which will show how unordered lists are displayed on the browser when using the "screen.css" file of the framework.
That being explained, here's how this new example looks:
<!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 unordered 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>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</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>
True to form, the above code sample is very simple to follow. All it does is create a basic web page layout, where one of its containers includes a set of nested unordered HTML lists. So far, this is nothing unusual; however, things will become more interesting if you look at the following image, which shows how these lists are displayed on the browser. Here it is:
From the above picture, it's clear to see how simple and quick styling unordered lists can be when using the BlueTrip CSS framework. Of course, it might not be the best style that can be assigned to these web page elements, but they do look quite elegant and professional.
Having explained briefly how to style unordered HTML lists with BlueTrip, I'm now going to show you how to do the same process with ordered lists. Naturally, I'll cover this topic in the next section, so click on the link below and keep reading.
Style Sheets 
HTML5 Boilerplate Introduction
