Adding Borders to Web Page Columns with BlueTrip CSS (By: Alejandro Gervasio)

Adding Borders to Web Page Columns with BlueTrip CSS

In this second part of a series introducing the BlueTrip CSS framework, I show you how to use some handy CSS classes that come with it to add borders to the columns of a web page and create truly fancy H2 headers.

Without a doubt, CSS frameworks help shorten the time required for developing web sites. As you may know, there are a few powerful contenders in this terrain that have gained considerable popularity over time. This is due to their handy features, such as the inclusion of well-trusted resetting capabilities, text and web form styling, complete printer-friendly style sheets and so forth.

Among the numerous CSS frameworks available nowadays that have become the preferred tool of many web designers, BlueTrip is quite possibly one of the most popular. It claims to put together the best features provided by the BluePrint CSS and Tripoli frameworks, and that seems to be more than a marketing trick.

So, if you’re interested in learning how to work with the BlueTrip CSS framework, then this series of articles might be what you’re looking for. If you’ve already read the introductory tutorial, then you know how to create basic web page layouts with BlueTrip.

In that specific article, I explained how to use the framework’s generic span-x CSS classes to build two simple web pages. In the first case, the background grid used to align element on the web document was displayed on screen, while in the second example the grid was hidden from view thanks to the manipulation of the “showgrid” CSS class, which was alternately assigned and removed from the markup.

However, I’m only scratching the surface of the useful capabilities offered by BlueTrip. In the next few lines I’m going to explain how to use some of its CSS classes to add borders to columns of a web page and to apply elegant styles to HTML headers.

Now, it’s time to continue discovering the numerous features that come packaged with the BlueTrip CSS framework. Let’s get going!

Adding Borders to Web Page Columns with BlueTrip CSS – Review: generic span-x CSS classes

Below I’ve reintroduced one of the examples I used in the previous article to show you how to use the BlueTrip CSS framework to build a simple web page layout. it works by using the framework’s generic “span-x” CSS classes. Here it is:

<!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 (showing the background grid)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example showing the grid</h1>

</div>

<div>

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

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

As shown above, creating a simple web page layout with BlueTrip is only a matter of utilizing the generic “span-x” and “last” CSS classes in accordance with the type of design that needs to be built. In this case, the previous web document uses an additional “showgrid” CSS class to display the background grid, but naturally in production environments it should be hidden from view.

Undoubtedly, understanding the logic that BlueTrip implements to create and position columns across a web page is very simple, even when the CSS classes used during this process lack a truly semantic meaning. So, assuming that you’re familiar with the basics of working with the previous “span-x” classes, it’s time to explore a few more features of the framework.

Thus, in consonance with the concepts deployed in the introduction, in the section to come I’m going to explain how to use another CSS class provided by BlueTrip for adding subtle borders to columns of a web page.

To learn the details of this process, click on the link below and keep reading.

Adding Borders to Web Page Columns with BlueTrip CSS – Adding borders to web page columns

As with every feature offered by BlueTrip, adding borders to the columns of a web page is reduced to assigning a generic CSS class, not surprisingly called “border,” to selected elements.

However, to understand more clearly how to add some subtle borders to certain containers, below I coded a whole new example that uses the CSS class to accomplish this task in a few simple steps:

<!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 border class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

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

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

As you can see, the above example looks pretty similar to the one that you saw in the previous segment, with one slight difference: a couple of web page columns have been assigned the “border” CSS class, which adds a fancy border to the right of those elements, in this way making them look a bit more elegant.

In addition, here’s a simple screenshot that shows how the previous web document is rendered by the browser, after incorporating the borders. Here it is:

Now that you learned how to assign borders to columns on a web page using the “border” CSS class, I’m going to explain how to use another class provided by BlueTrip for building some fancy HTML headers.

Want to see how this will be done? Then click on the link below and read the following section.

Adding Borders to Web Page Columns with BlueTrip CSS – Assigning fancy CSS classes to HTML headers

In reality, the BlueTrip CSS framework comes equipped by default with some useful CSS classes that can be used for spicing up the look of different elements of a web document. In this particular case, I’m going to show you how to use one of these classes, called “fancy,” for giving an elegant style to text-based elements.

The example below demonstrates how to assign this class to all of the H2 headers included in a web page.

<!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 fancy class)</title>

<!--[if IE]>

<![endif]-->

</head>

<body>

<div>

<h1>BlueTrip CSS Grid example using the fancy 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>

From the above example, it’s clear to see how simple it is to turn boring H2 headers into elegant elements by using the “fancy” CSS class of BlueTrip. Since the code sample speaks for itself, I suggest you look at the following image, which shows how the previous web page is displayed on the browser:

Not too bad, huh? As you’ll possibly agree with me, BlueTrip makes it really easy to add “fancy” styles to HTML headers on a web document. In the above example, these styles were added to a few H2 elements, but naturally this process can be applied to other text-based elements, such as paragraphs and lists as well.

And with this last hands-on example, I’m finishing this second tutorial on working with the BlueTrip CSS framework. As always, feel free to edit all of the code samples shown in this article, so you can get a better understanding of using helpful CSS classes that come bundled with BlueTrip.

Final thoughts

In this second chapter of the series, I showed you how to use some handy CSS classes that come with the BlueTrip CSS framework to add borders to web page columns and create truly fancy H2 headers.

In the next episode, I’m going to explore a few more CSS classes provided by the framework, which will be used for displaying eye-catching variations of HTML headers. Don’t miss the upcoming part!

Member Login or Register Here

Products & Services

Knowledgebase

Adding Borders to Web Page Columns with BlueTrip CSS (By: Alejandro Gervasio)