How To Add CSS To Your Website WordPress Example
Your Website

How To Add CSS To WordPress.ORG, .COM And Others!

CSS, or Cascading Style Sheets, is a simple programming language used to style web-pages. It can change the color of your title text, position a photo, or even create a sticky menu.

I’m a massive fan of CSS and want to share the most useful snippets of code I’ve discovered. First, I need to show you how to add CSS to your website.

In this post, I’ll show you how to add CSS to WordPress.org, and WordPress.com, sites. I’ll also direct you to the right place for adding CSS on other platforms, like Squarespace, Weebly, Blogger, Shopify & WIX.

Before we get started, if you’re thinking about building your first WordPress.org blog, you can find my FREE step-by-step tutorial, here.

How To Add CSS To Your Website WordPress Example
Where to add CSS on a WordPress.org website

Note: Before making any changes to your website, create a backup. The following is not advice, simply information. Seek professional advice if you’re unsure.

SELECT YOUR WEBSITE PLATFORM:

How To Add CSS To WordPress.ORG (self-hosted)

How Do I Add CSS Code To A WordPress.org website?

  1. From your self-hosted WordPress dashboard, select Appearance → Customise.

    This will load the ‘customising’ page, displaying your website on the right-hand side of the screen. A new panel will appear on the left. 

  2. In the new panel on the left, find and select a tab called ‘Additional CSS’

    You can now add custom CSS to this area. Once you’re finished, hit Publish

WordPress.org CSS Tips

Normally, inputting properly formatted CSS code will result in an immediate change to your website. That means, you won’t have to publish, to see the changes.

There may be occasions when your CSS is properly formatted, but you don’t see any changes, even after you’ve hit publish. When this happens, it’s worth clearing your website cache and reviewing again, before assuming the code is wrong.

Finally, if you have lots of CSS code, it’s worth creating a .txt document on your computer to backup your work on the go. This can be especially helpful if you encounter a browser problem, which might otherwise result in the loss of your work.


How To Add CSS To WordPress.COM

How To Add CSS To Your Website WordPress com Example

Adding CSS to a WordPress.com website is a similar process to what we’ve just covered, however, custom CSS editing is not available to all WordPress.com users. In order to gain access to CSS customization, you must purchase the Premium package or above.

There are currently 5 WordPress.com plans available (check here for updates):

FREEPersonalPremiumBusinesseCommerce
PRICEFree£3 per month£7 per month£20 per month£36 per month
CSSNoNo YesYesYes
A chart showing WordPress.com user plans with CSS options Scroll right on mobile
How Do I Add CSS To A WordPress.com website?

1: From your WordPress dashboard, select Design → Customise.
This will load the ‘customising’ page, displaying your website on the right-hand side of the screen. A new panel will appear on the left.

2: In the new panel on the left, find and select a tab called ‘Additional CSS’. 
If you have the Premium plan or above, you can add custom CSS to this area. Once you’re finished, hit Publish


How To Add CSS To Squarespace, Blogger, Weebly, Shopify & WIX

Most website builders have a place for you to add your own CSS code. You can normally find this area in the Theme, styling or design section of your user panel. Here’s how you add CSS to some of the most popular website builders around:

  • Squarespace – Squarespace guides – how to add CSS to your Squarespace website
  • Weebly – Weebly support – how to add CSS to your Weebly website
  • Blogger – Google help – how to customize your blogspot website with CSS
  • Shopify – Shopify help center – how to add CSS to your shopify website
  • WIX -You can not currently add CSS to a WIX website

Now you know how to add CSS to your website, lets start editing. Be sure to Subscribe for notices about new articles, including more CSS tutorials.

Got a question? Let me know in the comments below.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *