Font-style CSS not applying to HTML element
Question
I'm working through exercises in the Beginning Javascript Book. I'm stuck on an exercise where I use the DOM to add a class to an element to change the style of the text. When I open this page in Chrome the div element is underlined but not italic. What's wrong with my code?
<head>
<title>Chapter 9, Example 5</title>
<style>
#divAdvert {
font: 12pt Verdana;
}
.new-style {
font-style: italic;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="divAdvert">
Here is an advertisement.
</div>
<script>
var divAdvert = document.getElementById("divAdvert");
divAdvert.className = "new-style";
</script>
</body>
</html>
4 answers
solution1
4 2017-07-19 02:17:43
Try making the style more specific so the font style isn't given precedence in the id selector
<style>
#divAdvert {
font-size: 12pt;
font-family: Verdana;
}
.new-style {
font-style: italic;
text-decoration: underline;
}
</style>
@Kaiido made a good point in the comment about explaining why this works.
When you use the short hand "font" style you are actually setting multiple styles such as font-size and font-family as you show in your example. But it also can be used to set other font properties like font-weight, font-style etc. If you don't pass a value in that short hand style rule it gets the default values. The reason your class wasn't overriding it was because your id selector was setting the font-style to the default value and your class selector was setting it to italic. However, the id selector has a higher specificity than the class selector so its rules take precedence. Changing the id selector to not set the font-style (through the default value applied when you used the short hand "font" rule) allows the class to apply the font-style rule. Another solution as @Kaiido mentioned would be to just make the class selector have a higher specificity than the id selector which could be done like this:
#divAdvert {
font: 12pt Verdana;
}
#divAdvert.new-style {
font-style: italic;
text-decoration: underline;
}
Because you have now made the selector with the class more specific than the id selector alone, its rules will override the original id selector.
solution2
1 ACCPTED 2017-07-19 02:22:09
When you use font in CSS, that is a short cut property for several things including font-style . The default there is normal and that's why it's not set. Your .new-style is overridden by that because ID has a higher specificity than class.
The one way around it is to set your font properties specifically.
#divAdvert {
font-size: 12px;
font-family: Verdana;
}
In addition, you should know that pt is for print and should not be used for the web.
solution3
0 2017-07-19 02:18:57
Put important in font-style
#divAdvert {
font: 12pt Verdana;
}
.new-style {
font-style: italic !important;
text-decoration: underline;
}
solution4
0 2017-07-19 02:20:09
.new-style {
font-style:italic !important;
text-decoration:underline;
}
It's not the best practice but it works. The !important use it only when you need to override styles.
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.