We are going to add some simple CSS changes to the headers and the page body to see the custom CSS in action. To do this, follow these steps:
- Log in to the WordPress Dashboard as an administrator.
- Click on the Appearance menu.
- Click the Customize option.
- Click the Additional CSS tab to see the following screen. The default instructions will be displayed for use. You can click the Close link after reading the instructions:
- Open the browser inspection tools and find the CSS class for the site title by right-clicking on the site and clicking the inspection tool on your browser. The following screenshot shows the CSS class using the inspection tool of the Chrome browser:
- Add the following CSS code to the Additional CSS section to style the title of the site:
.site-title{ background: red; padding : 5px;}
This style change will be shown immediately in the header.
- Click the Publish button to save the changes.
Now, if you visit the home page, you will see the style changes. Similarly, we can visit any page/post and use the customizer to add dynamic CSS for specific posts/pages.