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.

http://paulstamatiou.com Paul Stamatiou

Glad that someone likes it. =)
http://www.benhummel.com 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.
http://www.biscuitrat.com 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!
http://dbachrach.com/blog/2007/08/03/10-tips-to-make-your-blog-look-more-professional/ 10 Tips to Make Your Blog Look More Professional » Dustin Bachrach Blog

[...] wrote about this in detail a week ago here. All the steps are in that article. What it does is give your headers the look that they have in [...]

« Isn’t Apple a Fruit? What Happened to Macintosh apples? | WP-Syntax Makes Syntax Highlighting a Snap »

Styled Headers With Underlines – CSS Tip

Test Heading

About Me