WordPress users are pretty familiar with the concept of themes, its an obvious thing if someone is looking to change the look and feel of the site by making some CSS changes. It determines the overall look of the site and yes it can be changed easily.

In this tutorial we are going to focus on how you can make CSS changes without affecting actual code of your theme.

What is CSS?

CSS stands for Cascading Style Sheets and is a language used to identify and describe how content looks on a page written in HTML. W3Schools defines it quite nicely: “Styles define how to display HTML elements.”

Within WordPress, CSS works just as it would on any other website. You have your main CSS file (style.css) that dictates all of the aesthetic and formatting elements for your own theme. Then, you have bits of CSS code within your main PHP files which reference the stylesheet and tell the site where to put what.

Use Custom CSS Editor to add your custom CSS

If you want to apply some additional CSS changes which is actually not a part of the theme then it is highly recommended that you add your new CSS only under Appearance>> Custom CSS Editor section.

Benefit of using Custom CSS Editor

The CSS you add under Custom CSS Editor will be saved in your database so even after you update the theme those CSS changes will be there intact, so you will not have to work on backing up and putting your custom CSS code every time you update the theme to its latest version.

References:

You will need basic understanding of CSS to make changes like this. Here are some useful tutorials on how to use FireBug tool as it will help you to catch the exact CSS class(es) for any individual element(s):

https://templatic.com/theme-support/tips-n-tutorials/how-to-use-firebug/

http://getfirebug.com/whatisfirebug

Conclusion:

Using custom CSS editor should give you a nice start as you dive into WordPress theme customization, you can also be sure of not breaking anything on the website as you will not change core theme files.