Some Css classes working, others are not

Question

I have an ASP.Net page i am developing. I am using bootstrap and that is working fine. I also have a custom stylesheet i use to fine tune the look and feel. As of some point in the last 2 days, any new classes i create in the custom stylesheet and try to apply to an element on my page fails to make a change. For example, i have a div on a page, a basic div i created to troubleshoot this issue, even though this applies to any element on the page, that i am trying to change the background color for. I created one css class ".background-pink" a couple days ago and if i set my div to use that class, the div turns pink like it is supposed to. However, i have another class right below that class in the stylesheet called .background-blue that does the same thing,it even sets the background to the same color(it was originally blue but during testing i changed it to the same color as the background-pink class to narrow down the issues) and if i change the div class to reference the .background-blue class, the pink background disappears and the style is not applied. I can then set the class back to the pink one and it changes back pink just fine. This is replicated across any newly created classes in my stylesheet.

I have tried clearing browser caches and tried incognito modes, different browsers with all the same results. I have checked for syntax errors in my css but found none. The intelliprompt in Visual studio can find the class names fine, leading me to believe i have it linked in the head correctly. I have renamed the stylesheet but no change. I have cleaned and rebuilt the application multiple times with no results. If i put the styles in the div using inline css it works fine.

This makes no sense to me, any suggestions would be appreciated. Thanks!

.background-pink {
  background-color: #E33491;
}

.background-blue {
  background-color: blue;
}

.font-white {
  color: white;
}

<div class="background-blue">test</div>
<div class="background-pink">test</div>
<div style="background-color:blue">test</div>

Below is the entire stylesheet

.negativetopmargin
{
margin-top:-5px;

}

.background-pink
{
background-color:#E33491;
}

.background-blue
{
background-color:#E33491;
}

.font-white
{
color:white;
}

.center-div
{
position:relative;
margin-left:auto;
margin-right:auto;
}

body
{
font-family: 'Palanquin', sans-serif;
background-color:red;
}


.padding-4
{
padding:4px;
}

Note the body method, the font throughout the page is set correctly, but the background color i put to test that method made no change either.

I would recommend you add a code snippet or two before the downvotes arrive. — Master Yoda, Aug 18 '17 at 14:56
Can you edit your question to create a runnable code snippet so that we can see your original code? from what you have provided that simple snippet should work. Apart from the fact that in the code you provided both your pink and blue classes are selecting the same shade of pink. — Master Yoda, Aug 18 '17 at 15:03
I have gone ahead and created a runnable code snippet for you, and it proves that your code works. Therefore, you have not truly provided an [MCVE](https://stackoverflow.com/help/mcve). — mason, Aug 18 '17 at 15:04
Ya i created the blue method to verify that the aspx file is not referencing the css file some how. Or at least parts of it. Then when the color blue failed i changed it to the same color as my known working code to see if somehow that was the issue. I know my code is good, it seems to be a referencing issue like visual studio is ignoring the newly created classes. Its very strange. And that is the frustrating part, i cant seem to get a handle on why some methods are working and some arent in the same external css file — user519670, Aug 18 '17 at 15:38
@user519670 its possible that your browser has cached an older version of your stylesheet. Try a hard refresh on your browser (Ctrl+F5) or try switching to another one. — Master Yoda, Aug 18 '17 at 15:55
Now that sounds like a possibility that would explain why newer created classes are not working. I checked the actual text of the stylesheet on the server location, opened it in Notepad++ and it is the same as what i am seeing in Visual Studio. Is there somewhere else i should be looking? — user519670, Aug 18 '17 at 15:59
Can i point out that both your background-pink and background-blue classes are still referencing the exact same colour? If the page source is showing your new classes then its not a caching issue as the browser is aware of them — Master Yoda, Aug 18 '17 at 16:00
Wow, so before i posted the question, i did just that. I cleared cache and cookies, did the ctrl f5 and tried multiple browsers as well as incognito mode. I have been bitten by that bug before and i wanted to eliminate it. I swear i havent changed anything since posting but now everything is working. It had to be a cached stylesheet somewhere, but i dont know where. Can you change your answer basically to indicate a cached css stylesheet and i will mark as answered? you deserve credit. Thanks for your help! — user519670, Aug 18 '17 at 16:01
yes both classes are referencing the same color, when i started noticing the issue i created the background blue just to test with to see if i could figure out what the problem was. when blue didnt work, i tried changing it to the same color as pink to see if that would make the class work. But it didnt. Now that its working i am going to delete that class as i am only needing the pink one — user519670, Aug 18 '17 at 16:03
@user519670 Great, glad to hear its working eventually. Going by this answer: https://stackoverflow.com/questions/1563648/visual-studio-development-server-not-updating-css-and-javascript its possible that the server was aware of the changes to your stylesheet but was sending headers telling the browser to use an older version. Its a funny old situation to be in as its not an immediately obvious fix — Master Yoda, Aug 18 '17 at 16:05
That makes complete sense. I wasn't aware that could happen. Again, thanks for all your help, if you will change your official answer i will mark it as the answer — user519670, Aug 18 '17 at 16:07
@user519670 Hey can you mark the answer as accepted if it satisfies your requirements? — Master Yoda, Aug 23 '17 at 16:10

Master Yoda · Accepted Answer · 2017-08-18T16:09:01.430

Try adding the following rule to your .background-blue class, !important

.background-blue
{
  background-color: blue !important; 
}

It sounds like somewhere in your custom stylesheet you are overriding the .background-blue class with another class.

Im also assuming that the problem is limited to the .background-blue class and is not found among other classes. The !important rule puts priority on this class to render the background as blue.

P.S. take note of this article when deciding on an appropriate place to use the !important rule. You dont want to be using it too often.

Further example

.background-pink {
  background-color: #E33491;
}

.background-blue {
  background-color: blue !important;
}

<div class="background-blue ">test</div>
<div class="background-pink">test</div>
<div style="background-color:blue">test</div>

<!-- below div uses both background-blue and background-pink classes, 
as background-blue uses the !important rule 
it overrides the last class applied which is background-pink !-->
<div class="background-blue background-pink">test</div>

As mentioned in the comments its also possible that the server is aware of your updated stylesheet but is sending headers to the browser which instruct it to render your webpage with an older cached version. You can check this by opening developer tools with F12 and studying the headers that come through on page load.

A hard refresh with ctrl + F5 usually solves the problem but in extreme cases you need to manually adjust the headers. See this answer for further information.

The issue is not limited to the .background-blue class. If i was to create another class say .font-blue and tried to apply that to text inside an element it would also make no change. However any methods made the day i created the stylesheet work just fine. — user519670, Aug 18 '17 at 15:46
As i say, you are probably overriding the background with something else elsewhere in your stylesheet. We will never know that unless you provide your source. — Master Yoda, Aug 18 '17 at 15:48
I cant give the actual aspx page, but i can include the entirety of the stylesheet. Its relatively simple. the only other stylesheet i am referencing is the bootstrap one. — user519670, Aug 18 '17 at 15:52
Yes, please include the stylesheet for reference. Also please see my updated answer for an updated example. — Master Yoda, Aug 18 '17 at 15:54
@Rob - Yes, I have never had this issue in the past. I have been bitten by the cached stylesheet in the past though, which is why i wanted to eliminate that as a possibility — user519670, Aug 18 '17 at 15:57

Some Css classes working, others are not

1 Answers1

Further example