WordPress has made it possible for anyone to be able to create a website easily.
However, if you will like to become a professional website builder, you might need to learn how to code so as to get the best out of your website. One of the easiest ways of getting the best out of your site is by learning how you can make use of custom CSS in WordPress.
Cascading Style Sheets is one of the most widely used languages in web development because of its simplicity.
With CSS, you can modify many options on your website, including the appearance, layout, fonts etc.
CSS gives you more access to tweak anything you want on your website. If you are interested in using CSS and you don’t know where to start, then you are reading the right article.
What is CSS?
The first thing we need to talk about is Hypertext Markup Language (HTML). This is the basic language used in writing your website and it’s quite descriptive in nature. HTML gives you access to all the elements that were used in creating your website.
HTML can also be used to dictate the appearance of your website, and it can be used to give your website a specific look. For example, if you would like to make all the titles on your website to appear in green, all you need to do is include HTML code with the specific instructions for all the titles.
This takes us to Cascading Style Sheets, which is very important to the appearance of your website. You can use CSS to dictate how the elements of your website will look like. For example, use CSS to center a button position in your content.
CSS also makes it possible to modify the elements of your site without changing the HTML content.
The ability to work on both structure and style separately by using CSS ensures that you can easily make changes to your site. In addition, it means that you will be able to use CSS for simple actions that do not require knowing much about HTML.
Although having the basic knowledge of HTML does help in making things easier.
Where to add CSS in WordPress
Although you can add CSS directly to your website style sheet, we don’t recommend it because it is quite easy to make mistakes, and any alteration you make will not be loaded when you update your theme except if you are using a simple theme. In short, if you are using a premium WP theme – don’t do it.
The best and the safest way of adding CSS to WordPress is by navigating to “Appearance” on your dashboard, then click on “Customize,” from there you can click on the option named “Additional CSS” placed by the left side on the “WordPress Customizer” interface.
You will find an empty editor that you can use to write your line of CSS code without tampering with the already made style sheet. You can use this box to type as many lines as you want, and to make it better; there is a live preview feature that shows your changes.
This will give you an idea of how you are doing before publishing your changes.
If you are interested in knowing the type of CSS tweaks that you can make to your WordPress site, don’t worry. I will explain some of the tweaks that you will find quite useful.
Customizing your WordPress site with CSS
Like I mentioned earlier, you can modify any aspect of your website using CSS in WordPress. You can basically change anything, and we’ve talked about changing the text color, if you like your website to look more unique, you can change the color of each post title.
This will definitely grab the attention of anyone that is visiting your site.
There are two ways of changing the color of each post, and we’ve talked about the first method. However, if you don’t want to be naming the colors, you are allowed to use hex codes to get the correct shade.
For example, instead of writing colors like “purple” or “green,” you can easily replace the word “purple” with “#9C33FF” or any other color that you prefer.
Then you will see the new color in the live preview and if you are satisfied with the new hue, you can click on Publish to save and make the changes live.
If you will like to make changes to the body text of your website, it is quite easy. For example, you can easily change the font style and size of the body text.
To change the font size of a body text to 16 pixels, you can type in this line:
Once you’ve done that, you will be able to see the changes in the customizer. Other CSS tweaks include changing the length of the sidebar, and you can also modify the background color and the padding. All you need to do is move to a new line and add something like this:
You should also know that the code you just typed in will affect all your widgets.
Although, you can still make alterations to each widget if you want. For example, you can alter the background of just your search widget by using “.widget_search” in place of .widget-class that we used above.
By now, you should have an idea of how CSS works; the first line of a CSS code determines the element that you are altering. The other lines that are in bracket contain instructions about how you want the elements to be changed.
Where to learn more about CSS
There are several articles online that can greatly help you to learn more about CSS and how you can use it on your WordPress site. If you come across any issue while using CSS, all you need to do is a simple Google search, and you will see the answer.
Online guides like MDN web docs from Mozilla can be quite handy whenever you come across any issue about CSS.
Writing lines of code on WordPress can be quite intimidating if you are a beginner.
However, most of the widely used languages that work with WordPress are quite easy to learn and modify.
Although it will take time, once you understand how it works, you will have full access to all the elements of your website.
You will be able to modify the color, layout, background style and a lot more using CSS and not forgetting the live preview feature that shows your changes before they get published.