{"id":22957,"date":"2018-07-18T09:00:59","date_gmt":"2018-07-18T03:30:59","guid":{"rendered":"https:\/\/blog.resellerclub.com\/?p=22957"},"modified":"2026-05-21T10:22:05","modified_gmt":"2026-05-21T10:22:05","slug":"how-to-use-custom-css-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/","title":{"rendered":"How to Use Custom CSS in WordPress"},"content":{"rendered":"<p>While WordPress offers users thousands of themes to use to launch a website as quickly and easily as possible, it does not disappoint those who would love to use an existing theme and still stand out from the crowd. This is exactly what most web professionals who want to set up their own website do through tweaking the CSS of their WordPress theme or template. Not to mention that custom WordPress themes are a great way for WordPress developers and designers to earn some extra income. If you\u2019re looking for a way to break into this opportunity or just put your own stamp on your WordPress theme, this blog is for you. Let\u2019s explore how to use custom CSS in WordPress.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22963\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css1.png\" alt=\"\" width=\"1589\" height=\"558\"><\/p>\n<p>&nbsp;<\/p>\n<h3>How to use custom CSS in WordPress:<\/h3>\n<ol>\n<li><strong>Directly in your WordPress admin panel:<\/strong><\/li>\n<\/ol>\n<p>WordPress lets you add your own CSS in WordPress to an existing theme to customize its appearance and layout in the following way:<\/p>\n<ol>\n<li>Log into the admin area of your WordPress website<\/li>\n<li>Go to \u2018<em>Appearances<\/em>\u2019 &gt; \u2018<em>Customize<\/em>\u2019 &gt; \u2018<em>Additional CSS&nbsp;<\/em>\u2019<\/li>\n<\/ol>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22965\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css2.png\" alt=\"\" width=\"215\" height=\"199\"><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22967\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css3.png\" alt=\"\" width=\"373\" height=\"526\"><\/p>\n<p>TIP : When you use the custom&nbsp;CSS option in WordPress, your modifications are preserved in the event that you decide to switch to another theme and revert again.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"padding-left: 30px;\"><strong>2. Modify your CSS in WordPress through plugins:<\/strong><\/p>\n<p><strong>1.<a href=\"https:\/\/wordpress.org\/plugins\/so-css\/#installation\" target=\"_blank\" rel=\"noopener\">SiteOrigin CSS<\/a>:<\/strong><\/p>\n<p>The main attraction of SiteOrigin CSS is the visual controls it provides while editing the CSS of your website. With a 5 star rating from 100+ users and 200,000+ active installations, the plugin seems very well-received by most users.<br \/>\nCost : None.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22969\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css4.png\" alt=\"\" width=\"1079\" height=\"751\"><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22971\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css5.png\" alt=\"\" width=\"338\" height=\"544\"><\/p>\n<p>&nbsp;<\/p>\n<p><strong>2.<a href=\"https:\/\/codex.wordpress.org\/Know_Your_Sources#CSS\" target=\"_blank\" rel=\"noopener\">WP Add Custom CSS<\/a>:<\/strong><\/p>\n<p>This plugin lets you add custom CSS in WordPress selectively to individual parts of your website (such as posts,web pages, etc) or of course to all of it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22973\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css6.png\" alt=\"\" width=\"700\" height=\"570\"><\/p>\n<p>&nbsp;<\/p>\n<p><strong>3.<a href=\"https:\/\/wordpress.org\/plugins\/ag-custom-admin\/#description\" target=\"_blank\" rel=\"noopener\"> Absolutely Glamorous Custom Admin<\/a>:<\/strong><\/p>\n<p>Want to customize your WordPress admin dashboard? Use this plugin to tweak that CSS code.<\/p>\n<p>Use this plugin to tweak your admin area including the login page, menu, backend colours, add custom content like images and text and also the tweak the CSS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-22975\" src=\"\/blog\/wp-content\/uploads\/2018\/07\/css7.png\" alt=\"\" width=\"2968\" height=\"1422\"><br \/>\n<strong>More Resources:<\/strong><\/p>\n<p>If you look at nothing but the resources offered on these 2 pages, you\u2019re good to go !<\/p>\n<ul>\n<li><a href=\"https:\/\/codex.wordpress.org\/Know_Your_Sources#CSS\" target=\"_blank\" rel=\"noopener\">Know your sources <\/a><\/li>\n<li><a href=\"https:\/\/codex.wordpress.org\/Site_Design_and_Layout\" target=\"_blank\" rel=\"noopener\">Site Design and Layout <\/a><\/li>\n<li><a href=\"\/blog\/css-generators-resources-to-make-web-design-a-lot-easier\/\" target=\"_blank\" rel=\"noopener\">CSS Generators: Resources to make web design a lot easier!<\/a><\/li>\n<\/ul>\n<p>If you think you need a little more help, check out this <a href=\"https:\/\/www.w3schools.com\/Css\/\" target=\"_blank\" rel=\"noopener\">CSS tutorial<\/a> from W3 Schools.<\/p>\n<p>We hope you found this blog on \u2018how to use custom CSS in WordPress\u2019 informative. Did you find using a plugin easier or the custom CSS feature in the WordPress admin dashboard? Let us know! Also, if you\u2019re looking for a <a href=\"https:\/\/india.resellerclub.com\/wordpress-hosting\" target=\"_blank\" rel=\"noopener\">WordPress Hosting<\/a> package, check out our WordPress hosting built on the cloud that is designed to deliver the maximum performance for your WordPress website.<\/p>\n<div class=\"fb-background-color\">\n\t\t\t  <div \n\t\t\t  \tclass = \"fb-comments\" \n\t\t\t  \tdata-href = \"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/\"\n\t\t\t  \tdata-numposts = \"10\"\n\t\t\t  \tdata-lazy = \"true\"\n\t\t\t\tdata-colorscheme = \"light\"\n\t\t\t\tdata-order-by = \"social\"\n\t\t\t\tdata-mobile=true>\n\t\t\t  <\/div><\/div>\n\t\t  <style>\n\t\t    .fb-background-color {\n\t\t\t\tbackground:  !important;\n\t\t\t}\n\t\t\t.fb_iframe_widget_fluid_desktop iframe {\n\t\t\t    width: 100% !important;\n\t\t\t}\n\t\t  <\/style>\n\t\t  ","protected":false},"excerpt":{"rendered":"<p>While WordPress offers users thousands of themes to use to launch a website as quickly and easily as possible, it does not disappoint those who would love to use an existing theme and still stand out from the crowd. This is exactly what most web professionals who want to set up their own website do<\/p>\n","protected":false},"author":53,"featured_media":23001,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1531,1533,1367,1523,995],"tags":[1343,410],"hashtags":[],"class_list":{"0":"post-22957","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-smb","8":"category-tech","9":"category-design","10":"category-development","11":"category-hosting","12":"tag-css","13":"tag-wordpress"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Use Custom CSS in WordPress | ResellerClub Blog<\/title>\n<meta name=\"description\" content=\"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.\" \/>\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.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use Custom CSS in WordPress | ResellerClub Blog\" \/>\n<meta property=\"og:description\" content=\"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"ResellerClub Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100005889763273\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-18T03:30:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-21T10:22:05+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tanya Noronha\" \/>\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\":\"WebSite\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#website\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/\",\"name\":\"ResellerClub Blog\",\"description\":\"Web Hosting &amp; Domains\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.resellerclub.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\",\"contentUrl\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#webpage\",\"url\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/\",\"name\":\"How to Use Custom CSS in WordPress | ResellerClub Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#primaryimage\"},\"datePublished\":\"2018-07-18T03:30:59+00:00\",\"dateModified\":\"2026-05-21T10:22:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/16ed77e00d0b86df4fe5ea9dbc5eacaf\"},\"description\":\"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.resellerclub.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use Custom CSS in WordPress\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/16ed77e00d0b86df4fe5ea9dbc5eacaf\",\"name\":\"Tanya Noronha\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.resellerclub.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4c41998ad50d748935c7a5bca721e54bc7cae620f2d4e846c473bccea46770c5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4c41998ad50d748935c7a5bca721e54bc7cae620f2d4e846c473bccea46770c5?s=96&d=mm&r=g\",\"caption\":\"Tanya Noronha\"},\"url\":\"https:\/\/www.resellerclub.com\/blog\/author\/tanya-n\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Use Custom CSS in WordPress | ResellerClub Blog","description":"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.","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.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"How to Use Custom CSS in WordPress | ResellerClub Blog","og_description":"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.","og_url":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/","og_site_name":"ResellerClub Blog","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100005889763273","article_published_time":"2018-07-18T03:30:59+00:00","article_modified_time":"2026-05-21T10:22:05+00:00","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Tanya Noronha","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.resellerclub.com\/blog\/#website","url":"https:\/\/www.resellerclub.com\/blog\/","name":"ResellerClub Blog","description":"Web Hosting &amp; Domains","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.resellerclub.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#primaryimage","inLanguage":"en-US","url":"","contentUrl":""},{"@type":"WebPage","@id":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#webpage","url":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/","name":"How to Use Custom CSS in WordPress | ResellerClub Blog","isPartOf":{"@id":"https:\/\/www.resellerclub.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#primaryimage"},"datePublished":"2018-07-18T03:30:59+00:00","dateModified":"2026-05-21T10:22:05+00:00","author":{"@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/16ed77e00d0b86df4fe5ea9dbc5eacaf"},"description":"Discover simple ways to add custom CSS in WordPress. Customize layouts, colors, and fonts using built-in tools, plugins, or theme editors without coding complexity.","breadcrumb":{"@id":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.resellerclub.com\/blog\/how-to-use-custom-css-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.resellerclub.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use Custom CSS in WordPress"}]},{"@type":"Person","@id":"https:\/\/www.resellerclub.com\/blog\/#\/schema\/person\/16ed77e00d0b86df4fe5ea9dbc5eacaf","name":"Tanya Noronha","image":{"@type":"ImageObject","@id":"https:\/\/www.resellerclub.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/4c41998ad50d748935c7a5bca721e54bc7cae620f2d4e846c473bccea46770c5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c41998ad50d748935c7a5bca721e54bc7cae620f2d4e846c473bccea46770c5?s=96&d=mm&r=g","caption":"Tanya Noronha"},"url":"https:\/\/www.resellerclub.com\/blog\/author\/tanya-n\/"}]}},"_links":{"self":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/22957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/comments?post=22957"}],"version-history":[{"count":7,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/22957\/revisions"}],"predecessor-version":[{"id":41205,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/posts\/22957\/revisions\/41205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/media?parent=22957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/categories?post=22957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/tags?post=22957"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/www.resellerclub.com\/blog\/wp-json\/wp\/v2\/hashtags?post=22957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}