{"id":25905,"date":"2020-05-22T14:48:14","date_gmt":"2020-05-22T06:48:14","guid":{"rendered":"https:\/\/facekungfu.com\/?p=25905"},"modified":"2025-02-16T22:22:45","modified_gmt":"2025-02-16T14:22:45","slug":"five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor","status":"publish","type":"post","link":"https:\/\/facekungfu.com\/en\/five-methods-of-custom-css-including-for-gutenberg-block-editor-and-elementor\/","title":{"rendered":"How to Add Custom CSS to WordPress: 5 Methods Including Block Editor & Elementor"},"content":{"rendered":"\n

This post is also as a topic shared on this WordPress Meetup!<\/p>\n\n\n\n

https:\/\/www.meetup.com\/Taoyuan-WordPress-Meetup\/events\/270651847<\/a><\/p>\n\n\n\n

“How to Do Custom CSS in WordPress” is a question asked frequently. Here are five methods including the best choices for what purposes you’ll need.<\/p>\n\n\n

Method 1
Custom CSS in WordPress – “Additional CSS” Tab <\/h2>\n\n\n

Starting with WordPress 4.7, you can now add custom CSS to your own theme from the Appearance Customize Screen<\/a>, without the need for additional plugins or directly editing themes and child themes. Just choose the Additional CSS<\/strong> tab when customizing your current theme to get started!<\/p>\n\n\n\n

\"Example
Example – Custom CSS in WordPress – Additional CSS Tab<\/figcaption><\/figure>\n\n\n\n

Any CSS changes you make will appear in the preview, just like other changes made in the customizer, this means you have time to tweak and perfect the look of your site, without actually changing anything until you are happy with it all!<\/p>\n\n\n\n

\n

VIA Codex, WordPress.ORG<\/p>\nhttps:\/\/codex.wordpress.org\/CSS<\/a><\/cite><\/blockquote>\n\n\n\n

Keep in mind that the CSS changes are tied in with your theme. This means that if you change to a new theme, your custom CSS styles will no longer be active (of course, if you change back to your previous theme, they will once again be there).<\/p>\n\n\n\n

Pros:<\/p>\n\n\n\n