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!

  • In your dashboard, go to Template and click the Customize button
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger.
  • Click on Advanced
  • Scroll down the right column and select Add CSS at the bottom
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in Blogger. Only on www.DesignYourOwnBlog.com
  • 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
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress. Only on www.DesignYourOwnBlog.com
  • Look for Custom CSS and hover over it
  • Click Activate
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress. Only on www.DesignYourOwnBlog.com
  • Hover over it again and click Configure and this takes you to your new style sheet
    How to edit CSS in your blog or website. Easy tutorial on how to edit CSS in WordPress. Only on www.DesignYourOwnBlog.com
  • To get back to your style sheet later, you can just 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
  • 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?

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

Publishing Options

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

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

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!

Powered by ConvertKit
Mariannes signature for DesignYourOwnBlog.com

32 Comments

  • Deborah says:

    Thanks Marianne. This is the question that I was going to ask on Friday Faves.
    Deborah recently posted…Turn on your lightMy Profile

    • 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.
    Mattie recently posted…Jury Duty & YES KidsMy Profile

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

  • Julie says:

    Hi Marianne, Your link for your competition is not working but the survey is. Cheers Julie
    Julie recently posted…Weber BBQ Chocolate CakeMy Profile

  • 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

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

  • Chris Hardin says:

    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.
    Chris Hardin recently posted…How to set a page as your home pageMy Profile

    • 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
    Denise recently posted…Gift Tags for All OccasionsMy Profile

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

Leave a Reply

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

CommentLuv badge