CSS stands for Cascading Style Sheet. It is designing language that controls the overall look and presentation of a web page. Things like colors, fonts, layout, spaces and even images are applied using CSS. How your webpage looks from the front-end is completely depended on CSS. By default, WordPress keeps its main CSS stylesheet inside the style.css file. If you want to implement your own design or change the look of your website, then you will need to create a custom CSS file. This article shows how customize WordPress Site with CSS.
How to Customize WordPress Site with CSS
Implementing the custom CSS is much simpler than you might believe. You can do the same task of adding your CSS design in number of ways. Here are few ways to add CSS in your theme .
Method 1: Editing Your Theme’s style.css File
For many designers directly modifying the default style.css file is the easiest way to add their design. One way to get access to style.css file is from the admin dashboard. Just go to ‘Appearances’ and then ‘Editor’.
The other way to find stylesheet is to login to your host cpanel and locate theme folder. Once you locate the theme folder you can find style.css easily. Although this way looks easier, it has its own drawbacks. If you decide to change theme, you will need to create another CSS. Every theme has a their own CSS file and you will have to code different CSS for different theme.
Method 2: CSS Theme Modification with WordPress Customizer
Most theme will allow you to change some designs of your website from Customization area. The customization area works from the Child CSS file in co-operation with the primary stylesheet. To reach customization area go to ‘Appearance’ and then ‘Customize’ from the dashboard.
However this customizer allows only the limited sets of changes. Also you will lose the changes when you change theme.
Method 3: CSS Plugins for Customizing WordPress
There are many CSS plugins to make life easier and to add CSS code easily in the theme. The benefit of using plugin is that the design changes in one theme will work for other themes as well. Plugin will automatically save the code of one theme and use it in other theme during theme change. For beginner CSS coders, plugin is a great way to add CSS in WordPress without the fear of crashing the site. Here is a list few popular plugins you can try:
- WP Add Custom CSS
- Simple Custom CSS
- Theme Junkie Custom CSS.
- Easy Code Placement
- Child Theme Configurator
Method 4: Adding Styles to WordPress with Enqueuing
If you are creating your own theme, you may want to add your own custom CSS. While adding styles it is absolutely necessary to add stylesheets using standard WordPress Methods. Using enqueue in function.php to load your stylesheet is the right way since it allows your styles to work with harmony with the existing themes and plugins.
Here is a simple example of adding the stylesheet name custom.css using enqueue. You can add this function in the function.php file with the parameters properly specified.
wp_enqueue_style(custom, get_template_directory_uri() . 'custom.css');
Here wp_enqueue_style() is a function which takes two parameters. The first parameter is the name of the CSS file and second parameter location of the file.
If you have basic understanding of how coding works, using CSS is a great way to take control of overall appearance of your website. No matter which theme you use the above mentioned methods will help you to easily implement the custom CSS in your theme easily.
Latest posts by Kantiman Bajracharya (see all)
- What are Different WordPress Theme Licensing Terms? - December 21, 2017
- 4 Tips to Optimize Your WordPress for Social Media Share - November 30, 2017
- What is WordPress? Is WordPress Free? Why is WordPress so popular? - November 22, 2017