Unlock the Power of Your WordPress Website: 2 Easy Steps to Adding Custom CSS in Block Theme

If you’re using a Block theme like Begnas Theme (Free WordPress Theme) on your site, you might wonder how to add extra styles. By adding custom CSS in Block theme, the design of the site can be customized as per requirements. The Additional CSS field is available in Gutenberg Editor to give extra styles to the WordPress Block Theme.

If you have a background in using Classic WordPress, you may know that WordPress customizer was used for additional CSS. With the introduction of the Block theme, it has been moved to the Site Editor.

Step 1: Site Editor

In the Block theme, an option to insert CSS code is available within the Site Editor.

Note: Understand the differences between Site Editor and Page Editor. This option is not available in the Page Editor

1. From your WordPress dashboard, go to Site Editor by navigating Appearance > Editor from the left menu.
2. Click on anywhere in the content area of the Gutenberg Editor.
3. It will open up various settings and options.

Step 2: Find and Use Additional CSS Input Field

1. Click the circular icon with half white and half black, revealing Styles settings.
2. Click the Kebab icon (3 dots below the circular icon)
3. Then, click Additional CSS
4. Finally, you’ll get a textarea where you can add your CSS which applies to your site globally.

If you do not have CSS knowledge, you can explore it through this Tutorial on Using CSS for WordPress.

Watch Video Tutorial