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 Template and click the Customize button
- Click on Advanced
- Scroll down the right column and select Add CSS at the bottom
- Add any new styles or overrides here
- 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, here is how we add a new custom style sheet that will override your theme’s styles. It’s really easy!
- Enable Jetpack in your dashboard by going to Jetpack > Settings
- Look for Custom CSS and hover over it
- Click Activate
- Hover over it again and click Configure and this takes you to your new style sheet
- To get back to your style sheet later, you can just go to Appearance > Edit CSS
- Start adding your new CSS declarations below the red text
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).
You’ll also see some publishing options appear to the right. Unless you know what you are doing, you should leave these as is.
The only one you may wish to change is Mobile Compatible. This one only appears if you have Jetpack’s Mobile Theme turned on. Turning this on will allow you to apply CSS changes to that theme as well.
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 paying $30/year. 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 and are willing to pay the fee, 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 and download your free cheat sheet with common code snippets:
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 7000+ others and get instant access now!