STYLE SHEETS

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.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

November 12, 2009

TABLE OF CONTENTS:

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

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

Next: Assigning fancy CSS classes to HTML headers >>