CSS is the stuff that fuels your blog’s design.
So if you want to customize the look of almost anything in your blog’s theme or template, you’ll have to have a little basic knowledge of HTML and CSS.
Over the last few weeks we’ve been discussing the basics of HTML and CSS. If you don’t know anything about either of these web programming languages, I encourage you to look at these posts and download your free cheat sheets:
Now that you know what HTML and CSS are and how they work, how do you edit the CSS in your own blog?
That’s what we’re going to discuss today. I’ll show you how to edit CSS in Blogger, WordPress (self-hosted), WordPress.com and Squarespace. And lucky for you, it’s quite easy to do!
(Note: this post has been updated from a previous version)
How to Edit CSS in Blogger
Editing your CSS in Blogger is super easy!
- In your dashboard, go to Theme and Under “My theme,” click Customize.
- On the left, scroll down and click to expand the Advanced section
- Click the arrow next to Body Text to expand a scrolling menu
- Scroll down and then click Add CSS
- Add any new CSS styles or CSS overrides here
- When you’re finished, be sure to click the Save icon in the bottom right of your screen
- That’s it!
How to Edit CSS in WordPress (self-hosted)
You never want to edit the styles.css in your Editor as this is the style sheet for your theme. Doing this may cause problems with your theme and you will also lose your changes if you ever update your theme.
To avoid those issues, WordPress has now enabled a custom style sheet that will override your theme’s styles. It’s really easy to find!
- Go to Appearance > Edit CSS
- Start adding your new CSS declarations right here below the orange text and remember to press ‘Save & Publish’
You have now added a custom style sheet for you to edit that is specific to the theme that you have currently installed.
What If I Change Themes?
If you change themes, your styles will be moved to a revision. If you wish to restore those past CSS, use the CSS Revisions link which will appear in the right sidebar next to your style sheet after you save any changes.
If you do change your theme, it’s a good idea to copy your CSS and save it on your hard drive in case you change your mind and go back to your previous theme. You may also want to save it for reference. To do this, you can copy all the CSS and paste it into a text file, then save it as custom-theme.css (or whatever you want to call it).
Previewing vs Saving
When playing around with CSS, it’s a good idea to preview your changes before you apply them. This will ensure that only you see the changes you’re working on. Only when you are satisfied with your changes, should you click the Save Stylesheet button.
How to Edit CSS in WordPress.com
You can only edit the CSS in your WordPress.com blog by upgrading to a Premium plan. If you are on WordPress.com, you may seriously want to consider switching to another blogging platform (for many reasons). I compare 7 of the top blogging platforms here so you can determine what’s best for your needs.
However, if you insist on sticking with it, follow the instructions here to edit your CSS in WordPress.com.
How to Edit CSS in Squarespace
I don’t use Squarespace so I’m going to leave it to the experts to take this one over. Meg Summerfield was kind enough to teach bloggers how to edit their CSS in Squarespace over on Spruce Rd.
Learn the Basics of CSS Just for Bloggers!
Don’t forget to check out my very easy guide to learning basic CSS just for bloggers.
It also just so happens that I have a new free video workshop to help you learn more about CSS and see how easy it is to beautify your blog using it. Sign up here now!
Over to You
Will you be attempting to edit the CSS in your own blog? I’d love to hear your questions or comments. Join the conversation below!
Hey friend, want free DIY design stuff?
I've got an entire library of FREE goods just for you! Join the 10,000+ others and get instant access now!