Why is my CSS style not being applied

Question

I ve got this html    lt p gt       lt span class  fancify  gt Parting is such sweet sorrow  lt  span gt  lt span gt  - Bill Rattleandrollspeer lt  span gt   lt  p gt       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    lt p gt       lt span gt           lt label class  fancify  gt Parting is such sweet sorrow  lt  label gt       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

User · Answer

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.

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt link rel  stylesheet  type  text css  href  css style css  media  1    gt    Corrected    lt link rel  stylesheet  type  text css  href  css style css  media  all    gt

User · Answer

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

User · Answer

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    lt div id  first  gt       lt p id  myParagraph  gt Hello  lt span class  bolder  gt World lt  span gt  lt  p gt   lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to html

Examples related to css