{"id":8065,"date":"2022-02-22T03:34:51","date_gmt":"2022-02-22T03:34:51","guid":{"rendered":"https:\/\/www.hostinger.com\/tutorials\/?p=8065"},"modified":"2026-03-10T10:11:59","modified_gmt":"2026-03-10T10:11:59","slug":"how-to-add-custom-css-to-wordpress","status":"publish","type":"post","link":"\/uk\/tutorials\/how-to-add-custom-css-to-wordpress","title":{"rendered":"How to add custom CSS to WordPress (4 easy methods)"},"content":{"rendered":"<?xml encoding=\"utf-8\" ?><p>Cascading Style Sheets (CSS) define how HTML elements appear on a webpage, controlling fonts, colors, spacing, and layout. WordPress themes include built-in design settings, but you often need custom CSS to adjust visual elements that the default options can&rsquo;t reach.<\/p><p>There are four reliable ways to add custom styling to your WordPress site:<\/p><ul class=\"wp-block-list\">\n<li><strong>The block editor<\/strong>. Add a new CSS class in the Site Editor, then assign it to specific blocks from the <strong>Advanced<\/strong> settings panel.<\/li>\n\n\n\n<li><strong>The theme Customizer<\/strong>. Open the <strong>Additional CSS<\/strong> panel in your dashboard and paste your code to preview changes in real time.<\/li>\n\n\n\n<li><strong>A child theme<\/strong>. Create a child theme directory and edit the <strong>style.css<\/strong> file so your changes persist through parent theme updates.<\/li>\n\n\n\n<li><strong>A plugin<\/strong>. Install a code snippet manager to insert, organize, and toggle custom CSS rules without editing theme files.<\/li>\n<\/ul><p>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-a-custom-css-class-using-the-block-editor\">How to add a custom CSS class using the block editor<\/h2><p>If you use a block theme (WordPress <strong>5.9<\/strong> and above), you can apply custom <a href=\"\/uk\/tutorials\/what-is-css\">CSS<\/a> to specific elements in the block editor. This method requires defining a class in the Site Editor and then assigning that class to a block.<\/p><p>First, add the CSS code in the Site Editor:<\/p><ol class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard and go to <strong>Appearance &rarr; Editor<\/strong>.<\/li>\n\n\n\n<li>Click the <strong>Styles<\/strong> icon in the left sidebar (the black and white circle) and select <strong>Additional CSS<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d57dc5\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-editor-styles-additional-css-highlighted-1024x962.png\" alt=\"WordPress Site Editor showing Styles panel with Additional CSS section highlighted\" class=\"wp-image-136985\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>Define your new <a href=\"\/uk\/tutorials\/css-class\">CSS class<\/a>. For this example, create a class named <strong>custom-highlight<\/strong> that adds a green background and white text:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.custom-highlight {\n   background-color: #28a745;\n   color: #ffffff;\n   padding: 10px;\n}<\/pre><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d5a1bc\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-editor-styles-css-624x1024.png\" alt=\"WordPress Editor displaying the Additional CSS field with custom styles entered\" class=\"wp-image-136986\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Click <strong>Review 1 change &rarr; Save<\/strong> to apply your changes.<\/li>\n<\/ol><p>Once you define the class, assign it to any block in your posts or pages:<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Posts &rarr; All Posts<\/strong> and edit the post you want to update.<\/li>\n\n\n\n<li>Select the block you want to modify (for example, a <strong>Paragraph<\/strong> block).<\/li>\n\n\n\n<li>In the right sidebar, open the <strong>Advanced<\/strong> section.<\/li>\n\n\n\n<li>In the <strong>Additional CSS Class(es)<\/strong> field, enter the class name you created.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d5c4db\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-post-additional-css-class-es-highlighted-1024x483.png\" alt=\"WordPress post editor with Advanced block settings and CSS class field highlighted\" class=\"wp-image-136987\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>Click <strong>Save<\/strong>. The block now reflects the styling defined in your stylesheet.<\/li>\n<\/ol><p>This method lets you apply styles to individual blocks instead of site-wide elements. It&rsquo;s ideal for one-off styling, such as highlighting a single paragraph or call to action, without affecting other blocks of the same type across your site.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-the-theme-customizer\">How to add custom CSS using the theme Customizer<\/h2><p>If you use a classic theme, the WordPress Customizer is the most user-friendly way to add custom CSS. Introduced in WordPress <strong>4.7<\/strong>, it lets you write CSS and see the changes immediately before publishing.<\/p><ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance &rarr; Customize<\/strong>.<\/li>\n\n\n\n<li>In the left sidebar, click <strong>Additional CSS<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d5e7df\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-customize-additional-css-highlighted-471x1024.png\" alt=\"WordPress Customizer with Additional CSS option highlighted in sidebar\" class=\"wp-image-136988\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"3\" class=\"wp-block-list\">\n<li>A code editor opens. Type or paste your CSS rules. For example, to style paragraph text:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">p {\n   color: green;\n   font-size: 16px;\n}<\/pre><ol start=\"4\" class=\"wp-block-list\">\n<li>The preview pane on the right updates instantly.<\/li>\n\n\n\n<li>When you&rsquo;re happy with the result, click <strong>Publish<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d61055\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-customize-additional-css-text-editor-preview-pane-1024x538.png\" alt=\"WordPress Customizer showing Additional CSS editor with live preview pane\" class=\"wp-image-136989\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>This method saves your CSS to the database instead of the theme files, so your changes stay intact when you update the theme. However, they will disappear if you switch to a different theme. If you frequently change themes, consider using a plugin instead.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-a-child-theme\">How to add custom CSS using a child theme<\/h2><p>Editing the parent theme&rsquo;s <strong>style.css<\/strong> file is risky because theme updates overwrite it and erase your customizations. A <a href=\"\/uk\/tutorials\/how-to-create-wordpress-child-theme\">child theme<\/a> prevents this by storing your changes in a separate directory that WordPress loads after the parent theme, allowing your changes to override the parent&rsquo;s styles.<\/p><ol class=\"wp-block-list\">\n<li>Access your site files through the File Manager in your hosting control panel or an <a href=\"\/uk\/tutorials\/filezilla-ftp-configuration\">FTP client like FileZilla<\/a>.<\/li>\n\n\n\n<li>Go to the <strong>wp-content\/themes\/<\/strong> directory.<\/li>\n\n\n\n<li>Open your active child theme folder.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d6340a\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/file-manager-public-html-wp-content-themes-twentytwentyfour-child-highlighted-1024x580.png\" alt=\"File Manager showing wp-content themes folder with child theme highlighted\" class=\"wp-image-136990\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Locate and open the <strong>style.css<\/strong> file.<\/li>\n\n\n\n<li>Add your custom CSS at the bottom. For example:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n   background-color: #f0f0f1;\n}<\/pre><ol start=\"6\" class=\"wp-block-list\">\n<li>Save the file or re-upload it to your server.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d657ca\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/file-manager-text-editor-style-css-1024x497.png\" alt=\"File Manager text editor open with style.css file displayed for editing\" class=\"wp-image-136991\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>This approach works best for developers or site owners planning extensive design updates, as it keeps custom code organized and protected from future theme updates.<\/p><h2 class=\"wp-block-heading\" id=\"h-how-to-add-custom-css-using-a-plugin\">How to add custom CSS using a plugin<\/h2><p>If you prefer not to edit theme files or use the Customizer, a plugin offers a safe and organized alternative. We recommend using <strong>WPCode<\/strong> for its robust snippet management and its library of more than 100 pre-made snippets.<\/p><ol class=\"wp-block-list\">\n<li><a href=\"\/uk\/tutorials\/how-to-install-wordpress-plugins\">Install and activate the plugin<\/a> from <strong>Plugins &rarr; Add New Plugin<\/strong>.<\/li>\n\n\n\n<li>Go to <strong>Code Snippets &rarr; + Add Snippet<\/strong>.<\/li>\n\n\n\n<li>Hover over <strong>Add Your Custom Code (New Snippet)<\/strong> and click <strong>+ Add Custom Snippet<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d67ae4\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-wp-code-add-snipper-add-custom-snippet-highlighted-1024x500.png\" alt=\"WPCode interface showing Add Custom Snippet option highlighted in dashboard\" class=\"wp-image-136992\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>Select<strong> CSS Snippet<\/strong> as the code type.<\/li>\n\n\n\n<li>Enter a title for your snippet (for example, &ldquo;Custom header styles&rdquo;).<\/li>\n\n\n\n<li>Paste your CSS into the code editor. For instance:<\/li>\n<\/ol><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/* Highlight important text *\/\n.highlight {\n   background-color: #fffa9c;\n   padding: 4px 6px;\n   border-radius: 4px;\n}<\/pre><ol start=\"7\" class=\"wp-block-list\">\n<li>Toggle <strong>Active<\/strong> to <strong>On<\/strong>, then click <strong>Save Snippet<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d69ecb\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/wordpress-admin-wpcode-create-custom-snippet-code-preview-1024x540.png\" alt=\"WPCode editor displaying a new custom CSS snippet in the code preview area\" class=\"wp-image-136993\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><p>Plugins are particularly useful if you frequently switch themes, as the CSS remains active regardless of which theme is currently selected. Your custom styles are stored independently from your theme files.<\/p><h2 class=\"wp-block-heading\" id=\"h-troubleshooting-common-wordpress-custom-css-issues\">Troubleshooting common WordPress custom CSS issues<\/h2><p>You can troubleshoot most WordPress custom CSS issues by clearing your cache, checking selector specificity, and fixing syntax errors.<\/p><h3 class=\"wp-block-heading\" id=\"h-style-changes-are-not-appearing\">Style changes are not appearing<\/h3><p>The most common reason new styles don&rsquo;t appear is caching. Browsers and caching plugins store static versions of your site to improve speed, which can prevent updated CSS from showing right away.<\/p><ul class=\"wp-block-list\">\n<li><strong>Browser cache<\/strong>. Clear your browser cache or perform a hard refresh (<strong>Ctrl+Shift+R<\/strong> on Windows, <strong>Cmd+Shift+R<\/strong> on Mac). You can also open the page in an Incognito or Private window to bypass cached files.<\/li>\n\n\n\n<li><strong>Server or plugin cache<\/strong>. If you use a <a href=\"\/uk\/tutorials\/wordpress-cache-plugin\">caching plugin<\/a> such as WP Super Cache, W3 Total Cache, or LiteSpeed Cache, clear the cache from the plugin&rsquo;s settings. If your <a href=\"\/uk\/wordpress-hosting\">WordPress host<\/a> uses server-level caching (like Hostinger&rsquo;s Cache Manager), clear it from your control panel as well.<\/li>\n<\/ul><div class=\"wp-block-image\"><figure data-wp-context='{\"imageId\":\"69dff52d6c3a1\"}' data-wp-interactive=\"core\/image\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-on-async--load=\"callbacks.setButtonStyles\" data-wp-on-async-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/02\/hpanel-websites-advanced-cache-manager-purge-all-highlighted-1024x455.png\" alt=\"Hostinger Cache Manager showing Purge All option highlighted in dashboard\" class=\"wp-image-136994\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" aria-label=\"Enlarge\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on-async--click=\"actions.showLightbox\" data-wp-style--right=\"state.imageButtonRight\" data-wp-style--top=\"state.imageButtonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-css-selector-specificity\">CSS selector specificity<\/h3><p>If your code is present but not applying, existing theme styles may be overriding it. CSS prioritizes rules based on specificity &ndash; a scoring system where inline styles outrank IDs, IDs outrank classes, and classes outrank element selectors.<\/p><p>To fix this, use a more specific selector. For example, instead of targeting <strong>.button<\/strong>, target <strong>div.content .button<\/strong> or include a parent container in your selector.<\/p><p>As a last resort, you can use the <strong>!important<\/strong> declaration:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.button {\n   background-color: #ff0000 !important;\n}<\/pre><p>Remember to use <strong>!important<\/strong> sparingly. Overusing it makes maintenance harder because future changes will also need<strong> !important<\/strong> to override earlier rules. This leads to &ldquo;specificity wars,&rdquo; which make your styles harder to manage over time.<\/p><h3 class=\"wp-block-heading\" id=\"h-misspelled-css-syntax\">Misspelled CSS syntax<\/h3><p>A single missing bracket<strong> }<\/strong> or semicolon <strong>;<\/strong> can break your entire stylesheet. If you edit files manually, double-check that your syntax is correct.<\/p><p>We recommend using a code editor like <strong>Visual Studio Code<\/strong>, which highlights syntax errors in real time. The WordPress Customizer&rsquo;s built-in syntax highlighter also flags errors in red before you save.<\/p><h3 class=\"wp-block-heading\" id=\"h-the-new-design-is-not-responsive\">The new design is not responsive<\/h3><p>Custom CSS can sometimes break your layout on mobile devices. Always test your changes on different screen sizes using your browser&rsquo;s developer tools (<strong>Inspect &rarr; Toggle device toolbar<\/strong>).<\/p><p>To improve responsiveness, wrap your code in a media query:<\/p><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@media only screen and (max-width: 600px) {\n   body {\n      font-size: 14px;\n   }\n}<\/pre><h2 class=\"wp-block-heading\" id=\"h-how-do-i-add-other-custom-code-to-wordpress\">How do I add other custom code to WordPress?<\/h2><p>You can add other types of custom code to WordPress using two main methods, depending on the programming language and whether you need to modify server-side functionality or front-end behavior.<\/p><ul class=\"wp-block-list\">\n<li><strong>PHP<\/strong>. To change core functions &ndash; such as creating custom post types or filtering content &ndash; <a href=\"\/uk\/tutorials\/how-to-add-php-code-to-wordpress\">add PHP code to WordPress<\/a>. This code runs on the server before the page loads.<\/li>\n\n\n\n<li><strong>JavaScript<\/strong>. For dynamic features like animations, event handling, or tracking scripts, consider <a href=\"\/uk\/tutorials\/wordpress-javascript\">adding JavaScript to WordPress<\/a>. This code runs in the user&rsquo;s browser after the page loads.<\/li>\n<\/ul><p>Regardless of the method you choose, always make sure you have a recent website backup before adding custom code to prevent data loss or site errors.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cascading Style Sheets (CSS) define how HTML elements appear on a webpage, controlling fonts, colors, spacing, and layout. WordPress themes include built-in design settings, but you often need custom CSS to adjust visual elements that the default options can&rsquo;t reach. There are four reliable ways to add custom styling to your WordPress site: How to [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/uk\/tutorials\/how-to-add-custom-css-to-wordpress\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":337,"featured_media":128417,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to add custom CSS to WordPress (4 easy methods)","rank_math_description":"Learn how to add custom CSS to WordPress safely. We cover 4 easy methods using the block editor, the Customizer, plugins, and child themes.","rank_math_focus_keyword":"add custom css to wordpress","footnotes":""},"categories":[22633],"tags":[],"class_list":["post-8065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/adicionar-css-personalizado-wordpress","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-ajouter-un-css-personnalise-a-wordpress","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/custom-css-wordpress","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-css","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/wordpress-custom-css","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/wordpress-custom-css","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/anadir-css-personalizado-wordpress","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/adicionar-css-personalizado-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-add-custom-css-to-wordpress","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-add-custom-css-to-wordpress","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/8065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/users\/337"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/comments?post=8065"}],"version-history":[{"count":52,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/8065\/revisions"}],"predecessor-version":[{"id":128416,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/posts\/8065\/revisions\/128416"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media\/128417"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/media?parent=8065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/categories?post=8065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/uk\/tutorials\/wp-json\/wp\/v2\/tags?post=8065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}