Transform Your Site Design with Custom CSS

Did you ever want to change certain aspects of your website’s appearance, like the size of a heading or the color of hyperlinked text, but weren’t sure how? Custom CSS scripts will tweak the look and feel of your site, and you can edit some basic parts, even with minimal technical knowledge. 

What is CSS?

CSS (Cascading Style Sheets) is a language that helps you edit aspects of a website’s basic structure, which is written in HTML. Through CSS, you can control things like color, fonts, sizing, and layout elements such as margins and padding. 

Adding custom CSS to your site can help you tailor the default design of your WordPress theme and produce your desired look and feel. 

How to Add Custom CSS in WordPress

WordPress makes it easy to add custom CSS to your site. Previously, you had to edit the CSS directly in your child theme, which was cumbersome for beginner users. Alternatively, you had the option to download and install a plugin to help you make CSS changes. 

Now, you can easily tweak the CSS on your site straight from the WordPress dashboard without installing anything extra. 

Here is How You Edit CSS Within the WordPress Dashboard

  1. Navigate to Appearance > Customize.
  2. Select the Additional CSS option from the menu on the left in the WordPress Customizer.

This editing area will allow you to add your own CSS without having to sort through an existing style sheet in your theme’s code. You can add as much custom CSS as you want and preview the changes instantly, which allows you to see how the changes will look before you publish them on your site. The Additional CSS editing tool also analyzes your code and will notify you of any errors.

Custom CSS Examples

With custom CSS, you can tweak nearly every aspect of your WordPress site, from colors to fonts and layout. The sky is the limit. 

Ready to see some custom CSS in action? Below, we will provide an example of a basic CSS adjustment you can make: heading text color. 

If you want to make the subheadings of your blog posts stand out by changing the text color, try adding this line of code to your Additional CSS area. In the example below, we are editing every H2 tag throughout the site. The H2 tag is commonly used for subheadings.

Here is how our subheadings appeared before we made the change (the theme default color is black.)  

And here is how it appears after adding the custom CSS in WordPress. 

As you can see, the subheadings changed from black to orange. This change will now be applied to every subheading (H2) on your site. 

How to Inspect and Tweak Your Site’s CSS

After reviewing just a little bit in an online tutorial about how CSS works, you can begin making changes to your website’s style. 

Not sure how to locate the correct CSS classes in the code? The Inspect Element tool in most web browsers enables you to view a site’s CSS and even play around with a live site’s CSS in the browser. When you see something that you like, you can take the relevant class and ID selectors and attributes and move them to your site. 

The video below will walk you through the steps to inspect and edit your CSS in WordPress.

To recap, in order to edit your site’s CSS by using the Inspect Element tool:

  1. Right-click anywhere on the webpage, and click “Inspect.” 
  2. Edit the CSS in your browser until you are happy with the way it looks.
  3. Copy and paste whatever CSS changes you made into the Additional CSS section of the WordPress Customizer. 

Conclusion

Editing your website’s code may seem intimidating at first, but adding custom CSS to your WordPress site is surprisingly user-friendly and easy to learn.  Learning a few CSS tricks will allow you to personalize your site’s design, including fonts, colors, and layout.

If you want assistance customizing your WordPress site or want general site maintenance, contact us to learn how we can help.

Leave a comment



Stay in Touch!

Please note: As of January 2020, all IRG Websites services are handled via illuminea: a LeverageIT company. All new and existing customer requests will be handled through illuminea.

irg-logo-transparent-300px

Copyright © 2020