[html] Why is my CSS style not being applied?

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.

I had a similar problem which was caused by a simple mistake in CSS comments.

I had written a comment using the JavaScript // way instead of /* */ which made the subsequent css-class to break but all other CSS work as expected.

I was going out of my mind when a rule was being ignored while others weren't. Run your CSS through a validator and look for parsing errors.

I accidentally used // for a comment instead of /* */ causing odd behavior. My IDE said nothing about it. I hope it helps someone.

In addition to the solutions posted above, having gone through the exact same problem, make sure you check your HTML. More specifically whether you've properly labelled your elements, as well as class and id selectors. You can do this either manually or through a validator (https://validator.w3.org/).

For me, I missed the equal sign next to the class (<div class someDiv> vs <div class = "someDiv">, hence why no CSS property was applied.

Clear the cache and cookies and restart the browser .As the style is not suppose to change frequently for a website browser kinda store it .

Reasoning for my CSS styles not being applied, even though they were being loaded:

The media attribute on the link tag which was loading the stylesheet had an incorrect value. I had inadvertently set it to 1 instead of all. This meant the browser was ignoring those styles in that linked stylesheet.

Broken:

<link rel="stylesheet" type="text/css" href="css/style.css" media="1" />

Corrected:

<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />

Maybe your span is inheriting a style that forces its text to be normal instead of italic as you would like it. If you just can't get it to work as you want it to you might try marking your font-style as important.

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

However try not to overuse important because it's easy to fall into CSS-hell with it.

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

For me, the problem was incorrect content type of the served .css file (if it included certain unicode characters).

Changing the content-type to text/css solved the problem.

I know this is an old post but I thought I might add a thought for people who come across a similar problem. I'm assuming that you are using ASP.NET MVC since you mentioned site.css.

Check your Bundles.config file to see if you have BundleTable.EnableOptimizations = true; If you don't, then it can be your problem since this allows the program to be bundles and "minified". Depending on if you run in debug mode or not this could have an effect.

For me, it was the local overrides in Sources -> Overrides. A file gets saved locally whenever you change the styling of a page and chrome uses that file to override the server's css.

Posting, since it might be useful for someone in the future:

For me, when I got here, the solution was browser cache. Had to hard refresh Chrome (cmd/ctrl+shift+R) to get the new styles applied, it seems the old ones got cached really "deep".

This question/answer might come in handy for someone. And hard refresh tips for different browsers for those who don't use Chrome.

I also faced this issue. And this how it got resolved!

My css filename was gt.css. I was working on Visual Studio (eg.2017).

• I went to solution explorer (press Ctrl+Alt+L) and searched gt.css (enter your css filename). Right click on your css filename and then on Bundler and Minifier (4th option curently) and then Re-Bundle file (or directly press Shift+Alt+F).
• Save any unsaved file, then empty cache and hard reload your web browser.

You can learn more about Bundler and Minifier here.