Why is the styling for the span class in the css styling sheet not working?
Question
I'm trying to style the span class and it does not change anything. I can't figure out why everything else is working and not this. This is my HTML code:
.bold { font-weight: bold; } .italic { font-style: italic; }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link href="StyleSheet.css" rel="stylesheet" type="text/css"> </head> <body> <div class="mainDiv"> <div class="firstDiv"> <img src="Images\\parisImage.jpg" alt="Paris" id="parisImage"> <p id="title">Terps Calculators Inc.</p> <img src="Images/pineapple.jpg" alt="pineapple" id="pineappleImage" /> </div> <div class="secondDiv"> <ul id="linkList"> <li><a class="link" href="Http://www.google.com">www.google.com ,</a> </li> <li><a class="link" href="Http://www.hamodia.com">www.hamodia.com ,</a> </li> <li><a class="link " href="Http://www.gmail.com">www.gmail.com</a> </li> </ul> </div> <div class="thirdDiv"> <h1 class="heading">Intoduction</h1> <p><span class="bold">Terps Calculators Inc.</span><span class="italic">implements and provides these<br/> calculators for your use. We keep expanding our collection<br/> every day so make sure you stop by often.</span> </p> <h1 class="heading">Calculators</h1> <ul class="calculators"> <li><a class="link2" href="GradesCalculator.html">Grades Calculator</a> </li> <li><a class="link2" href="InterestCalculator.html">Interest Calculator</a> </li> </ul> </div> <div class="fourthDiv"> <p id="title2">Terps Calculators inc. ®</p> </div> </div> </body> </html>
1 answers
solution1
-1 2016-07-10 19:28:15
Based on a comment you provided, this appears to be a case of CSS specificity . Here, your .bold and .italic selectors aren't specific enough to override your other rules. As MDN notes:
The following list of selector types is by increasing specificity:
- Type selectors (eg, h1) and pseudo-elements (eg, :before).
- Class selectors (eg, .example), attributes selectors (eg, [type="radio"]) and pseudo-classes (eg, :hover).
- ID selectors (eg, #example).
There are many CSS specificity calculators available online and you can use them to easily calculate what rules will be applied.
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.