CSS: Lines and Section Dividers

I love coincidences. Today’s post is about adding lines or “section dividers” to your blog using CSS. The image above is a random photo I took with my iPhone recently. The synchronicity comes in when I look back at my previous CSS box outlines/borders post and see that the cover photo was also of roses — same topic, similar photo — isn’t that neat-o?!! Anyway, this post is a response to Monica’s question about how she could create section dividers for her blog…

Every element in an HTML page is inside of an invisible box — in other words, every paragraph, every image, every header, every footer, and every blog post is inside its own little box! We can make the edges of these boxes visible by using the CSS BORDER property.

One-Sided Borders Styles

I first mentioned the border property here and showed how to use it to add a border to all four sides of a box with a single CSS statement. To elaborate on that first tutorial, I’ve included the four border properties that you can use to add a border to any single side of any HTML element. So, to create section dividers on your blog, add a border to one side of the things you want to separate — it could be the top side, bottom side, left side or right — whatever you like!

Examples

To add a discrete line between your sidebar widgets, you could simply add a border to the bottom of each of them. And, if you have a Blogger blog, you can add a line or section divider between blog posts by adding a border-bottom property to your .date-outer class. Please note that you will have to tweak the padding of some elements to get the look you want. I talked about how to do this in my first box outlines tutorial.

Inspect Element

Before you can add a border to an HTML element, you need to know its name. You can find out the name of any element by using Inspect Element. To my Style students: check out Day #5 (Lab 1).

Disclaimer

The sample blog layout above is an over-simplified representation of a blog page. A typical Blogger or WordPress page will have hundreds of box elements!

BTW, if you’re new to HTML, you might want to get started by checking out my HTML screencast. And, if you want to learn more about CSS, I show you all that I know here.