Any ideas why <strong> tag doesn't work but CSS does?

Tom Gullen picture Tom Gullen · Jul 25, 2011 · Viewed 37.7k times · Source
<span class="bold">Some Title</span>
.bold
{
    font-weight:bold;
}

This renders boldly, however this:

<strong>Some Title</strong>

Does not. It just renders as regular text. I'm using the HTML5 doctype and the Google font:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans&v2' rel='stylesheet' type='text/css'>

Anyone experienced this as well?

Edit: BoltClock suggested it might be CSS reset, here's the chunk for <strong>

/** CSS Reset **/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Answer

BoltClock picture BoltClock · Jul 25, 2011

If there is nothing else for strong, then there's your problem (or rather, the CSS reset's problem).

The font: inherit style, together with all those selectors, is asking everything to inherit every font style from its parent. The default weight is, obviously, normal, so strong text is no longer bold until you redeclare it:

strong { font-weight: bold; }

(Some other obvious elements to reset styles for are b, em, i, code elements, quote elements, tables, headings, lists, etc.)