How to Add CSS in WordPress (The Easy Way)

How to Add CSS in WordPress (The Easy Way)

Some of the links in this post are affiliate links. This means if you click on the link and purchase the item, We will receive an affiliate commission at no extra cost to you. All opinions remain our own.

One of the explanations WordPress is the most well-liked content management system (CMS) round is as a result of its very newbie pleasant. You don’t need to have any technical data, coding abilities, or experience in web growth to create an absolutely functioning website from the bottom up.

That mentioned, for those who can step up their sport and make their site a little extra visually interesting, there is an approach to customize your site with solely a little bit of coding data.

Learning how you can use CSS in WordPress doesn’t need to be scary. In reality, it’s truly very easy to do.

If you’re able to make the leap and learn to use some code on your WordPress website to make it stand out from the competitors, maintain reading. Today we’re going to clarify what CSS is and the way you should use it to make modifications to the design of your website.

What is CSS in WordPress?

Cascading Style Sheets (CSS) is a language used in web design to vary the visible look of a website. For instance, you should use it to vary your site’s format, fonts, colors, and far more. And the good half about utilizing CSS in WordPress is that it allows you to override some of your theme’s default settings.

This is useful for these utilizing an in-style WordPress theme. When a theme is extensively used, although the content differs from site to site, the essential design is identical. This makes it troublesome for your website to look totally different from all the opposite websites utilizing the identical theme with the identical design parts.

How Does CSS Work?

Have you ever heard of Hypertext Markup Language (HTML)?

HTML is the first language used to create your WordPress website. Its job is to inform web browsers what your website appears like. In this approach, when a site customer clicks on your website, they see issues corresponding to colors, images, and written content. Without HTML, your website could be pages of code that nobody might perceive.

To see what HTML appears like, all it's important to do is click on on the three dots in the highest proper hand nook of the Gutenberg Editor and choose Code Editor:

The downside with modifying HTML to make your website look a sure approach is that it’s extraordinarily time-consuming (to not point out, it's important to perceive code). For occasion, let’s say you wished to vary all of your published titles to be a totally different color. You must go into every single blog publish you’ve ever written and manually edit the HTML code to vary the color.

That’s why utilizing CSS as an alternative is so useful.

CSS helps decide how your website’s HTML parts are going to look on the website. And the best half is, it’s a blanket language that may apply to all parts of your website with a few easy traces of code.

Using CSS in WordPress provides you full management over how your site appears and makes altering sure parts a cinch. And you don’t even have to know how HTML works. You can simply add some CSS code to your website and alter its look. It actually is that straightforward.

How to Add CSS in WordPress

So, you understand you need to make some design modifications to your WordPress website. And you now know that utilizing CSS is a possibility, even in case you have no coding data.

But how do you add CSS in WordPress?

1. WordPress Theme Style Sheets

You can add CSS code snippets to your WordPress theme’s type sheets to make modifications to the general look of your website.

That mentioned, this methodology is not really useful for most individuals. Adding code to your father or mother theme poses a few dangers:

  • You may actually mess up the looks of your website in the event you don’t know what you’re doing
  • Any time you replace the theme, all of the modifications you’ve made by including CSS will be misplaced, which suggests you’ll need to start over again each time you run and replace
  • You may break your website in the event you make modifications in the incorrect place

If you’re a superior WordPress user and need to add CSS to your theme’s type sheets, it is best to no less than accomplish that by utilizing a little one theme. In this approach, in the event you make a mistake you don’t smash your whole website. Plus, anytime you replace your father or mother theme, your little one theme will maintain onto your CSS modifications.

For extra info, try our article on every little thing it's worthwhile to learn about WordPress little one themes.

In the meantime, try extra newbie pleasant methods to add CSS in WordPress.

2. Theme Customizer

In your WordPress dashboard, there’s an approach to entry the Theme Customizer. All it's important to do is navigate to Appearance > Customize.

(*3*)

This will deliver you to the Theme Customizer interface. You’ll see a preview of your website and a bunch of choices on the left-hand facet.

To add CSS to your WordPress, click on Additional CSS.

add css

When you do that, you’ll see a clean textual content field that you could add your CSS code to.

add css theme customizer

When a legitimate CSS rule is added, you’ll see the modifications mirrored in the preview panel of the Theme Customizer.

For instance, let’s say we wished to vary the publish title from black to blue. We would add CSS into the clean textual content field and see this in the preview panel:

(*2*)

Notice how “Hello World” is now not black.

In addition, see how we use the phrase “blue” in the CSS code. If you need a particular shade of blue, you may all the time enter hex codes. For occasion, we would substitute the phrase “blue” with “#61d4f4” to get this color for the publish title:

(*1*)

You can add as many code snippets to this part as you need. Just keep in mind, any modifications you make right here will apply to your whole website. Also, the modifications you make in one theme will not seem in one other theme in the event you activate it. If you modify themes, you’ll need to re-do all CSS customizations.

Click Publish if you’re completed.

3. CSS Plugin

If you don’t need to use the Theme Customizer to add CSS in WordPress, you may all the time use a free WordPress plugin like Simple Custom CSS.

This lightweight plugin will create new menu merchandise in your WordPress dashboard underneath Appearance. It will be labeled Custom CSS. When you click on on it, you’ll see a clean textual content field just like the one discovered in the Theme Customizer.

simple custom css

After you’ve added your CSS code snippets, click on Update Custom CSS to avoid wasting your modifications.

The benefit of utilizing a CSS plugin like this is that even in the event you change themes, your customized CSS will be accessible. This means you received’t need to re-enter it over again.

Other useful instruments for customizing your WordPress site utilizing CSS embrace:

Example CSS Code Snippets

You can change virtually any design ingredient on your WordPress site with CSS utilizing this fundamental breakdown:

  • First Line: which ingredient you’re altering, corresponding to a publish title (h1), textual content inside a paragraph (p), or a widget space (widget)
  • All Other Lines: particular directions for what is going to be modified, enclosed in brackets

There are tons of totally different CSS code snippets that can be utilized to customize your website. And it might be unattainable to listing all of them.

That mentioned, if you wish to customize your website utilizing CSS, right here are some instance code snippets to indicate the way it works.

Font Family and Size

To change the font and its dimension, add this CSS code:

p {
font-family: Georgia;
font-size: 20px;
}
(*5*)

You can substitute the font household with the font type you need and alter the quantity to make the font dimension as large or small as you need.

Sidebar Customization

Let’s say you need to add some customization to the sidebar widgets on your website. To add a good background color and padding, add this CSS code to a new line:

.widget {
background: #B9EBFA;
padding: 25px;
}
widget css

Remember, this CSS will apply to all widget areas on your website. If you need to apply the change to a particular widget space, your CSS will have to replicate that.

For instance, let’s say you need the CSS to use solely to the Search Bar widget. To do that, change the CSS to seem like this:

.widget_search {
background: #B9EBFA;
padding: 25px;
}
widget css specific

For extra methods to customize your site, be sure you try these 5 easy CSS codes.

Where to Learn More About CSS

If you take pleasure in working with CSS, there are lots of locations for studying CSS for WordPress:

If you’re having to bother discovering a CSS code to make a particular change on your website, normally an easy Google search will assist. But in the event, you actually need to dive in and make some critical modifications to your website, try some of the above assets, and study CSS comprehensively.

Final Thoughts

Having a distinctive website that stands out amongst all of the others is a vital half of your total success. And it simply so occurs that including CSS in WordPress is a straightforward approach to customize your site.

Learning CSS is not laborious to do if you understand the place to start. And whereas it could take a little time to study some of the commonest code snippets, earlier than you understand it you’ll be capable to make all kinds of neat modifications to the looks of your site with little or no effort in any respect.

Just keep in mind to make use of the Theme Customizer or a CSS plugin to add CSS in WordPress. There’s no sense breaking your site and risking critical downtime over a few design modifications.

Have you ever added CSS in WordPress? Are there any go-to code snippets you’d prefer to share? If so, we might love to listen to all about it in the comments beneath.