What is CSS?
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of web pages, including colors, layout and fonts. It allows one to adapt the presentation to different types of devices, such as large screens, small screen, or printer.
CSS allows you to store style presentation information (such like Layout and Colors) separate from your HTML structure which allows precision control of your Website layout and makes your pages faster and easier to update.
Custom CSS in WordPress?
Adding custom CSS to your own theme from Appearance Customize Screen in WordPress begins from WordPress version 4.7 without the need for child themes, theme editing.
Why Adding Custom CSS to your WordPress?
- Using custom CSS can speed up development time.
- Custom CSS ensures that whatever modifications you made on theme you’re using are preserved.
- Custom CSS is loaded after the theme’s original CSS and thus allows overriding specific CSS statement, with you having to write the entire CSS set from scratch.
Methods of Adding Custom CSS to your WordPress.
Adding custom CSS to your WordPress is free and super-comfortable because as you doing it you would be able to see your changes with a live preview instantly.
Let’s quickly look at how you can add Customize CSS to your WordPress.
Method 1: By Adding CSS using Plugin
Using this method, you have to install a WordPress plugin called Simple Custom CSS Plugin.
STEP 1: –
- Go to your WordPress dashboard– Click on Plugin – Select Add New.
- Search for Simple Custom CSS in the search box.
- Then, Install and Activate the plugin.
You can check How To Install A WordPress Plugin.
- Upon activation simply go to Appearance– Click on Custom CSS and write down or paste your custom CSS.
- Click on Update Custom CSS button to store your CSS.
The CSS has been added, you can now view your website to see the custom CSS in action.
- Another advantage of using this method is that your custom CSS will be available even when you change your theme.
- This method is useful for users who are not using WordPress 4.7 or later versions of WordPress.
STEP 2: – Adding Custom CSS Using Theme Customizer
- Go to Themes – Customize page on your WordPress Admin page.
- This will launch the WordPress theme customizer interface and you will see your site’s live preview with a bunch of options on the left pane. Click on the Additional CSS tab from the left pane.
- The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.
- Write down or paste your custom CSS and check your website’s live preview pane to see how it looks on your site
- Then, click on the Save & Publish button on the top when you are finished.
- Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.