Styling Unordered and Ordered HTML Lists with BlueTrip (By: Alejandro Gervasio)

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.

If you ever wondered what makes a CSS framework a solid web design tool, then you may realize that it must provide a well-trusted set of style resetting classes and a clean background grid, plus the ability to quickly style common HTML elements in different ways, such as headers and paragraphs, lists and links, forms and tables, and so forth.

Fortunately, nowadays there’s a group of CSS frameworks that suit most of these requirements. This list includes BlueTrip, which claims to put together the best features offered by BluePrint CSS and Tripoli (hence its name). So, if you’re a web designer who’s searching for a comprehensive guide that shows you how to work with this popular CSS framework, then this group of articles might be the material that you need.

And now that you’ve been introduced to the main goal of this series, it’s a good time to review the topics that were covered in the last article. In that article I developed a few basic examples that demonstrated how to use the “thin” and “caps” CSS classes that come with BlueTrip to produce some elegant variations of H2 headers.

Nonetheless, when it comes to styling text-based web page elements quickly, BlueTrip offers numerous interesting and appealing possibilities. Thus, in this fourth part of this series I’m going to discuss how to style both ordered and unordered lists using the default CSS classes provided by BlueTrip.

Now, it’s time to take a closer look at the specific capabilities offered by the BlueTrip CSS framework.

Styling Unordered and Ordered HTML Lists with BlueTrip – Review: the thin and caps CSS classes

In the previous installment I explained how to assign the “thin” and “caps” CSS classes that come with BlueTrip to style some H2 headers on a basic web page. Below I reintroduced a couple of examples developed in that article that show how to accomplish this process in a simple manner. Here they are:

(example on using the ‘thin’ CSS class)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using BlueTrip (using the thin class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the thin class</h1>

</div>

<div>

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

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

</body>

</html>

(example on using the 'caps' CSS class)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Basic example on using BlueTrip (using the caps class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the caps class</h1>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

</body>

</html>

As you can see from the code samples shown above, it’s extremely easy to produce fancy variations of H2 headers and other text-based web page elements by means of the ”thin” and “caps” CSS classes. In the first case, the output generated by the browser will look similar to the following image:

While in the second example, the styled H2 headers will be displayed all upper cased, since that’s the purpose of the “caps” class. Here’s a complementary graphic that shows how these styles are rendered on screen:

Well, at this stage you’ll surely remember how to use the previous CSS classes in concrete cases. Thus, it’s time to explore other useful capabilities offered by BlueTrip.

As I expressed in the introduction, BlueTrip provides other default styles that will be automatically applied to other common web page elements such as unordered HTML lists. Therefore, in the next segment I’m going to code an example that will demonstrate how to accomplish this task.

To learn more on this topic, click on the link below and keep reading.

Styling Unordered and Ordered HTML Lists with BlueTrip – Styling unordered HTML lists

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

<head>

<title>Basic example on using BlueTrip (using unordered lists)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using unordered lists</h1>

</div>

<div>

<h2>Level 2 heading</h2>

<ul>

<li>List Item 3

<ul>

<li>Sub List Item 2

<ul>

</ul>

</li>

</ul>

</li>

</ul>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

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

Styling Unordered and Ordered HTML Lists with BlueTrip – Styling ordered HTML lists

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

<head>

<title>Basic example on using BlueTrip (using unordered lists)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using ordered lists</h1>

</div>

<div>

<h2>Level 2 heading</h2>

<ol>

<li>List Item 3

<ol>

<li>Sub List Item 2

<ol>

</ol>

</li>

</ol>

</li>

</ol>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

</div>

<div>

<h2>Level 2 heading</h2>

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

Member Login or Register Here

Products & Services

Knowledgebase

Styling Unordered and Ordered HTML Lists with BlueTrip (By: Alejandro Gervasio)