How to override CSS styles in WordPress

How to override CSS styles in WordPress

Wordpress LogoHere’s one I get asked a lot, “My WordPress CSS isn’t working” or “Wordpress colour changes are not showing”. You’ll be please to know that there is a simple solution that I am going to share with you.

Many people use WordPress for its ease of use to set up a website, however, sometimes when you get you theme you want to customise it and have it look different so you look online and decide to make some tweaks to the CSS.

The main problem people face is that many themes will have a layout.css file and a style.css file that you are able to access from the WordPress editor.

Lets say you have something like this in your layout.css file.

a .contact {
float: right;
position: relative;
color: blue;
}

Now if you access your style.css file in the WordPress editor and put this.

a .contact {
color: red;
}

It will likely not have any effect on the element that you are trying to target, this is due to the way the browser prioritises styles, the simple solution without having to dig into the FTP files is to simply add an !important tag, like so.

a .contact {
color: red !important;
}

This simply tells the browser that you want to prioritise this style argument.
For most small WordPress sites, this method will work just fine, many people will say its not good coding practice as on a large site it can clog up the code and reduce the speed of the site, however, occasional use on a small site will work just fine.

Menu Title