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!
Thanks Marianne. This is the question that I was going to ask on Friday Faves.
Glad I could read your mind Deborah! Let me know if I need to clarify more or if the instructions are pretty straightforward. 🙂
This is so helpful!! Thank you.
I use blogger, i follow your step but the result is different, it’s look like every gadget in blogges has own css, when i inspect the web, so many inherite code.
I have a question! You mentioned that is the best way to edit CSS if you do NOT have a child theme in place… what do you do if you do have a child theme activated.
Hi Mattie, great question! Honestly you can still use this method with a child theme, but some child themes have a blank style sheet built in that you can edit. You can check for this by going to Appearance > Edit and scrolling to the bottom of the list of files on the right. You don’t want to edit styles.css or rtl.css. If there is another style sheet there, it should have notes in it on whether or not you can use it for customizations.
Hope that helps!
How to edit in css option in blogger for changing boxed version to wide screen version, please show me how to use it for our advantage. Thank you!
Hi Kiran, unfortunately, I don’t think there is a quick explanation for how to do this. I would recommend looking for a new template or hiring a designer to help. You could also purchase my CSS course to gain a much deeper understanding of CSS if you would prefer to do it yourself. Hope one of these options is useful for you!
Hi Marianne, Your link for your competition is not working but the survey is. Cheers Julie
Thanks Julie! Gremlins!! I hope you found the contest, I sent out a new email Saturday morning with the correct one 🙂
Hi Marianne,
I want to change my template a little, but I don’t see jetpack so I can look for custom CSS, and also if I go to Appearance and than Editor I don’t see custom CSS.
I hope you can help me
Hi Mirella, it looks like you are using WordPress.com, which is not a self-hosted version of WP. From what I understand, Jetpack is already a part of WordPress.com so you don’t need to activate it separately, however if you would like to edit your CSS, you will have to upgrade and pay for the ability to do so. http://en.support.wordpress.com/custom-design/editing-css/
I have my own domain website from wordpress.com
Oh but is it possible because my template is a freebie and not a paid one?
If your website is at WordPress.com, it’s not a self-hosted site even though you may have your own domain. Because WordPress is hosting it for you, they keep many things (including being able to edit the CSS) under lock and key. You will have to pay them to unlock it or you may consider hosting your own site at WordPress.org.
For this reason I usually do not recommend WordPress.com for a free blog, but rather Blogger as it’s much more customizable and still free.
As you do not own the hosting space you can not update the CSS.
Somewhat true, Technokrats. You can access the CSS if you pay the fee to WordPress to be able to do so.
I recently purchased the Genesis framework with the Lifestyle Pro child theme. I started customizing using the “Edit CSS” under Appearance. There was a message [as you mentioned in an above reply] that this is where one can edit/customize. It’s working for me, but I want to make sure I don’t have to create another “custom css” so I don’t lose anything when updates come around. I’m new to css, but have figured it out thanks to yours and others information.
Thank you.
Hi Marylou, yes that is the place where you can make edits. Since you have a child theme, any updates made to Genesis will not affect the child theme and any updates the child theme may have, will not include overwriting the custom style sheet that’s included. So yes, you are fine to work in that one and don’t need to add a new one.
Hello. I just found your blog today and have downloaded the free ebook and also purchased the other helpful resource and printed it out so I can read it at my pleasure. I know enough about changing things to do a not too bad job. I wanted to ask you – backgrounds – is the trend at the present time toward patterned or solid colors? And – love your website and all the info found on it.
Thank you Sharon, I am so flattered that you enjoy my blog so much already! That’s a very good question about backgrounds and here’s what I think:
The trend of loud and complicated patterned backgrounds are pretty much over. That’s not to say you shouldn’t use a pattern at all, you should look for more subtle patterns with pale or neutral colors. A good resource would be http://subtlepatterns.com/
Aside from patterns, soft textures like watercolor (http://designyourownblog.com/blog-design/watercolor-design-trend-use-it-in-your-blog/) and canvas is very popular as are solids or very light gradients: http://designyourownblog.com/blog-design/learn-easy-html-code-css/create-ombre-gradient-blog-background/
I hope this helps Sharon!
testing once again!
Its a much safer practice to stay away from the builtin editor, and download the stylesheet.css via FTP, that way theres always an undo, and you don’t end up in a pickle. Also a wise idea to use a child theme to ensure your hard work doesn’t get overwritten the next time your theme updates.
Hi Chris,
I totally agree with you, however based on past experience with the majority of my audience, they are looking for more basic solutions as opposed to the technical ones they can find anywhere else. I do appreciate your input though because yes it is usually safer to go with a child theme.
I did it! I edited my CSS. Thank you for your step-by-step directions. I was able to implement the changes you suggested and now my site is one step prettier.
With gratitude,
Denise
Hooray Denise, so glad to hear it and it looks wonderful!
Hi! I just wanted to say thank you for the tips on CSS and customizing. I am a blogger and I have taught myself all of the web design that I know, so I am always trying to learn more and find easier ways of doing things! Your blog has been an inspiration for my own!
That’s so nice Jessica, thank you for saying so! And you are most welcome, I love CSS and want everyone to know how to use it! 🙂
Hey, Marianne!
I recently posted on your Facebook group asking for help with the sidebar photo on sheridanbirth.com. Thanks for the link to adding a custom CSS – your directions made it really easy to follow. I added this to the CSS as you suggested:
.widget img.profile {
border-radius: 0;
}
…but it hasn’t changed anything with my sidebar photo. Any ideas? Thank you!
Hey Laura, I see that the roundedness did go away. Are you speaking of the cut off corners? If so, then that is part of the image you uploaded and you’ll have to upload a new one. If you look here at just the image, this is exactly what I’m seeing in your sidebar: http://www.sheridanbirth.com/wp-content/uploads/2016/08/Sidebar-photo.jpg
I have the Foodie Pro theme. I would like to make the space where the post is wider so that there will be more words per line. I don’t know if this means my sidebar needs to be closer to my words or if I need less white space on the sides. I also might like to add a custom font. I would like to have a drop down menu as well that leads to pages or posts. All this to say is this possible with my theme, and would your book explain how to do this?
Hi Kristie, you should be able to adjust the widths of your content and sidebar columsn using CSS. Have you read my CSS tutorial yet? That will help you find out how to use the Inspect tool to see what classes your columns are using. My upcoming CSS course will really help with that, so be sure to subscribe to be notified when it is released.
I explain how to add custom fonts in this post here: http://designyourownblog.com/how-to-use-cool-fonts-on-your-blog-or-website/
You can certainly add drop down menus in Foodie Pro. It should just be a matter of going to Appearance > Menus and then dragging and dropping menu items below the top level ones.
Thank you so much Marianne! I will check out those posts. I will pin this so I can refer back to this!
Thanks Kristie! I appreciate that and glad it helps you out as well 🙂
Thanks for your awesome solution about CSS style.Really helpful,Mate.. Now My website will be run without any problem.
I recommend playing on a free server has free services. I haven’t seen any ads unless you try to hook up a domain name. It will give you experience with ftp clients and such. I typically use windows explorer (that’s the file browser), but many prefer fibrillate. You should research things like that too: ftp clients, domains, etc.
Hi Marianne,
I’m trying to sign up for your CSS “cheat sheets” and to subscribe to you, but I keep getting an error and it won’t let me submit. Suggestions?
Thanks!
Deb
Hey Deb, sorry about the late reply, just catching up here. I sent you an email, let me know if you don’t receive it!
Hello Marianne,
I am brand new and on the learning curve – I do have a self hosted WP free theme at the moment – haven’t published anything yet.
I went to activate the CSS in Jetpack (free version) under settings and could not find anything that looked like what you have in the images. I did find the CSS under appearances in my WP side bar further down, and it takes me to a place that says customizing – additional CSS.
Am I in the right place?
I am a little concerned that I am going to screw something up.
I am not fully understanding the child theme either. I haven’t created one of those and not sure how important it would be to me at this point.
Thank you so much for creating all this great content — I certainly understand a bit more than I did earlier today!
Oh for crying out loud Linda, Jetpack has just updated and now I can’t figure out where to turn this option on either! However, if you do have a menu item under your Appearance menu specifically called ‘Edit CSS’ then that’s the right one and you are ok to edit it. I have written to Jetpack support to find out where on earth they’ve moved this option to now (this is not the first time they’ve completely hidden it) and will update the tutorial accordingly.
Thanks for bringing it to my attention! 🙂
Hi Linda! So it looks like the Edit CSS option is now automatically included in the WordPress dashboard, so no more adding it through Jetpack. Hooray, one less step! So you were in the right place all along and you should have no worries about messing things up 🙂
Great post Marianne!
This is definitely a simple instruction on how to edit css, I can definitely recommend this to my friends.
Thanks George!
Your blog just made my life easier ,thanks for sharing
Your blog is very useful for me because your all the steps and details are clearly specified. Thanks for sharing this information.
I’m so glad to hear it Andreas, thanks for letting me know!
I find this post shared by my friends in a facebook group …. Great indeed, Now I can edit CSS easily and comfortably, Thanks for the share, Marianne.
Glad it helped Heidi!
wow thanks for the info
Thanks. I share this with my friends, and he got a good idea how to edit CSS in WordPress blog
Your blogger info is outdated.
Thanks for letting me know Dan, I had no idea they had changed it recently. It’s now been updated!
Dear Marianne
Can you tell me CSS code for auto customization of images in my blog learnatool
best solution is my search.
Hi Sumit, i am not sure what you are asking for, could you provide an example?
I think we should ignore direct edit css in WordPress.
Hi, nice article, unfortunately it does not tell you how to edit CSS in blogger, it only tells you how to add it. What if you wanted to edit the CSS you added previously. It does not display using the steps you provided.
Hi Tanya, unfortunately I don’t support Blogger tutorials anymore because most of my readers do not use it anymore.
Unfortunately, this article doesn’t actually explain how to edit custom CSS in Blogger. It explains how to add custom CSS, but not how to edit CSS you have already added.