CSS button won't change color

Question

I'm trying to edit a template I've downloaded on the internet, by changing some colors. However, when I change the color in the css file, it doesn't change it on the website:

HTML:

<div class="user-panel">
    <a href="https://example.com" target="_blank">Link</a>
</div>

CSS:

.user-panel {
float: right;
font-weight: 500;
background: #ffb320;
padding: 8px 28px;
border-radius: 30px;
}

This is how I import the.css file:

<link rel="stylesheet" href="{% static 'css/style.css' %}"/>

So what I did was changing #ffb320 to #cc0000 to have red instead of yellow, saved the file, and reloaded the page, but the color didn't change. Same goes for font size, etc...

The only thing that did work was using style='font-size:20px' for the font size.

What am I doing wrong here?

Answer 1

This happens because of the cache so, you can do like:

<link rel="stylesheet" href="{% static 'css/style.css' %}?version=55"/>

Also, do run the command:

python manage.py collectstatic

Answer 2

You should check out the original CSS from the template. Maybe there is a selector with more strength that just.class, I don't know the strength scale from memory, but I believe that doing something like div.class has more priority than.class.

You can always try adding.important: For instance:

.user-panel {
background: #ffb320!important;
}

Answer 3

It's a button with a link, so you need to target the 'a'. Because there's a child inside the parent, when you target the parent it won't automatically target the child. I've learned this through trial and error.

Try it like this:

.user-panel a {
background-color: #cc0000;
} 

That will work.

Answer 4

Try to use property

background-color

Hope It will help