How to add custom CSS code in WordPress

CSS is a language that we use to style HTML elements in the way we want. Modern web design is only possible because of CSS.

Before CSS was made, the website looked ugly with just some HTML elements here and there.

In WordPress, you can do a lot without any knowledge of web designing.

But if you want to style elements in your blog post and pages in the way you want, you will have to use CSS.

In WordPress, you have an option to add custom CSS.

Today in this article, I will show you how you can add custom CSS to your WordPress website.

You can do it in more than one way. I will share all those and some CSS codes that you can use to style your images in your blog post.

I will show you how you can add different styles to elements in your blog post, just by calling a CSS class.

So let’s get started.

How to add custom CSS in WordPress?

To add custom CSS to your WordPress website, go to Appearance>Theme file editor.

go to appearance>theme file editor

Here you can see it as shown in the image below. There you can write your CSS code.

add your custom css here

But if a WordPress update is released and when you update it, chances are code there will be removed.

So we have two methods to add custom CSS to WordPress.

Method 1: Using the Built-in CSS editor

1. The first step is to go to “Appearance” in your WordPress dashboard. Then click on “Customize”.

Here you can customize your template like changing the font, sidebars, categories, etc…

When you click on “Customize” you will see a page just like the image shown below.

click on additional css to add custom css

2. Here click on ‘Additional CSS’. Then you can see a code editor like the image shown below.

add your CSS class in additional CSS

3. You can write your CSS code here. Write your CSS code under the template code.

Method 2: Using a WordPress Plugin

1. First, in your WordPress dashboard go to ‘Plugins’, and then click on ‘Add new’.

2. Then search for WordPress plugin ‘Simple custom CSS‘. Install the plugin and activate it.

add custom CSS to WordPress using a plugin

3. Then go to ‘Appearance’ and you will see an option called ‘Custom CSS’. Click on it.

write CSS code in simple custom CSS plugin

4. Now you will see the Simple Custom CSS plugin dashboard. Here you can write your CSS code. This is another way to add CSS code to your WordPress.

I would recommend using the build-in CSS editor because installing an additional plugin for it would make your website load slower.

How to add custom CSS styles to elements in WordPress blog posts?

For this first, you need to either use the built-in CSS editor or the simple custom CSS plugin. The steps are the same for both. We will be using the built-in CSS editor.

1. First go to Appearance>Customize>Additional CSS. Now we need to write the CSS code.

For example, first, we can look at how we can add an image box shadow.

2. Create a class. Make sure you create a unique class name. This means creating a class name that is not already in use in the template. If the class name is in use, our code will mess up the code in it. Create a class name like the image shown below.

create a CSS class and publish

3. The image above shows the code for image box-shadow, increasing border radius, and adding border for the image. You can do these not just for images but for any other elements in your blog post. The first step is always creating the class and writing the CSS code. Publish the code.

4. Now we need to add this class to our image so that the design will appear on the image.

For that, edit the post you want to design. Click on the image you want this design to appear. In the right sidebar, click on Advanced.

add the CSS class in elements in your blog post

Now you will see HTML anchor and Additional CSS classes option. Under the ‘Additional CSS class, type the class name that you created.

if you want the image to have a border, then add the class containing the code for the border. Then preview your page. You will see that the border effect is added to your image.

preview the blog post
Image border preview

You can add any kind of design to any elements on your blog post by creating a class and adding it as shown above.

If you want to add a design to a particular element in all of your website, let’s say you want to add a certain color to text that contains links, then you can say code something like this.


This will add color to all tags on your website (ie . links).

Code for increasing image border-radius


Code for image box-shadow

.bloggerscore-image-shadow {
  box-shadow: 0 5px 20px rgb(0 0 0 / 10%) !important;

Code for image border


So I hope you understood how you can add custom CSS styles to your elements in WordPress. If you want to learn CSS for designing your website, here’s a helpful website. learn CSS.

You can learn some CSS styling from W3schools and add different designs to elements in your website. If you have any queries, feel free to ask in the comments. I will respond to all.

If you want us to design or build you a website, contact us mail [email protected]

Leave a Comment