How to quickly test and add custom CSS code in WordPress ?
The Additional CSS Panel ( built-in feature of WordPress ) provides a really powerful tool for applying simple CSS changes and seeing the effect immediately. This is a really useful feature allowing users to test different style with various CSS code in real-time preview, and publish when satisfied of the result.
The custom CSS added this way is applied globally to the entire website. To add custom CSS scoped to a specific page, you can use the custom CSS feature of Nimble Builder, a free page builder for WordPress.
Open the WordPress live customizer and navigate to the custom css setting.
Just remember to click the Save & Publish button to keep your changes.
Using the WordPress Custom CSS has many benefits :
- If you modify a theme directly and it is updated, then your modifications may be lost. By using Custom CSS you will ensure that your modifications are preserved.
- Using Custom CSS can speed up development time.
- Custom CSS is loaded after the themeβs original CSS and thus allows overriding specific CSS statements, without having to write an entire CSS set from scratch.
source : https://codex.wordpress.org/CSS#Custom_CSS_in_WordPress
Not sure how to use Cascading Style Sheets (CSS) code? No worries, we have created a few pages of documentation to help you get started :
- How to inspect your WordPress webpages code in your browser ?
- Basics of CSS and HTML for WordPress themes
- Mozilla Fundation website.