Finding the Design Elements You Want to Customize<\/h2>\n
Once you’ve isolated a part of your theme that you’d like to change (for example, the post title), you’ll need to determine the CSS properties applied to it so that you can make the appropriate changes. Fortunately, that process isn’t complicated.<\/p>\n
CSS uses selectors to determine which design declarations to apply to a specific part of your website. Usually, this is done by specifying a “class” for the specific element. However, CSS can also be used to define the layout for an entire element (for example, the “<body>” tag) or an element based on its ID.<\/p>\n
Fortunately, popular browsers allow you to see which selectors and which declarations are applied to an element on the page with just a few clicks. In Google Chrome, for example, you simply highlight a specific portion of the document and then right-click, as shown below.<\/p>\n
![\"child-theme\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/08\/child-theme-800x309.png\")
<\/div>\nSelect Inspect Element<\/strong> from the drop-down that appears and you’ll see the design information in the window on the right. You can see an example of that below.<\/p>\n Those items highlighted in red show you the specific design descriptors that apply to the text you had highlighted. For example, the “font-size” element tells you that the font displayed in that highlighted text is sized at 13 pixels (“13px”). The descriptors are surrounded in curly braces by the selectors. The name of the relevant style sheet file is displayed just to the right of the selectors.<\/p>\n Once you’re armed with all of that information, modifying the design is easy. For example, if you want to change the font from 13px to 14px, you simply search your style sheet file, displayed just to the right for those selectors (“#plugin-info .block-content”) and change the “13px” to “14px.”<\/p>\n You can do the same thing in Firefox, just highlight a specific portion of the page, right-click on it, and then select Inspect Element<\/em> from the menu that appears.<\/p>\n It’s a given that no two WordPress themes are created equal. So, keep in mind that your WordPress theme might not comply 100% with what you read in the following sections.<\/p>\n That said, it’s more than likely that the CSS used to present your WordPress site is located in a file called style.css<\/em>. This is a common name for a stylesheet for any type of website, not just a WordPress website.<\/p>\n If you look at that file, you’ll find that it includes comprehensive stylistic ‘instructions’ for your theme. It’s beyond the scope of this tutorial to cover CSS syntax in complete detail, but if you want to delve deeper into it, we recommend you start with W3Schools’<\/a>\u00a0course\u00a0here<\/a>.<\/p>\n With that out of the way, let’s move on to the aforementioned methods for editing CSS!<\/p>\n The WordPress Customizer allows you to customize your website’s appearance, including adding CSS code.<\/p>\n To do this, go to Appearance > Customize in your WordPress dashboard, and then select the “Additional CSS” option.<\/p>\n Here, you can add your CSS code and see a live preview of the changes as you make them.<\/p>\n For example, to change the font color of your website’s body text to blue, you could add the following code to the “Additional CSS” section:<\/p>\n There are two ways to\u00a0access your theme’s style.css<\/em> file.<\/p>\n One way is to do so from your WordPress administration dashboard. On the left-hand navigation bar, highlight the Appearance<\/em> option. A fly-out menu should display several more options. At the bottom of that menu, you’ll see the Theme File Editor<\/strong> option. Click on that.<\/p>\n Once you’re on the Edit Themes<\/em> page, you’ll see a list of files on a vertical bar on the right-hand side of the page. Scroll down that list of files and select style.css<\/em>.<\/p>\n You can use this screen to edit the file to make changes to your site’s design, but there’s a better way to do it (more on this in a moment).<\/p>\n The other way to find the stylesheet is to browse through the operating system of your hosting provider and locate the file in the theme folder. The exact location will vary depending on your hosting provider.<\/p>\n In the example shown below, the name of the website (in our case thecare<\/em>) is a folder under the public_html<\/em> folder. Since WordPress is installed for that site, you can see the wp-content<\/em> folder under thecare<\/em>.<\/p>\n Underneath the wp-content<\/em> folder is another folder called themes<\/em>, which is where all of the WordPress themes are installed. Since that site uses a theme called Newsletter<\/em>, the correct style.css<\/em> is located in the newsletter-parent<\/em> folder.<\/p>\n At this point, you might be asking yourself: “Why is there a newsletter-parent<\/em> and a newsletter-child<\/em> folder?” That’s a very good question, and it’s about to be answered.<\/p>\n If you’ve downloaded an awesome theme and want to make some changes to it, you should do so with a child theme, as opposed to editing the main (or parent) theme.<\/p>\n Why? Because developers can often update themes for bug fixes and design changes.\u00a0If you make changes to the main theme and then install an update, you’re going to overwrite your hard work.<\/p>\n On the other hand, if you use a child theme to make CSS changes, only the parent theme will be updated. All of your changes in the child theme will remain.<\/p>\n Some\u00a0professional theme developers are aware of the importance of child themes and will include one for you. Then, you can just update that child theme as much as you want without worrying about parent theme updates overwriting your changes.<\/p>\n If you have a theme\u00a0that doesn’t include a child theme, it’s easy to add one. You can find instructions to do that in our comprehensive guide to creating a child theme<\/a>.<\/p>\n Note: If you cannot find the Theme File Editor in the Appearances menu, use the option below.<\/p>\n Many newer WordPress themes are starting to take advantage of the Full Site Editor (FSE)<\/a>.<\/p>\n FSE lets you edit the layout and design of your entire website using the WordPress block editor (similar to editing a page or blog post) and is only available for selected themes.<\/p>\n With FSE-enabled themes, you will not find the Theme File Editor in the Appearances menu or the Theme Customizer, so to edit CSS in these themes, you will need to bring up a “hidden” and more restricted version of the Customizer and add your CSS there.<\/p>\n To do this, log into your WordPress admin, copy and paste the URL below into your web browser, and replace Click on the ‘Additional CSS’ tab and add your custom CSS here as explained earlier.<\/p>\n If you are using a page builder (e.g. Elementor), you can often add the code directly in the page at the item level.<\/p>\n In Elementor, for example, go to Advanced > Custom CSS. See this video below for more details:<\/p>\n xv9RjJky720<\/span><\/span><\/p>\n Note:<\/em> This method works differently for different page builders. Check the documentation for your specific page builder’s for details.<\/p>\n The most convenient way of editing your site\u2019s CSS is arguably via a plugin.<\/p>\n One of the main advantages\u00a0to using a plugin is similar to that of using a child theme. If you update the theme, your changes won’t be overridden because they’re stored separately from the theme’s files. The other advantage, of course, is that you won’t have to bother creating a child theme.<\/p>\n There are several plugins available that allow you to add custom CSS to your WordPress website.<\/p>\n Here are a few great plugins to use for modifying CSS:<\/p>\n Simple Custom CSS and JS<\/a>\u00a0allows you to easily add custom CSS and JavaScript code to your website.<\/p>\n For example, let’s say you want to change the background color of your website’s header to green.<\/p>\n Simply install the “Simple Custom CSS and JS” plugin and navigate to the “Add Custom CSS” section:<\/p>\n Add the following code and hit the Publish button to implement your new style change:<\/p>\n Simple Custom CSS<\/a>\u00a0is one of the most popular options.\u00a0It\u2019s been installed more than 100,000 times and has received a five-star rating.<\/p>\n Last, but certainly not least, is\u00a0Child Theme Configurator<\/a>. This is a solution\u00a0that enables you to customize the layout of your website with a child theme.<\/p>\n The plugin\u00a0also optimizes your design strategy. If you\u2019ve worked with CSS\u00a0for any length of time, you know that sometimes the overall structure of your stylesheets can get cumbersome. Child Theme Configurator assists you in that it properly allocates your stylesheets so for optimal performance.<\/p>\n Child Theme Configurator has been downloaded more than 40,000 times and enjoys a 4.8 star rating.<\/p>\n The bottom line is this: Whatever functionality you’re trying to create, it’s probably already been created by someone else who’s willing to provide it to you, either free of charge or for a reasonable\u00a0fee. It might be best to save some time and just go with a solution that’s already been produced for you.<\/p>\n For more plugins, check out these free CSS plugins for live editing your WordPress site<\/a>.<\/p>\n If you’re comfortable with coding, create a child theme and dig into style.css. But if you prefer to leave those well alone, however, there are plenty of plugins available, and chances are they’ll cater to your needs reasonably well.<\/p>\n It’s a great idea to begin to get to grips with CSS if you’re looking to develop your site further, and there are plenty of courses<\/a> and tutorials<\/a> out there to help you.<\/p>\n","protected":false},"excerpt":{"rendered":" There\u2019s more than one way to add custom CSS to your WordPress site. In this Weekend WordPress we explore the strengths and weaknesses of three different methods so you can decide which suits you best, and let you get on with customizing your site.<\/p>\n","protected":false},"author":37930,"featured_media":199255,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[1044,684,10188,9798],"tutorials_categories":[],"class_list":["post-143606","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-css","tag-child-themes","tag-simple-custom-css","tag-weekend-wordpress-projects"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/143606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/37930"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=143606"}],"version-history":[{"count":28,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/143606\/revisions"}],"predecessor-version":[{"id":214927,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/143606\/revisions\/214927"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/199255"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=143606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=143606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=143606"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=143606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"inspect-element\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/08\/inspect-element1-800x363.png\")
<\/div>\nHow WordPress and CSS Work Together<\/h2>\n
Method #1 –\u00a0Use the WordPress Customizer to Edit CSS<\/h2>\n
\r\n\r\nbody {\r\ncolor: blue;\r\n}\r\n\r\n<\/pre>\n![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/02\/wordpress-customizer.png\")
Method #2 – Edit Your Theme’s CSS File<\/h2>\n
![\"Appearance](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/08\/appearance-theme-file-editor.png\")
![\"WordPress](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/03\/theme-css-file.png\")
![\"Newsletter](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/07\/Newsletter-parent-folder-800x401.png\")
<\/div>\nMethod #3 – Use a Child Theme to Edit CSS<\/h2>\n
Method #4 – Edit Full Site Editor Themes<\/h2>\n
example.com<\/code> with your own domain.<\/p>\nhttps:\/\/example.com\/wp-admin\/customize.php<\/code><\/p>\n![\"Full](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/03\/full-site-editor-css.png\")
Method #5 – Use Page Builders to Edit CSS<\/h2>\n
Method #6 – Use a Plugin to Edit CSS<\/h2>\n
Simple Custom CSS and JS<\/h3>\n
![\"Simple](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/03\/simple-custom-css-js-1050x471.png\")
![\"Simple](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/03\/simple-custom-css-js-code-field-1050x572.png\")
\r\n\r\n.header {\r\nbackground-color: green;\r\n}\r\n\r\n<\/pre>\nSimple Custom CSS<\/h3>\n
![\"Simple](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/08\/simple-custom-css-1.png\")
Child Theme Configurator<\/h3>\n
![\"Child](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/08\/child-theme-configurator.png\")
Wrapping Up<\/h2>\n