How to Add Custom CSS to Your WordPress Site

Wordpress

How to Add Custom CSS to Your WordPress Site:-

There are so many websites leading on internet that are using WordPress platform and looking pretty much. The best thing of using WordPress is that you can customize appearance of your WordPress site theme by using custom CSS and tweaking its style sheets.

There are lots of ways available to change your Website’s CSS. In this post we are going to show you four methods of customize your WordPress site CSS. Using the default theme customizer , editing your theme’s style.css, using plugins or child theme.

How to identify a CSS Selector:-

CSS allow you to add styles with HTML that defines the web page structure. The Main & initial thing is to decide which part you want to modify. After this can be done you have to seek out the CSS selector corresponding to that element. Major web browsers allow you to identify the CSS selector of a particular element from inspect element.

Here’s how you can find the CSS Selector in the Chrome Browser:

  • Right click on the element which you want to modify & select inspect element from drop down menus.
  • You will see two splits screen appear in your browser. On the right portion you will see design information which has the details of HTML & CSS and in the left side you can preview the web page.
  • The CSS selector of the page element you want to modify will displayed first in the list. Copy it into the clipboard.

How to Customize your WordPress site with CSS:-

  1. WordPress Theme Customizer:- The Default theme customizer is simplest and easy way to modify the CSS. You can also add custom CSS coding via the theme customizer.

To access the Theme Customizer navigate to Appearance and then Customize from the admin panel of your WordPress site. You will automatically redirect to Customizer’s interface with the customizer menu. At the left side of your front end preview you will see Additional CSS menu item.

A text box will appear to enter the custom CSS Code. One of the great advantage of this CSS is also that you can preview your changes live on web.

  1. Active Theme’s Style.css File:- You can edit the style.css file of your WordPress site directly via backend by navigating to Appearance & then Editor. You will redirect to theme editor  where on the right sidebar you will see the style.css file.

If you add custom CSS directly to the active theme’s style.css file then you can view its existing code. This will make it easy to identify that you need addition coding or you can achieve the goal simply by editing the existing code.

  1. CSS Plugins:- If for a reason your site does not support additional CSS , then you can take advantage of a CSS plugin. This is the most convenient way of using Custom CSS codes. One of the main advantages of CSS Plugin is that the changes in theme will not overridden if you update it.
  2. Child Themes:- If you have download a theme in which you want to make changes , always go ahead with child theme instead of editing the main theme. Because if you make changes in the main theme you will lose the customizations you make when the developer of the theme makes an update.