Why is my CSS style not being applied?

Question

I've got this html:

<p>     <span class="fancify">Parting is such sweet sorrow!</span><span> - Bill Rattleandrollspeer</span> </p> 

...and this css (added to the bottom of Site.css):

.fancify {     font-size: 1.5em;     font-weight: 800;     font-family: Consolas, "Segoe UI", Calibri, sans-serif;     font-style: italic; } 

So, I would expect the quote ("Parting is such sweet sorrow!") to be italicized, and of a different font than the name of the quotee (Bill Rattleandrollspeer), since its span tag has the class "fancify" attached to it. The class should certainly be seen, as the file in which it appears references the layout file which uses the Site.css file.

What rookie mistake am I making now?

UPDATE

I thought maybe the problem was that I had added the new class in Site.css following this section in that file:

/******************** *   Mobile Styles   * ********************/ @media only screen and (max-width: 850px) { 

...but I moved it above there, and it is still not working, and not seen via F12 | Inspect element for the label in question.

I moved the reference to Site.css below the bootstrap.css file, which does indeed change the appearance of that text, but still not italicized, and still not seen in the element inspector...

UPDATE 2

Here's how the HTML is coming down:

<p>     <span>         <label class="fancify">Parting is such sweet sorrow!</label> 

...and here's my css rule in Site.css:

p span label .fancify {         font-size: 1.5em;         font-weight: 800;         font-family: Consolas, "Segoe UI", Calibri, sans-serif;         font-style: italic;         display: inline;     } 

...but it's not being recognized. I consider this a breech of css/html protocol, and should be adjudicated by some world body. Then again, I could be making some silly mistake somewhere.

Answer 1

There could be an error earlier in the CSS file that is causing your (correct) CSS to not work.

Answer 2

Have you tried forcing the selectors to be in the front of the class?

p span label.fancify {      font-size: 1.5em;     font-weight: 800;     font-family: Consolas, "Segoe UI", Calibri, sans-serif;     font-style: italic; } 

Usually it will add more weight to your CSS declaration. My mistake ... There should be no space between the selector and the class. The same goes for the ID. If you have for example:

<div id="first">     <p id="myParagraph">Hello <span class="bolder">World</span></p> </div> 

You would style it like this:

div#first p#myParagraph {      color : #ff0000; } 

Just to make a complete example using a class:

div#first p#myParagraph span.bolder{     font-weight:900; } 

For more information about pseudo-selectors and child selectors : http://www.w3.org/TR/CSS2/selector.html

CSS is a whole science :) Beware that some browsers can have incompatibilities and will not show you the proper results. For more information check this site: http://www.caniuse.com/