How to modify your WordPress theme’s CSS
As a blogger, we all wanted to change the colour, put a background image, resize the text and perform other modifications, but we could not because the template does not give us the ability to do so.
In this post, we will understand how to modify the style of your website even if you are a complete beginner in WordPress and do not have technical knowledge.
What is CSS and how it works in WordPress?
CSS (Cascading Style Sheets) is responsible for styling different HTML elements that make up a web page, and it works by selectors and properties.
Selectors are used to indicating the HTML element where a style should be applied (properties).
There are three types of selectors:
Element Selector: refers to an HTML tag, in this case, an H1 tag.
h1 {color: #FFFFFF; font-size: 36px;}
ID Selector: it is used to select a specific element, so the id must be unique.
#contact {color: # 333; background-color: #FFFFFF; }
Class Selector: Selects the HTML element with a specific class. This is the most used selector.
.button {color: #FFFFFF; background-color: red; }
The .button selector refers to all HTML tags assigned to the “button” class and indicates that they must have the properties of:
· Color: #FFFFFF; ▸ (white text colour since #FFFFFF in hexadecimal equals white)
· Background-color: red; ▸ (red background color)
Therefore, this HTML tag <a class="button"> would have the style defined in “button”.
The advantage of using CSS is that it is designed in a way that its properties can be overwritten. This means that if your template has defined that the colour of the H1 tags is white, you can simply overwrite that property without altering the original style.css file.
How to modify the CSS style of your WordPress template?
To overwrite the style of your template, you must first identify the item you want to modify and its selector/class.
For this, you will have to use the “Inspect Element” feature of your browser. It allows you to see the HTML and CSS of any web page. To edit CSS, it is recommended you use Google Chrome browser because it is easier to interpret.
To open the element inspector, you can use the F12 key, the keyboard shortcut Ctrl + Shift + I or by right-clicking on the element you are interested in modifying. Within the element inspector, you will get a panel where you will see the HTML code and CSS.
Hover the mouse on the coding (you will see highlighted different elements) to locate the item you want to modify. Once selected, in the CSS panel, you will see the selectors that affect that element and its properties. In the CSS panel, you can do tests by modifying the properties that appear or by adding new ones.
Note: Do not be afraid to make all the changes you want, as these are not saved. When you refresh the page (F5), everything will return to its original state.
Add and Overwrite CSS in WordPress
This method consists of overwriting the properties of the elements you want to modify without altering the original style.css file of the template. If you directly modify the file style.css when updating the template, all the default properties will be lost (unless you use a child theme).
Use a plugin that allows you to add your CSS, so you do not have to modify the original file. There are also templates that include the possibility of inserting own CSS without having to depend on external tools.
The plugin I recommend is Simple CSS. With this plugin, you can add CSS from the WordPress “customizer” and see the changes live. All CSS you add here will be saved to the database and changes will not be lost when updating the template.
In some cases, template styles have a higher priority, and your style changes will not be taken into account. In that case, you would have to use selectors of greater specificity.
Look at this CSS code:
.separate-containers .inside-article {
color: # 555;
border: 2px solid # 888;
border-radius: 10px;
}
Here we have used two selectors / CSS classes: “.separate-containers” followed by “.inside-article”.
Which means that inside the main HTML tag, the inside-article class is placed inside .separate-container condition and it has the following style: color: # 555 border: 2px solid. Therefore, that style has more value/priority than it is if put this way:
.inside-article {
color: # 555;
border: 2px solid # 888;
border-radius: 10px;
}
In this second code, there is no condition and the code is simply assigning a style to class. So, if you use this second code with other properties, it would have no problem, since these are new and do not overwrite any other style, just add it. If you see that the template is not getting your custom styles, try to be more specific with your CSS code.
Change CSS for a Specific WordPress Page
Another reason we recommend Simple CSS is because it allows modifying the style of a particular page or post, without affecting the rest of the site.
The procedure is the same as explained before but with a small difference. You will enter the CSS not in the Appearance-> Simple CSS, but inside the page or post, you want to change the style for.
When you are editing a page or post, you will see a Simple CSS panel. All the CSS changes you enter here will only affect the page you are editing at that time.
Alternatives in the form of Plugins
Although using Inspect Element capability is relatively easy, sometimes it is a bit tricky to find the right kind of element you want to modify. For that, some plugins are already proficient of searching for the correct selector and all the CSS code you would like to edit.
#1 CSS Site Origin
An excellent plugin to add your CSS to WordPress. With this plugin, you can edit the style of your template visually and see the changes live. Just select the element you want to modify, change its properties and the plugin will be responsible for generating the necessary CSS code.
If you just started with WordPress or you have zero technical knowledge and all this sounds extremely difficult to you, we would recommend you start with the CSS Site Origin plugin.
#2 CSS Hero
This would be a more professional solution since it is paid and has advanced options. As with the Site Origin plugin where you can modify the style visually, CSS Hero saves the history of your modifications.
It has pre-designed styles that you can apply directly to the elements. It also allows you to export your styles and reuse them in other websites. Some other beneficial features are easy animations addition and compatibility with the most popular WordPress templates and plugins.
Conclusion
As you have already seen, there are several ways to change the style of your web page, either by using the Inspect Elements strategy or using plugins. However, we would also like to emphasize the importance of a good template that comes with “Live Editor” and allows you to customise the templates, without just having to resort to these methods. Keep in mind that the more “visual” a template is, the more complicated it will be to modify the style.
As you start to make changes, little by little, you will get the trick to change CSS templates in WordPress. If you learn a little CSS and HTML, nothing can be better than this.
For more advanced CSS modification, you can always use our affordable WordPress Customization Service.
