{"id":73267,"date":"2024-02-28T10:07:01","date_gmt":"2024-02-28T10:07:01","guid":{"rendered":"https:\/\/www.awardspace.com\/?p=73267"},"modified":"2024-03-02T08:12:17","modified_gmt":"2024-03-02T08:12:17","slug":"add-custom-css-code","status":"publish","type":"post","link":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/","title":{"rendered":"Add Custom CSS Code"},"content":{"rendered":"

Adding custom CSS code to your WordPress site is a great way to personalize and tweak your site’s design<\/a> beyond the options provided by your theme<\/a>. You can add custom CSS code to your WordPress theme, via the customization options or directly in the styles.css file, editable through the theme editor.<\/p>\n

 <\/p>\n

What is CSS<\/h2>\n

CSS, which stands for Cascading Style Sheets, is a coding language designed primarily for styling websites. It allows you to modify the appearance, color, and positioning of various elements across your site.<\/p>\n

The term “cascading” in its name highlights a key feature: if multiple styles are applied to the same element, the style located lower in the stylesheet will prevail, reflecting the most recent modification made to that element.<\/p>\n

Learning CSS can significantly enhance your web development skills, even if you’re using WordPress, which is known for its user-friendly content management system. A great starting point for mastering this programming language is the CSS course offered by W3Schools<\/a>.<\/p>\n

 <\/p>\n

How to add Custom CSS to WordPress<\/h2>\n

It is really easy to add additional CSS to your WordPress website. \u00a0There are two main methods to do so. Each of them, of course, has its positive and negative sides, as they are adding the code in different places on your website. As mentioned above, we’ll cover how to add custom CSS code through the theme customizing page<\/a>. The main reason for that is the fact, that it is easier to add code there, as it won’t be removed once your theme gets updated. As\u00a0we’ve already discussed<\/a>, it is recommended that you choose a theme that is getting regular updates.<\/p>\n

Also, using this method, even if you change the theme, the changes will remain. It is another question of how much of them will apply to the new theme, as it will probably use different CSS classes for the same site elements. Still, the important fact is that the code you’ve written, shouldn’t get lost with updates, etc.<\/p>\n

If you want to write your code directly in the styles.css file of the theme, it is recommended that you create a Child theme.<\/p>\n

 <\/p>\n

Adding Custom CSS with the WordPress Customizer<\/h2>\n

With the integrated personalizing feature offered by WordPress, you can do a lot more than adding custom CSS. Yet, we will focus on doing that. As we’ve covered it before, you can read more about the capabilities of WordPress Customizer<\/a>. Here is how to add custom CSS through the WordPress Theme Customizer.<\/p>\n

 <\/p>\n

Step 1: Access the WordPress Customizer<\/h3>\n

To access the WordPress customizer, log in to your WordPress website<\/a>.\u00a0 Once you are in the Dashboard, navigate yourself toward the “Appearance” menu in the sidebar. Hover over it and in the submenu that will show up, select “Customize.” Doing so will open the WordPress Customizer.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Step 2: Find the Additional CSS Section<\/h4>\n

All of the WordPress themes have some of the options in the Customizer. Specifically “Site Identity”, “Widgets”, “Menus”, and, of course, “Additional CSS”. Therefore, depending on the theme you are using, the option you will need to add Custom CSS code might be easier to find.<\/p>\n

In the Customizer, scroll through the sidebar options until you locate the “Additional CSS” section. This will open a new page where you can add your custom CSS code.<\/p>\n

\"\"<\/p>\n

<\/h4>\n

Step 3: Enter Your Custom CSS<\/h4>\n

Once the “Additional CSS” box loads up, you can start typing or pasting your CSS code. If you know how to write CSS, most probably you know how to find the class you need to alter. Unlike the theme editor option, using the Additional CSS one, through the WordPress customizer, will let you see the effect of your changes live. So, you will know if something is wrong before publishing the changes.<\/p>\n

 <\/p>\n

Step 4: Publish Your Changes<\/h4>\n

Once you are happy with the changes you’ve made, click the “Publish” button on the top right corner of the sidebar menu. Doing so will apply the custom CSS across your entire website. The changes will be visible for all the users.<\/p>\n

 <\/p>\n

Further Recommendations:<\/h2>\n

Here are some recommendations for your first changes in the CSS.<\/p>\n

<\/h3>\n

Keep the Changes to a Minimal Level<\/h3>\n

It is best, especially if you are still learning, to keep the changes to a minimal level. They should be considered and targeted. That will ensure ease of management and troubleshooting.<\/p>\n

 <\/p>\n

Use Comments<\/h3>\n

Code comments are used so that the developers can easily orient themselves to the purpose of a specific code chunk. Adding comments in CSS will let you easily understand what changes you’ve made and why. Although, while writing the first lines it might not look necessary with time the code will accumulate, and therefore, the complexity of the changes. That might make it difficult for you to find a specific change that you’ve made (or whether you made it at all).<\/p>\n

 <\/p>\n

Use Backups<\/h3>\n

Before any significant change on a website, the best practice is to create a backup. Don’t underestimate the value of a backup. Sometimes it is better to be safe than sorry.<\/p>\n

 <\/p>\n

If you need more in-depth directions, check our previously published article on How to Add Additional CSS to WordPress and Further Customize Your Website<\/a><\/p>\n

If you feel like you are ready to go further in the CMS, feel free to browse our\u00a0WordPress Tutorials<\/a>\u00a0section.<\/p>\n","protected":false},"excerpt":{"rendered":"

Adding custom CSS code to your WordPress site is a great way to personalize and tweak your site’s design beyond the options provided by your theme. You can add custom CSS code to your WordPress theme, via the customization options or directly in the styles.css file, editable through the theme editor.   What is CSS […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[44],"tags":[],"class_list":["post-73267","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"yoast_head":"\nAdd Custom CSS Code - AwardSpace.com<\/title>\n<meta name=\"description\" content=\"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Custom CSS Code - AwardSpace.com\" \/>\n<meta property=\"og:description\" content=\"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\" \/>\n<meta property=\"og:site_name\" content=\"AwardSpace.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/AwardSpace\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-28T10:07:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-02T08:12:17+00:00\" \/>\n<meta name=\"author\" content=\"Lazar Shishmanov, PhD\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@awspace\" \/>\n<meta name=\"twitter:site\" content=\"@awspace\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lazar Shishmanov, PhD\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\"},\"author\":{\"name\":\"Lazar Shishmanov, PhD\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b\"},\"headline\":\"Add Custom CSS Code\",\"datePublished\":\"2024-02-28T10:07:01+00:00\",\"dateModified\":\"2024-03-02T08:12:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\"},\"wordCount\":896,\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\",\"url\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\",\"name\":\"Add Custom CSS Code - AwardSpace.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.awardspace.com\/#website\"},\"datePublished\":\"2024-02-28T10:07:01+00:00\",\"dateModified\":\"2024-03-02T08:12:17+00:00\",\"description\":\"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.awardspace.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Knowledge Base\",\"item\":\"https:\/\/www.awardspace.com\/kb\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Design Tools\",\"item\":\"https:\/\/www.awardspace.com\/kb\/design-tools\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"WordPress\",\"item\":\"https:\/\/www.awardspace.com\/kb\/design-tools\/wordpress\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Add Custom CSS Code\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.awardspace.com\/#website\",\"url\":\"https:\/\/www.awardspace.com\/\",\"name\":\"AwardSpace.com\",\"description\":\"Free Web Hosting with PHP, MySQL, Email Sending, No Ads\",\"publisher\":{\"@id\":\"https:\/\/www.awardspace.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.awardspace.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.awardspace.com\/#organization\",\"name\":\"AwardSpace.com\",\"url\":\"https:\/\/www.awardspace.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"contentUrl\":\"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png\",\"width\":1759,\"height\":176,\"caption\":\"AwardSpace.com\"},\"image\":{\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/AwardSpace\/\",\"https:\/\/x.com\/awspace\",\"https:\/\/www.instagram.com\/awardspace\/\",\"https:\/\/www.quora.com\/profile\/Award-Space\",\"https:\/\/www.linkedin.com\/company\/19214384\/\",\"https:\/\/www.reddit.com\/user\/AwardSpace\",\"https:\/\/www.pinterest.com\/awardspace\/\",\"https:\/\/www.youtube.com\/user\/AwardspaceWebHosting\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b\",\"name\":\"Lazar Shishmanov, PhD\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g\",\"caption\":\"Lazar Shishmanov, PhD\"},\"description\":\"Lazar is a marketing specialist with more than ten years of experience in the field, eight of which as part of the marketing department at AwardSpace. Academically, Lazar holds a Bachelor's degree in Public Relations, a Master's degree in Semiotics, Language and Advertising, and is a PhD candidate in Integrated Marketing Communications. You can learn more about Lazar on his personal website.\",\"url\":\"https:\/\/www.awardspace.com\/author\/lazar\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Add Custom CSS Code - AwardSpace.com","description":"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/","og_locale":"en_US","og_type":"article","og_title":"Add Custom CSS Code - AwardSpace.com","og_description":"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.","og_url":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/","og_site_name":"AwardSpace.com","article_publisher":"https:\/\/www.facebook.com\/AwardSpace\/","article_published_time":"2024-02-28T10:07:01+00:00","article_modified_time":"2024-03-02T08:12:17+00:00","author":"Lazar Shishmanov, PhD","twitter_card":"summary_large_image","twitter_creator":"@awspace","twitter_site":"@awspace","twitter_misc":{"Written by":"Lazar Shishmanov, PhD","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#article","isPartOf":{"@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/"},"author":{"name":"Lazar Shishmanov, PhD","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b"},"headline":"Add Custom CSS Code","datePublished":"2024-02-28T10:07:01+00:00","dateModified":"2024-03-02T08:12:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/"},"wordCount":896,"publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"articleSection":["WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/","url":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/","name":"Add Custom CSS Code - AwardSpace.com","isPartOf":{"@id":"https:\/\/www.awardspace.com\/#website"},"datePublished":"2024-02-28T10:07:01+00:00","dateModified":"2024-03-02T08:12:17+00:00","description":"Elevate your WordPress site's look by adding custom CSS code. Learn how to seamlessly add your styles for a truly tailored website.","breadcrumb":{"@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.awardspace.com\/kb\/add-custom-css-code\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.awardspace.com\/"},{"@type":"ListItem","position":2,"name":"Knowledge Base","item":"https:\/\/www.awardspace.com\/kb\/"},{"@type":"ListItem","position":3,"name":"Design Tools","item":"https:\/\/www.awardspace.com\/kb\/design-tools\/"},{"@type":"ListItem","position":4,"name":"WordPress","item":"https:\/\/www.awardspace.com\/kb\/design-tools\/wordpress\/"},{"@type":"ListItem","position":5,"name":"Add Custom CSS Code"}]},{"@type":"WebSite","@id":"https:\/\/www.awardspace.com\/#website","url":"https:\/\/www.awardspace.com\/","name":"AwardSpace.com","description":"Free Web Hosting with PHP, MySQL, Email Sending, No Ads","publisher":{"@id":"https:\/\/www.awardspace.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.awardspace.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.awardspace.com\/#organization","name":"AwardSpace.com","url":"https:\/\/www.awardspace.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","contentUrl":"https:\/\/www.awardspace.com\/wp-content\/uploads\/2018\/08\/awardspace_logo.png","width":1759,"height":176,"caption":"AwardSpace.com"},"image":{"@id":"https:\/\/www.awardspace.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/AwardSpace\/","https:\/\/x.com\/awspace","https:\/\/www.instagram.com\/awardspace\/","https:\/\/www.quora.com\/profile\/Award-Space","https:\/\/www.linkedin.com\/company\/19214384\/","https:\/\/www.reddit.com\/user\/AwardSpace","https:\/\/www.pinterest.com\/awardspace\/","https:\/\/www.youtube.com\/user\/AwardspaceWebHosting"]},{"@type":"Person","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/13f0961f1cff18623121a6716f08c58b","name":"Lazar Shishmanov, PhD","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.awardspace.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/341ac134090ebf7e8095d20d79485f8652e19c1d00cfef899e40c69ec4ac10cb?s=96&d=mm&r=g","caption":"Lazar Shishmanov, PhD"},"description":"Lazar is a marketing specialist with more than ten years of experience in the field, eight of which as part of the marketing department at AwardSpace. Academically, Lazar holds a Bachelor's degree in Public Relations, a Master's degree in Semiotics, Language and Advertising, and is a PhD candidate in Integrated Marketing Communications. You can learn more about Lazar on his personal website.","url":"https:\/\/www.awardspace.com\/author\/lazar\/"}]}},"_links":{"self":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/73267","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/comments?post=73267"}],"version-history":[{"count":0,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/posts\/73267\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/media?parent=73267"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/categories?post=73267"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.awardspace.com\/wp-json\/wp\/v2\/tags?post=73267"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}