Styled Headers With Underlines – CSS Tip

July 25th, 2007 | Posted in: Programming, Tech, Tutorial, Web | Save to del.icio.us

In a post yesterday, I had some new CSS working. My headings now have a nice line drawn under them. Here’s a sample:

Test Heading

This gives posts a more professional look that I really like. I got this idea from Paul’s style, but I wrote this CSS myself. Here’s the CSS you need to include:

h2.with_underline {
    display: block;
    margin-top: 20px;
    width: 100%;
    color: #333;
    border-bottom: 1px #BBB solid;
}

So now wherever you want to have these nicely formated headers, just type:

1	<h2 class="with_underline">Test Heading</h2>

You could also make it global CSS so it affects all h2’s, and then you don’t have to put the class attribute in the HTML tag. This is a real simple addition to your CSS and makes your pages really pop.

Ranjani

I think it needs a little more padding, because the descender on the "g" is touching the line, but the border-bottom is a tried and true technique. I've been using it in the place of underlines for a looong time now. It looks so much better. Besides that, it's independently style-able!

Benjamin Hummel

That's a nice trick, I'm teaching myself the bare basics of HTML at the moment. Today I learned how to make an unordered bullet list! Wow!

But in all seriousness, I know basically nothing about coding except the extreme basics of HTML text formatting. I'm trying to do some stuff by hand instead of with WYSIWYG to teach myself a little more.