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

Next: Adding borders to web page columns >>