- 1. Add Custom CSS with SeedProd (My Favorite Way)<\/a>
- <\/ul><\/li>
- 2. Add Custom CSS in WordPress Without a Page Builder<\/a>
- <\/ul><\/li>
- 3. Use a Custom CSS Plugin<\/a><\/li>
- 4. Edit Your Theme Files (Not Recommended)<\/a><\/li>
- Bonus: Target Custom CSS to Pages or Blocks<\/a>
- <\/ul><\/li><\/ul>\n\n\n
What Is Custom CSS?<\/h2>\n\n\n\n
CSS stands for Cascading Style Sheets. It\u2019s a simple language that controls how your WordPress site looks.<\/p>\n\n\n\n
For example, this bit of CSS changes a heading color to red:<\/p>\n\n\n\n
h1 {\n color: red;\n}<\/code><\/pre>\n\n\n\nAnd this one hides an element on the page:<\/p>\n\n\n\n
.hidden {\n display: none;\n}<\/code><\/pre>\n\n\n\nYou don\u2019t need to write code like this from scratch. Most of the time, you\u2019ll just copy and paste it into the right place.<\/p>\n\n\n\n
The key is knowing where<\/em> to put your custom CSS, and that\u2019s exactly what I\u2019ll show you next.<\/p>\n\n\n\n
Why Add Custom CSS in WordPress?<\/h3>\n\n\n\n
Sometimes you want to change a button color, center a heading, or remove a bit of extra spacing, and your theme doesn\u2019t give you a way to do it.<\/p>\n\n\n\n
That\u2019s where custom CSS comes in. It gives you control over the small design details that make your site look and feel just right.<\/p>\n\n\n\n
With CSS, you\u2019re not stuck with the default WordPress theme settings. You can fine-tune your layout, style, and spacing without switching themes or installing extra WordPress plugins<\/a>.<\/p>\n\n\n\n
Just remember: <\/strong>CSS helps tweak your design, but it won\u2019t fix bigger visual mistakes that custom CSS can\u2019t fix<\/a>, like cluttered layouts or poor navigation.<\/p>\n\n\n\n
So, how do you actually add custom CSS in WordPress?<\/p>\n\n\n\n
There are a few different ways, but I\u2019ll start with the one I use most often, and the one I recommend if you want full control without the hassle.<\/p>\n\n\n\n
1. Add Custom CSS with SeedProd (My Favorite Way)<\/h2>\n\n\n\n
![\"SeedProd](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2023\/02\/seedprod-drag-and-drop-WordPress-website-builder-800x572.png\")
<\/a><\/figure>\n\n\n\nIf you\u2019ve never used SeedProd<\/a> before, it\u2019s a drag-and-drop WordPress builder<\/a> that makes customizing your site super easy, even if you\u2019re not a developer.<\/p>\n\n\n\n
I use it all the time because I can build full themes or landing pages without touching any code. And when I do<\/em> want to add a bit of CSS, SeedProd gives me a simple place to do it.<\/p>\n\n\n\n
Before we get into the steps, it helps to have SeedProd set up on your site. If you haven\u2019t used it yet, here are a couple of beginner-friendly tutorials to help you get started:<\/p>\n\n\n\n
- \n
- How to Create a Custom WordPress Theme Without Code<\/a><\/li>\n\n\n\n
- How to Create a Landing Page in WordPress<\/a><\/li>\n<\/ul>\n\n\n\n
Once you\u2019ve built a landing page or theme with SeedProd, you\u2019re ready to add your own custom CSS. Let\u2019s start with how to do that on a single landing page.<\/p>\n\n\n\n
How to Add CSS to a Landing Page in SeedProd<\/h3>\n\n\n\n
To get started, open your WordPress dashboard and go to SeedProd \u00bb Landing Pages<\/strong>.<\/p>\n\n\n\n
Find the landing page you want to edit and click the Edit<\/strong> link next to it.<\/p>\n\n\n\n
![\"Editing](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/edit-landing-page-seedprod.png\")
<\/figure>\n\n\n\nThis will open the SeedProd page builder. In the bottom-left corner, click the gear icon<\/strong> to open your Global Settings<\/strong>.<\/p>\n\n\n\n
![\"Opening](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/global-settings-seedprod.png\")
<\/figure>\n\n\n\nFrom the left-hand sidebar, click on the Custom CSS<\/strong> tab.<\/p>\n\n\n\n
Now paste in your CSS. For example, here\u2019s one that styles your paragraph text:<\/p>\n\n\n\n
p {\n font-style: italic;\n color: #444;\n}<\/code><\/pre>\n\n\n\n![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/add-custom-css-seedprod.png\")
<\/figure>\n\n\n\nClick the Save<\/strong> button in the top-right corner.<\/p>\n\n\n\n
You can then preview your page to see the saved changes live on your website.<\/p>\n\n\n\n
![\"Example](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/italic-paragraph-text-example.png\")
<\/figure>\n\n\n\nHow to Add Global CSS with SeedProd\u2019s Theme Builder<\/h3>\n\n\n\n
If you\u2019re using SeedProd\u2019s Theme Builder to design your entire site, you can apply custom CSS that works across every page.<\/p>\n\n\n\n
To get started, open your WordPress dashboard and go to SeedProd \u00bb Theme Builder<\/strong>.<\/p>\n\n\n\n
Find the template called Global CSS<\/strong> and click Edit Design<\/strong>.<\/p>\n\n\n\n
![\"Editing](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/edit-global-css-template-seedprod.png\")
<\/figure>\n\n\n\nInside the builder, click the gear icon<\/strong> in the bottom-left corner to open Global Settings<\/strong>.<\/p>\n\n\n\n
From the left-hand sidebar, click the Custom CSS<\/strong> tab.<\/p>\n\n\n\n
Click the Edit Custom CSS<\/strong> button. This opens the WordPress Customizer in a new window.<\/p>\n\n\n\n
![\"Edit](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/edit-custom-css-seedprod.png\")
<\/figure>\n\n\n\nIn the Customizer, click Additional CSS<\/strong>, then paste in your code.<\/p>\n\n\n\n
![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/add-css-WordPress-customizer-seedprod.png\")
<\/figure>\n\n\n\nFor example:<\/p>\n\n\n\n
p {\n font-style: italic;\n}<\/code><\/pre>\n\n\n\nThis will make all paragraph text across your site appear italic.<\/p>\n\n\n\n
Click Publish<\/strong> to save your changes and apply them sitewide.<\/p>\n\n\n\n
You can now refresh your page to see the update live.<\/p>\n\n\n\n
![\"Example](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/italic-paragraph-text-with-custom-css.png\")
<\/figure>\n\n\n\nThis method is helpful for making global style changes like font adjustments, spacing, and color tweaks.<\/p>\n\n\n\n
2. Add Custom CSS in WordPress Without a Page Builder<\/h2>\n\n\n\n
If you\u2019re not using a page builder like SeedProd, you can still add custom CSS directly in WordPress. The steps depend on the type of theme you’re using, either a classic theme<\/strong> or a block theme<\/strong>.<\/p>\n\n\n\n
Classic themes<\/strong> use the older Customizer tool and often rely on widgets and page templates. Block themes<\/strong>, on the other hand, use the newer Site Editor<\/strong>, which lets you design your whole site with blocks.<\/p>\n\n\n\n
Let\u2019s start with classic themes.<\/p>\n\n\n\n
Use the WordPress Customizer (Classic Themes)<\/h3>\n\n\n\n
In your WordPress dashboard, go to Appearance \u00bb Customize<\/strong>.<\/p>\n\n\n\n
![\"Customizing](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/customize-classic-WordPress-theme.png\")
<\/figure>\n\n\n\nFrom the Customizer menu, click on Additional CSS<\/strong>.<\/p>\n\n\n\n
A text box will appear where you can paste your custom code. For example:<\/p>\n\n\n\n
p {\n color: #0073aa;\n}<\/code><\/pre>\n\n\n\nThis changes all paragraph text on your site to a shade of blue.<\/p>\n\n\n\n
You\u2019ll see a live preview of your changes on the right as you type.<\/p>\n\n\n\n
![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/custom-css-WordPress-customizer.png\")
<\/figure>\n\n\n\nWhen you’re happy with how it looks, click the Publish<\/strong> button to save your changes.<\/p>\n\n\n\n
This method works well with older themes that support the Customizer, and it doesn\u2019t require any WordPress plugins.<\/p>\n\n\n\n
Use the Site Editor (Block Themes)<\/h3>\n\n\n\n
If your WordPress site uses a block theme, you\u2019ll manage your design using the full Site Editor instead of the Customizer.<\/p>\n\n\n\n
To begin, go to Appearance \u00bb Editor<\/strong> in your WordPress dashboard.<\/p>\n\n\n\n
![\"Opening](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/open-WordPress-site-editor.png\")
<\/figure>\n\n\n\nIn the left-hand sidebar, click the Styles icon<\/strong>. It looks like a half-moon or a paint palette.<\/p>\n\n\n\n
![\"Opening](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/site-editor-styles.png\")
<\/figure>\n\n\n\nThen click the small pencil icon labeled Edit Styles<\/strong>.<\/p>\n\n\n\n
![\"Editing](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/edit-styles-site-editor.png\")
<\/figure>\n\n\n\nYou\u2019ll now see the WordPress editor. In the top-right corner of the screen, click the three-dot menu (\u22ee)<\/strong> and select Additional CSS<\/strong> from the dropdown.<\/p>\n\n\n\n
![\"Opening](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/additional-css-WordPress-site-editor.png\")
<\/figure>\n\n\n\nPaste your custom code into the box. For example:<\/p>\n\n\n\n
p {\n color: #0073aa;\n}<\/code><\/pre>\n\n\n\nThis will change the paragraph text color across your entire site.<\/p>\n\n\n\n
![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/custom-css-WordPress-full-site-editor.png\")
<\/figure>\n\n\n\nClick Save<\/strong> in the top-right corner to apply the changes.<\/p>\n\n\n\n
\u26a0\ufe0f If you don\u2019t see the Additional CSS panel, your block theme may not support it. In that case, you can use a plugin like WPCode or switch to a builder like SeedProd.<\/p>\n\n\n\n
3. Use a Custom CSS Plugin<\/h2>\n\n\n\n
If your theme doesn\u2019t support the Customizer or Site Editor, or if you just want a clean way to manage your CSS in one place, I recommend using a plugin like WPCode<\/a>.<\/p>\n\n\n\n
![\"WPCode](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2023\/07\/wpcode.png\")
<\/a><\/figure>\n\n\n\nWPCode is a lightweight WordPress plugin that lets you safely add custom code snippets, like CSS, HTML, JavaScript, or PHP, without editing your theme files.<\/p>\n\n\n\n
Once you\u2019ve installed and activated WPCode, go to Code Snippets \u00bb + Add Snippet<\/strong> in your WordPress dashboard.<\/p>\n\n\n\n
![\"Adding](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/add-new-wpcode-snippet.png\")
<\/figure>\n\n\n\nClick the box that says Add Your Custom Code (New Snippet)<\/strong> and give your snippet a name, like Custom CSS Styles<\/em>.<\/p>\n\n\n\n
![\"Add](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/add-custom-snippet-wpcode.png\")
<\/figure>\n\n\n\nUnder Code Type<\/strong>, select CSS Snippet<\/strong> from the dropdown.<\/p>\n\n\n\n
Now paste your CSS into the code box. For example:<\/p>\n\n\n\n
p {\n color: #0073aa;\n}<\/code><\/pre>\n\n\n\nScroll down and choose Auto Insert<\/strong> to apply the CSS across your entire site.<\/p>\n\n\n\n
![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/activate-snippet-wpcode.png\")
<\/figure>\n\n\n\nThen click Save Snippet<\/strong> and toggle the switch at the top to Active<\/strong>.<\/p>\n\n\n\n
That\u2019s it! Your custom styles are now live across your site, and you can come back to this snippet anytime to make changes.<\/p>\n\n\n\n
4. Edit Your Theme Files (Not Recommended)<\/h2>\n\n\n\n
This method only works if you’re using a classic theme<\/strong>. Block themes don\u2019t include access to the Theme File Editor in the WordPress dashboard.<\/p>\n\n\n\n
If you’re using a classic theme, and you’re comfortable editing code, you can add custom CSS directly to your theme\u2019s
style.css<\/code> file. But I don\u2019t recommend this unless you know what you’re doing.<\/p>\n\n\n\nWhen you edit theme files directly, your changes can be lost during updates. You also won\u2019t see a live preview, and even a small typo can break your layout.<\/p>\n\n\n\n
That said, if you\u2019re using a child theme or know how to restore your site if something goes wrong, here\u2019s how to do it.<\/p>\n\n\n\n
Go to Appearance \u00bb Theme File Editor<\/strong> in your WordPress dashboard.<\/p>\n\n\n\n
![\"Opening](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/theme-file-editor-WordPress.png\")
<\/figure>\n\n\n\nFrom the list of files on the right, click on style.css<\/strong>.<\/p>\n\n\n\n
![\"how](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/custom-css-WordPress-theme-files.png\")
<\/figure>\n\n\n\nScroll to the bottom of the file and paste your CSS. For example:<\/p>\n\n\n\n
p {\n color: #0073aa;\n}<\/code><\/pre>\n\n\n\nClick Update File<\/strong> to save your changes.<\/p>\n\n\n\n
![\"Example](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/example-custom-css-WordPress-theme-files.png\")
<\/figure>\n\n\n\n\u26a0\ufe0f Only do this if you\u2019re using a child theme or know how to safely restore your site. For most users, tools like SeedProd or WPCode are much safer options.<\/p>\n\n\n\n
Bonus: Target Custom CSS to Pages or Blocks<\/h2>\n\n\n\n
Sometimes you don\u2019t want your CSS to affect the whole site, you just want it to apply to one page or a single block. You can do that by using page IDs<\/strong> or custom CSS classes<\/strong>.<\/p>\n\n\n\n
Using Page IDs in WordPress<\/h3>\n\n\n\n
Every page in WordPress has a unique ID, and you can use that to target styles for just that page.<\/p>\n\n\n\n
To find the page ID, visit the page in your browser, right-click anywhere, and choose Inspect<\/strong>.<\/p>\n\n\n\n
![\"Inspecting](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/inspect-element-chrome.png\")
<\/figure>\n\n\n\nIn the code, look for the
<body><\/code> tag. It will include a class likepage-id-37<\/code>.<\/p>\n\n\n\n![\"Finding](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/inspect-WordPress-page-id.png\")
<\/figure>\n\n\n\nYou can then use that in your CSS like this:<\/p>\n\n\n\n
.page-id-37 p {\n color: green;\n}<\/code><\/pre>\n\n\n\n![\"Adding](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/custom-css-WordPress-page-id.png\")
<\/figure>\n\n\n\nThis will only change the paragraph text color on that specific page.<\/p>\n\n\n\n
![\"Example](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/Example-custsom-css-specific-page-id-wordpress.gif\")
<\/figure>\n\n\n\nUsing SeedProd\u2019s Block Settings<\/h3>\n\n\n\n
- How to Create a Landing Page in WordPress<\/a><\/li>\n<\/ul>\n\n\n\n
- 4. Edit Your Theme Files (Not Recommended)<\/a><\/li>
- 3. Use a Custom CSS Plugin<\/a><\/li>
- 2. Add Custom CSS in WordPress Without a Page Builder<\/a>
![\"Block](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/block-attributes-seedprod.png\")
<\/figure>\n\n\n\n![\"Adding](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/seedprod-custom-block-css-class.png\")
<\/figure>\n\n\n\n![\"Using](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/custom-block-class-css-code-example.png\")
<\/figure>\n\n\n\n![\"Example](\"https:\/\/www.seedprod.com\/wp-content\/uploads\/2025\/04\/example-custom-css-specific-block-class-seedprod.png\")
<\/figure>\n\n\n\n