How To Customize CSS On A WordPress Website

If you want to take your website and make it your own, then you need to learn a little bit of custom CSS. But don't worry, it's not that hard.

[clickToTweet tweet=”Editing #CSS on your #WordPress #website doesn't have to be that hard, learn how…” quote=”Editing CSS on your WordPress website doesn't have to be that hard, learn how…”]

Don't Be Afraid To Edit CSS

First off, CSS is not going to bit you, yes it can be a little scary at first, but after a bit of practice, you will know enough to be dangerous.

In fact, with a bit of practice, you will be surprised with the new level of control you have over the design of your website.

CSS Basics

So to get started, you need to familiarize yourself with the proper format for your CSS changes.

.post-title {
   display: none;
}

The first line is the class that you want to target. Then in the bracket is the properties that you want to change.

In this example, I am targeting the featured image of a post and I am setting the display property to none, which will hide the image.

How To Find CSS Classes

The hardest part of editing CSS is finding out the right class to edit. Luckily there are free web browser extension to make this process easier.

Personally, I tend to use Firebug which is a free web browser extension that is available for Chrome and Firefox.

How To Change CSS Properties

This is where the fun begins, changing the properties. But the problem is, how to know what you can change and how to format it.

This is the biggest challenge for beginners, but have to fear, google search is here. Yep, you heard right, just do a simple google search learn exactly what to enter for the properties.

And Easier Way To Edit CSS

Guess what? Yes, there is an easier way, and it's called CSSHero. It is a WordPress plugin that you can use to easily identify elements and easily change their properties.

In fact, you can see it in action in this blog post, the button what takes you to more info on CSSHero was designed in CSSHero.

Conclusion

It is really important to learn some CSS basics to unlock the true potential of your website. Whether you use a commercial tool or one of the free inspectors, don't be afraid to experiment and learn.