CSS overriding for 'font-weight' property
Question
I'm facing a strange problem with CSS overriding of 'font-weight' property. Given below is the code showing the issue:-
'font-weight' for element 'p' is set to small (in the same way color set to purple). But font is still rendering as bold on FF/Chrome, while color overrides to purple.
Any idea why this is happening?
p { font-weight: small; color: purple; } #speciality_test { font-weight: bold; color: red; } .class_speciality_test { font-weight: bold; color: red; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> </head> <body> <div id="speciality_test"> <p> Inside identifier... HTML CSS test pages. </p> </div> <div class="class_speciality_test"> <p> Inside class... HTML CSS test pages. </p> </div> </body> </html>
5 answers
solution1
8 ACCPTED 2012-02-15 12:41:09
There's no font-weight:small; . I think you mean font-weight:normal; or font-size:small; .
See also CSS Fonts Module Level 3: 3.2 Font weight: the font-weight property .
solution2
3 2012-02-15 12:40:19
font-weight cannot be small . It's either bold or normal . So your declaration is just ignored.
See possible values here: http://www.w3schools.com/cssref/pr_font_weight.asp
solution3
2 2012-02-15 12:41:16
Is small a valid value? According to W3C, it should be one of normal , bold , bolder , lighter , inherit or a number.
solution4
1 2012-02-15 12:41:23
I dont think small is valid.
font-weight: normal;
is what i use at work
solution5
1 2012-02-15 12:45:14
As far as I know, small is not a valid value for font-weight
font-weight: { 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | bold | bolder | lighter | normal | inherit } ;
So in your example, the font-weight from the #speciality_test is used.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.