Italic, Bold and Underline Tags Don't Work

Tags: Technology, Web, CSS, Font

We recently ran into a problem on our newly designed website, in which all the <i>, <b>, <u> (italic, bold and underline) tags weren't working. They would all show plain text.

After a lot of investigation, we came across this interesting item:

BODY * { font: 13px arial; }

The above css code appears to be just dandy, but there's a hidden problem. The "font" attribute has more parameters than two:

font: font-style | font-variant | font-weight | font-size/line-height | font-family;

Naturally, each of these parameters are optional. As with any overloaded method, if you don't specify a value, the optional parameters will be given a default value. In this case, if you only specify font-size/line-height and font-family, then the others default to none.

Since the CSS referenced at the top has the star selector (*), then what is specified within that CSS definition will cascade to all the elements nested within it.

The solution to this problem is to use multiple attributes instead of the all-inclusive font attribute:

BODY *
{
    font-size: 13px; 
    font-family: arial;
}

The above CSS definition will set the font-size and family for all elements on a web page, but will leave font-style, variant and weight to their browser-default values, which will allow <i>, <b>, <u> (italic, bold and underline) tags to work as they should.

That's it! I hope this helps someone out there on the internet.

Add a Comment