How to Override Old CSS With New CSS

How to Override Old CSS With New CSS

Mey Ashley. I recently used your tutorial n how to style blockquotes, it was very helpful. But now that I want to change the CSS, I go over to the customize tab in blogger and past in the new CSS with the different background color and all, but it doesn’t override the existing CSS. Its saved, and its there, but the changes don’t appear on my website. I use a blogspot hosted site. Any idea as to why this is happening?

Maddy

Hi Maddy! This is a common problem that I see a lot. Someone adds a snippet of CSS, but it’s not working, even though they KNOW they entered it correctly. This can happen if the old CSS takes priority over the new one for whatever reason (more specific selectors or whatever).

Luckily, there’s a very simple fix for this, and that’s adding !important after your CSS. Here’s an example of before and after:

Before (normal CSS)

blockquote {
    background: blue;
}

After (your CSS takes priority)

blockquote {
    background: blue !important;
}

Still not working?

If it’s still not working then there are three possibilities:

  1. The CSS you entered is invalid, so it’s being ignored.
  2. You didn’t enter the CSS in the correct place so it’s not being added to your blog at all.
  3. Something else is STILL taking priority (maybe the original CSS has !important added too.

Have you ever had problems with your CSS not working?

Photo of Ashley
I'm a 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching women how to be coding badasses. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

Leave a Reply

(Enter your URL then click here to include a link to one of your blog posts.)

This site uses Akismet to reduce spam. Learn how your comment data is processed.

5 comments

  1. Sometimes I’ve found with Blogger that the CSS gets saved in the of the HTML and sometimes when you try to override it, it doesn’t take notice because there’s two conflicting codes, so sometimes I have to dive into the code and remove the old code from the in order to save a new CSS code instead. It’s messy sometimes and stressful, but that’s another answer that works for me, but you’re right, !important usually works just as well!<3

    Amanda @ Beautiful Bookish Butterflies recently posted: Weekly Recap | 30-4 Apr. 2015
  2. Since the current limit of my coding expertise is messing about with Firebug and changing things to see what happens, slowly working towards the result I want before tweaking the CSS in the back end, I found the ! important thing invaluable when I first discovered it! If I couldn’t figure out where the thing I wanted to change was tucked away, then that’s what I used (and use).

    1. Honestly, messing about with Firebug is FANTASTIC! A lot of people don’t know what the Inspect Element tools are or how to use them, so you’re doing very very well. 🙂

Recent Posts

    Random Posts