add custom css

Add custom CSS to make your site Beautiful- WordPress Tutorial

Add custom CSS to make your WordPress site Beautiful

Add custom CSS to make your site Beautiful: There may be some blocks that not look good. Some sections on your WordPress site that not look as per you. Want to change them. You can Customize them with adding Custom CSS. It’s easy as writing your name.

Browsers show HTML and CSS

When you visit any site. You only see it’s HTML and CSS. All browsers show only HTML, CSS and JavaScript. All popular browsers like ChromeFirefox and Opera allow you to look into site’s HTML. Not only these browsers show visible site but also allow to see it’s structure.

Now open any of these browsers and open your WordPress site. And right click. You can see comb menu and Inspect menu.

How to Inspect


Also, see HTML and CSS box on inspecting. Like Below image.

inspection window

Selecting An HTML Element

You can select an HTML element in HTML part in Three ways.

  1. By Clicking HTML
  2. By right click on visual part and select inspect
  3. With inspecting tool.

Whenever you select an HTML element. Related CSS will come in CSS part. You can add your CSS in CSS part. Added CSS will apply on-site visual layout. It will be as longer as the page is not refreshed.

add css to site

You can add custom CSS by clicking the + button on CSS part. Related HTML attribute will generate as per highlighted part. Now add your custom CSS to this HTML element.

You can learn basic CSS rule at W3schools. You will find it too easy.

Add Custom CSS to your site

When you have done with custom CSS, copy it.  Now login to your WordPress site dashboard. Go to Appearance >> Customize >>Additional CSS. Please note that feature comes with the latest update of the WordPress. If you do not find such feature please update your WordPress.

add custom css in WordPress

Add custom CSS at the appropriate place. Please make sure that all the braces { } are closed properly. Sometimes added custom CSS will not work. You have to put !important in the CSS rule. As some rule is defined then it will run according to their position.  If you add !important  in CSS rule then this rule will be overridden.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.