It’s always the basic stuff that gets you

I was updating my About page tonight when I found myself wanting to mark up parts of the text with the b element (as, thanks to HTML5, it has found its true calling in life). But I didn’t want the text to be bold, as I was going to style it differently. In particular, I wanted it to have the same font weight as the rest of the text.

But I knew that there wasn’t a special value of the CSS font-weight property that meant “use the current font weight” — there was only lighter and bolder for one step lighter and bolder than the current weight respectively, neither of which was what I wanted.

Then, it hit me like a ton of bricks:

b {
    font-weight: inherit;
}

That’s right: it’s our old friend the CSS-wide keyword inherit. That is, “inherit the parent’s computed font-weight“. How could I have forgotten?!

And I realized that perhaps other, less experienced CSS authors might run into this problem as well. So I decided to post yet another one of my self-answered questions on Stack Overflow documenting this. Then I realized that the way Stack Overflow treated self-answered questions meant I pretty much had to tell the world how dense I was for a night, as someone who is generally known on SO to be really, really good with CSS.

Oh well; happens to the best of us, I guess.

Comments are closed.