It is possible to add your own custom CSS to your WordPress site, whether you are using a default template, a template you created, or a template you downloaded. To add custom CSS, start by opening WordPress with your site. I’ll be using the VBJournal.com site, which is shown in Figure 1 after it was opened via WordPress.
Figure 1:VBJournal.com
At the time this article was written , the site was using the custom BloggerBuz template. Even though this was a downloaded WordPress template, additional CSS can be added.
To add your customized CSS, start by opening your site in WordPress and selecting Appearance and then Customize menu on the left as shown in Figure 2.
Figure 2: The WordPress Menus to get to the CSS customization area.
This will bring up options similar to what are shown in Figure 3.
Figure 3: The Customize Appearance options.
You’ll want to select the “Additional CSS option at the bottom of the menu. This will then display a box on the lower left as shown in Figure 4 that can be used to enter your own CSS .
Figure 4: Box for adding customized CSS
You can enter CSS into the box. The CSS you enter will be previewed on the page shown to the right in Figure 5. In this figure, you can see that the following CSS has been entered:
/* My custom CSS */
h1 {
color: #ff00ff;
}
P {
font-size: 24px;
color: red;
}
h2
{
color: green;
font-color: 10px;
}
Figure 5: Adding custom CSS and the preview
Note that the CSS shown in Figure 5 is pretty ugly. CSS was added to change the font sizes and colors for the H1, H2, and the p tags so that you could see how easy it was to make the changes. For your own CSS updates, you should do something a bit more sane! Once you’ve added your new CSS, you’ll want to click the Publish button to apply it to your live site.
You should note that these updates will be applied to the current template. If you update the template, there is a chance your additions will be lost. As such, before doing a template update, you should copy your additional CSS and then reapply it after the update.
An alternative to using this method for updating the CSS for a site would be to install a plug-in for customized CSS. There are a number of CSS plug-ins that can be used for this. These include:
- Simple Custom CSS and JS
- WP Add Custom CSS
- Simple Custom CSS
- Custom CSS and JavaScript
- Custom CSS Pro
- Custom css-js-php
- Modular Custom CSS
- AccessPress Custom CSS
- And many, many more…
If you chose to use a plug-in, then your customized CSS will still be available if you update your theme or even change your theme.
From Here…
Two options for customizing your CSS have been mentioned in this article. They are the easier options to use. You could also apply changes directly to a theme to update the CSS. Additionally, you could create a child theme. These two options are for more advanced WordPress users, whereas the options mentioned in this article were much easier to apply for all users of WordPress.
