How do I edit CSS in WordPress post? A beginner's guide

This question haunts developers. How do I edit CSS in WordPress post? For example, we want to display the code section differently.

But we don’t know enough CSS. It happens.

What can we do to solve this problem?

Moreover, when we deal with more than one CSS files, it gets difficult.

As we know the single post PHP file has started with header PHP file. And that file references to the subsequent CSS files.

How will we pin-point that section particularly?

Adding an inline CSS directly to the post is not a good solution.

How do I add a CSS class to a WordPress post?

Adding a CSS class as a custom field to the post might tempt us.

But there is simpler solution available.

Even a beginner can do that.

Moreover, we don’t have to be an expert in CSS.

Either we can add Firebug extension to our Mozilla Firefox browser, or to the Chrome.

Now we can inspect any code.

Anywhere.

On the other hand, we can tweak that code through the WordPress dashboard.

We can go to Appearance->Customize and click the Additional CSS filed.

Have a look at the following image.

Inspecting the CSS code through Firefox Inspector

We wan to tweak only the code part of a single post.

That is to say, we don’t want any change anywhere else.

We want the code background to be black. And, in addition, the font will be Comic Sans MS and the color should be yellow green.

Firstly, we copy that part of CSS from the Firefox Inspector. Secondly, we put that code in that Additional CSS field.

Just like the following image.

Adding additional CSS through dashboard

We have tweaked the CSS here and see the output locally.

Let’s see a sample of code online.

<?php

echo "Hello World";

?>

Then we can test the same thing in the live environment.

To sum up, it’s as easy as apple pie. 🙂