{"id":5615,"date":"2020-03-22T15:00:08","date_gmt":"2020-03-22T14:00:08","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=5615"},"modified":"2020-10-15T10:05:11","modified_gmt":"2020-10-15T08:05:11","slug":"wordpress-add-custom-css","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/wordpress-add-custom-css\/","title":{"rendered":"How to Add Custom CSS to Your WordPress Website"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]There sure are lots of interesting ways you can craft a specific look and feel for your website \u2014 if that is what you want. Sometimes, having a limited set of choices to pick from is much easier and, probably, more productive. If you\u2019re using WordPress, the content management system that <a href=\"https:\/\/w3techs.com\/technologies\/overview\/content_management\" target=\"_blank\" rel=\"noopener noreferrer\">controls two-thirds of the CMS market<\/a>, you can decide how involved you want to be in crafting the appearance of your website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The first level of customization is usually the theme<\/strong>. For some, it might be the last level, too, because a good theme can easily create an appearance that\u2019s appropriate for the website\u2019s role. So if you\u2019re in the restaurant business, for example, you can choose a <a href=\"https:\/\/qodeinteractive.com\/theme-category\/food-restaurants-wordpress-themes\">food and restaurant theme<\/a> for your website, and be done with it. Or, if you have an IT startup, you can settle for a great <a href=\"https:\/\/qodeinteractive.com\/theme-category\/technology-wordpress-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">tech WordPress theme<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Each theme comes with some customization options. You might be able to pick the page layouts, for example, or the look of certain elements on the page. But if you\u2019re looking to make some changes beyond those that come with the theme, using custom CSS would be a good way to go. Here are the three ways you can do it.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-the-customizer\">How to Add Custom CSS Using the Customizer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#editing-the-themes-stylesheet\">Add Custom CSS by Editing the (Child) Theme\u2019s Stylesheet<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-a-custom-css-plugin\">How to Add Custom CSS Using a Custom CSS Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;70px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-the-customizer\"><\/a>How to Add Custom CSS Using the Customizer<\/h2>\n<p>[\/vc_column_text][vc_column_text]<strong>The most convenient way to add custom CSS to your website is to use the Customizer<\/strong>. Find the \u201cAppearance\u201d option in the dashboard menu. Hover over it, and you\u2019ll see the \u201cCustomize\u201d button. Click on it to get into the Customizer.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Appearance-Customize.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Appearance-Customize-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Appearance-Customize-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once inside, you\u2019ll have access to different customization options, depending on the theme and plugins you have installed. <strong>Right there at the bottom will be the \u201cAdditional CSS\u201d option<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Click on it, and you\u2019ll enter the area where you can add all the custom CSS you want. You\u2019ll be able to see the effects of every alteration you make in real-time, but they won\u2019t go live until you press the \u201cpublish\u201d button. [\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-Settings-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Additional-CSS-Settings-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The WYSIWYG nature of the Customizer might be its strongest benefit, but it\u2019s not the only one. It comes with WordPress as a core feature, so you can use it right out of the box, without any additional tinkering with plugins. You\u2019ll also get a pretty basic check to ensure your syntax is okay.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The problem with adding custom CSS this way is that it\u2019s all tied to your theme<\/strong>. If you want to switch to another one, the custom CSS won\u2019t follow. At least not on its own, that is \u2014 you can always copy it over to your new theme.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"editing-the-themes-stylesheet\"><\/a>Add Custom CSS by Editing the (Child) Theme\u2019s Stylesheet<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Additional CSS field in the Customizer isn\u2019t the only place where you can add custom CSS to your WordPress website. If you want to make lots of changes using hundreds of lines of code, your theme\u2019s stylesheet might be a good place to do it.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Select-Theme-to-Edit.jpg\" class=\"attachment-full size-full\" alt=\"Select Theme to Edit\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Select-Theme-to-Edit.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Select-Theme-to-Edit-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Select-Theme-to-Edit-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Editing the stylesheet is an advanced operation, and not only because it implies that you understand CSS well enough to be able to add hundreds of lines of code when customizing the website. <strong>The main problem with editing the stylesheet is that every time you update your theme, the edits you\u2019ve made will be deleted.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The way you go around this issue is by creating a child theme.<\/strong> The best way to understand <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-child-theme\/\">what a WordPress child theme is<\/a> would be to think about it as a layer you create over the regular \u2014 parent \u2014 theme. The changes you make to this layer will stay the same even when you update the parent theme.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>So if you want to add custom CSS to your website, you need to <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\" target=\"_blank\" rel=\"noopener noreferrer\">create a child theme<\/a> first<\/strong>. Then, navigate over to the Theme Editor, find the stylesheet.css file, and unleash your custom CSS code.[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_empty_space height=&#8221;81px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;50px&#8221;][vc_widget_sidebar sidebar_id=&#8221;top-picks-banner&#8221;][vc_empty_space height=&#8221;28px&#8221;][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#f0f0f0&#8243;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-a-custom-css-plugin\"><\/a>How to Add Custom CSS Using a Custom CSS Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you want to add custom CSS that will survive a complete change of the theme, for example, neither the Customizer nor the stylesheet editing will cut it. <strong>But you can still make changes you can carry over to a different theme using a custom CSS plugin such as the <a href=\"https:\/\/wordpress.org\/plugins\/simple-custom-css\/\" target=\"_blank\" rel=\"noopener noreferrer\">Simple Custom CSS plugin<\/a>.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Simple-Custom-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Simple Custom CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Simple-Custom-CSS.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Simple-Custom-CSS-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Simple-Custom-CSS-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After you\u2019ve <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">downloaded and installed the Simple Custom CSS plugin<\/a>, you\u2019ll have two ways to access it. To get to the plugin\u2019s administration screen, you can navigate to the appearance option of the main menu, and then choose Custom CSS from the submenu. You can add the custom CSS in the window, and click on the \u201cUpdate Custom CSS\u201d button to save the changes.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"375\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Custom-CSS-Update-Button.jpg\" class=\"attachment-full size-full\" alt=\"Custom CSS Update Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Custom-CSS-Update-Button.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Custom-CSS-Update-Button-300x161.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/03\/Custom-CSS-Update-Button-620x332.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>It\u2019s possible to use Simple Custom CSS from the Customizer, too<\/strong>. After you navigate to the Customizer \u2014 Appearance &gt; Customize \u2014 click on the \u201cSimple Custom CSS\u201d tab and you\u2019ll get to the plugin&#8217;s customizer section. There, you\u2019ll see the preview of all the changes you make before saving them.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Let\u2019s Wrap It Up!<\/h2>\n<p>[\/vc_column_text][vc_column_text]One of the best things about WordPress is how much freedom it gives you when it comes to customization of your website. But if you\u2019re not able to find every single customization option you need among the many themes you can download and install, you don\u2019t have to worry. You can make the changes you need by adding custom CSS. With three different methods you can use to do it, you\u2019re bound to find one that\u2019s as convenient as you need it to be.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to make your WordPress website stand out and you think adding custom CSS is the best way to do it? Read this guide first &#8211; it&#8217;ll help you get started!<\/p>\n","protected":false},"author":9295,"featured_media":5925,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-5615","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=5615"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/5615\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/5925"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=5615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=5615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=5615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}