This quick article will be a great introduction for anybody looking to add their first bit of additional CSS to their WordPress website. In this post I thought I would document the process I went through to change my headings to a hot pink colour in order to match the colour in my logo.

Important: My website actually uses coloured H2 tags now, this tutorial is a demonstration of how to change any heading with CSS.

I only want the h3 headings to be pink not the other headings.

Like so…

Main Heading

Sub Heading

Because I am using the free version of my WordPress theme this optimization was not available in the editor.

This is certainly not an essential customization I just like to mess around with things, and I was probably just avoiding having to write a new article. With the nature of MonstaBot being a design based website I feel the need to make things a bit more exciting.

Why can’t I simply do this in the text editor?

I can, but a simple line of code will update every intended heading on my site. If I was to go into all my blog posts and edit them it would take a very long time.

This will work in any browser with developer tools and does not require any additional software.

Finding the CSS

Firstly I need to know the ID of the element I want to change so to do this I open up the developer tools in Firefox. I do this by right clicking on a h3 heading in my article and select Inspect Element.

F12 is the keyboard shortcut.

Every theme has its own unique way of naming elements so it may take a lot of trial and error to find the element you want to change.

As you hover over different elements of code the browser will highlight the corresponding areas like so:

The CSS element should begin with a full stop like: .example

What I am looking for is something like “.h3″ this indicates a CSS rule for the h3 headings. After a bit of searching I find out that the CSS ID for the h3 headings in my blog is called .section-text h3

A good way to find out what anything does is to simply play around in the Developer Mode by turning things on and off so you can see what bit of code you need.

As you can see here by playing around with the font size and making it bigger, I can clearly see that this is the element I want to modify.

Finding the right bit of CSS to modify is probably what will take you the longest time to figure out.

Adding Additional CSS to a WordPress theme

I now know that the element I want to add some additional CSS for is called .section-text h3, so I copy the bit of code.

Next I open up my Appearance editor in WordPress and go to customize, at the bottom you will find the tab for additional CSS.

The best thing about using the additional CSS editor is you get a live preview so you know if it works and it won’t surprise you by destroying your site. Even if it did you only need to open the editor up and delete the last code you added.

In the editor I add the text: .section-text h3, the editor should automatically add these brackets { }.

These {} bracket constrain the options you add think of it as a beginning and an end.

So I add this bit of code:

{color: #e51d81;}

and like magic it updates every h3 heading across all my articles.

How did I know the code of the colour I wanted ?

Two ways:

1. This is not only the colour for my logo it is also the theme colour I selected. So to get the swatch data I headed back to my theme’s settings and I copied it.

2. In the Developer tools you should find a colour picker. I can use this colour picker to highlight any part of my website that features the pink colour I want. I can then copy the swatch data by clicking or just write it down somewhere.

The colour picker in action.

And that’s all I did.

Hopefully you can see the potential to customize your own website. You don’t need to learn all the codes and functions to modify your own site. You can simply google how to do anything in CSS and somebody will have the line of code you need.

I highly recomend this website for CSS and HTML support, I use it all the time: W3 Schools

More reading?

Categories: Web Design

David

Works part-time as a Graphic Designer and Website Designer. Studied Animation and has been using and learning design software for over 15 years.