Menu
For the code below the bold is not working. If I comment out font:inherit; then it works as expected.
I don't understand why this is. I thought <p> would inherit from <body> and the bold would work. I see the exact same thing in Firefox, IE, Safari, and Opera.
What am I missing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700,bold' rel='stylesheet' type='text/css' />
<style type="text/css">
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{
font:inherit;
}
body{
font-family:'Droid Sans', sans-serif,Arial,Helvetica,'Trebuchet MS';
font-size:14px;
}
</style>
</head>
<body>
<p>this is a normal paragraph</p>
<p><strong>this is bolded</strong></p>
</body>
</html>
edit: by 'not working' I mean the bold font doesn't show up. The html has 2 paragraphs. The first par is normal and the second is bold. When I use the inherit, both lines have the same font weight.
300
You can also bold text with the CSS font-weight property set to “bold.” When bolding text, it's considered a best practice to use the <strong> tag in favor of the <b> tag. This is because the <strong> a semantic element whereas <b> is not.
font-weight can also fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available. For example, if I embed the following font...
What are the ways to make text bold in CSS? You can use font-weight property, <b> element, and <strong> element to make text bold in CSS.
400 – Normal. 500 – Medium. 600 – Semi Bold (Demi Bold) 700 – Bold.
Your strong element is inheriting from your p element which is inhereting from the body element. Since the default font-weight is normal, everything is getting that applied. Add the rule strong {font-weight:bold;}
125
According to font:inherit;, P inherits font-weight: normal from BODY, and STRONG inherits from P. It's correct.
If you don't want to reset font for STRONG, then remove it from selectors list before {font: inherit;}.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
