Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

<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;
}
like image 324
Tom Gullen Avatar asked Jul 25 '11 08:07

Tom Gullen


People also ask

Can you style strong tag?

A style attribute on a <strong> tag assigns a unique style to the element. Its value is CSS that defines the appearance of the strong element.

Is strong tag deprecated in HTML5?

nope <strong>. strong isn't deprecate in html5 strong documentation, but exists a difference between html4 and html5 "In HTML 4.01, the strong tag defines strong emphasized text, but in HTML5 it defines important text."

What is the alternative of strong in HTML?

If you want to stress importance of text, use <strong> . If you don't want to stress importance, use the <b> tag or use the font-weight:bold; style on the element or in the CSS. Although, if you are bolding the entire paragraph, it's probably better to use the CSS option.

Is strong still used in HTML5?

In modern HTML (HTML5), both <strong> and <b> are considered semantic and valid. Although they both get the same boldface presentational styling in modern browsers, they don't have the same meaning or purpose.


3 Answers

add:

strong{
 font-weight:bold;
}

to your CSS. Maybe somewhere you reset this tag.

like image 128
avall Avatar answered Sep 27 '22 23:09

avall


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

like image 43
BoltClock Avatar answered Sep 27 '22 23:09

BoltClock


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.

like image 22
Pavel Hasala Avatar answered Sep 28 '22 00:09

Pavel Hasala