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

Question

<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;
}

Do you happen to have a CSS reset that forgot to "reset" styles for `strong`? — BoltClock, Jul 25 '11 at 09:00

BoltClock · Accepted Answer · 2012-04-24T04:34:04.010

45

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.)

edited Apr 24 '12 at 04:34

answered Jul 25 '11 at 09:04

BoltClock

630,065
150
1,295
1,284

2

tl;dr `inherit` means inherit from parent element, not inherit browser defaults – BoltClock Jul 25 '11 at 09:07

score 9 · Answer 2 · edited Apr 24 '12 at 04:34

9

add:

strong{
 font-weight:bold;
}

to your CSS. Maybe somewhere you reset this tag.

edited Apr 24 '12 at 04:34

BoltClock

630,065
150
1,295
1,284

answered Jul 25 '11 at 09:03

avall

1,995
2
15
27

score 1 · Answer 3 · answered Jan 17 '16 at 12:53

1

Those resets are reseting not just padding and margins, as BoltClock explained, font:inherit can break your browsers deafault behaviour with displaying proper fonts style.

answered Jan 17 '16 at 12:53

Pavel Hasala

896
9
13

score 0 · Answer 4 · answered Jul 30 '14 at 22:45

0

In addition to BoltClock's answer, I also found out that we must use the complete tag names for closing the tags, otherwise the STRONG tag used afterwards doesn't work. For example,

<H1> heading </H1>

instead of,

<H1> heading </>

answered Jul 30 '14 at 22:45

vikrant

1,692
1
18
23

Is the situation where `>` is actually valid? Genuinely curious – Chris Nov 09 '15 at 09:54
looks like they are not valid. http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 – vikrant Nov 09 '15 at 11:03
I think that question is discussing self closing such as `` - I was curious about the use of `>` – Chris Nov 09 '15 at 11:32
– vikrant Nov 10 '15 at 14:10

score 0 · Answer 5 · answered Dec 20 '20 at 10:26

0

For me the issue was Angular Material .mat-option class, for some reason using <b> or <strong> didn't work with their font. Changing their font to another one solved the issue for me.

answered Dec 20 '20 at 10:26

Yair Cohen

1,386
3
9

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

5 Answers5