By signing up, you consent to receive email newsletters from me periodically.

How to Edit CSS in Your Blog

How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress, Blogger and Squarespace. Only on www.DesignYourOwnBlog.com

How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress, Blogger and Squarespace. Only on www.DesignYourOwnBlog.com

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:

What is CSS for bloggers + beginners. Download a free CSS cheat sheet just for bloggers at DesignYourOwnBlog.com!

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!

  1. In your dashboard, go to Theme and Under “My theme,” click Customize.
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger. Design Your Own Blog
  2. On the left, scroll down and click to expand the Advanced section
  3. Click the arrow next to Body Text to expand a scrolling menu
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger. Design Your Own Blog
  4. Scroll down and then click Add CSS
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger. Design Your Own Blog
  5. Add any new CSS styles or CSS overrides here
  6. When you’re finished, be sure to click the Save icon in the bottom right of your screen
    Save button. How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger. Design Your Own Blog
  7. 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!

  1. Go to Appearance > Edit CSS
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress. Only on www.DesignYourOwnBlog.com
  2. 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?

How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress. Only on www.DesignYourOwnBlog.comIf 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!

Powered by ConvertKit
Marianne signature for DesignYourOwnBlog.com

58 Comments

  • Deborah says:

    Thanks Marianne. This is the question that I was going to ask on Friday Faves.

    • Marianne says:

      Glad I could read your mind Deborah! Let me know if I need to clarify more or if the instructions are pretty straightforward. 🙂

  • Mattie says:

    This is so helpful!! Thank you.

    • Kristian says:

      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.

  • Mattie says:

    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.

    • Marianne says:

      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!

        • Marianne says:

          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!

  • Julie says:

    Hi Marianne, Your link for your competition is not working but the survey is. Cheers Julie

  • Mirella says:

    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

    • Marianne says:

      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/

      • Mirella says:

        I have my own domain website from wordpress.com

        • Mirella says:

          Oh but is it possible because my template is a freebie and not a paid one?

          • Marianne says:

            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.

  • Marylou says:

    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.

    • Marianne says:

      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.

  • Sharon says:

    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.

  • Me says:

    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.

    • Marianne says:

      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.

  • Denise says:

    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

  • Jessica says:

    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!

    • Marianne says:

      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! 🙂

  • Laura says:

    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!

  • Kristie says:

    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?

    • Marianne says:

      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.

  • Kristie says:

    Thank you so much Marianne! I will check out those posts. I will pin this so I can refer back to this!

  • Zoyoyayep says:

    Thanks for your awesome solution about CSS style.Really helpful,Mate.. Now My website will be run without any problem.

  • Abiya says:

    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.

  • Deb Nixon says:

    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

  • Linda says:

    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!

    • Marianne says:

      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! 🙂

    • Marianne says:

      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 🙂

  • DD George says:

    Great post Marianne!

    This is definitely a simple instruction on how to edit css, I can definitely recommend this to my friends.

  • sonnie says:

    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 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.

  • skulblog says:

    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

  • dan says:

    Your blogger info is outdated.

  • Dear Marianne

    Can you tell me CSS code for auto customization of images in my blog learnatool
    best solution is my search.

  • I think we should ignore direct edit css in WordPress.

  • Tanya says:

    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.

  • 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.

Leave a Reply

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

I accept the Privacy Policy

This site uses Akismet to reduce spam. Learn how your comment data is processed.