One Mom’s Journey from Fat to Skinny to Confident

BLOGGING THOUGHTS

CSS for Bloggers – Part 1

8 Comments 1265 views

Have I told you guys how much I LOVE CSS? Do you know what CSS is? Well let me tell you, if you don’t, you are missing out on a relatively simply way to edit and customize your blog templates.

Let me give you a really quick introduction. CSS stands for Cascading Style Sheets. Fun word in there is STYLE! It’s really the language that adds the "look" to your site/blog’s look and feel. From Background colors to header images to link style to navigation positioning is can all be done with CSS.

Now don’t get all freaked out that I called it a language. Even though CSS can get complicated fast, there are some super simple ways to modify your blog. Over the next few weeks I’d like to cover some CSS basics specificaly for bloggers but before we move on I need to know that you know how to access your blog’s CSS.

access CSS on self hosted WordPressFirst of all, CSS is a web standard and therefore not tied to any particular blog platform. Whether you are a blogspot or WordPress user, you can edit or add a little CSS to modify the look of your blog. For wordpress users if you are self hosted, simply go to the editor under the appearance option in the side bar. Style.css should be the default file loaded in the editor.

accessing CSS in wordpress.comOn WordPress.com? Your gonna have to pay for access but it’s exactly the same. Once you upgrade you will have access to the Edit CSS link under the appearance options.

Blogger? Blogspot?

Accessing it is a little different but if you scroll down on the edit HTML page under the layout tab you will see CSS code you can manipulate or add to for your particular template. Note: Blogger has since made changes and created an interface to make basic edits to your CSS file under the Fonts & Colors Tab

accessing CSS is blogger

OK, so you have access but what do you DO with it? Let’s take a look at this little snippet from a recent template I’m working on just for a quick introduction.

example CSS

Look intimidating?

Naaaaa…. really look at it and I bet you can figure out it out.

First of all this particular CSS rule is being written for the body. Think of the body as the base of the page or the page itself. Let’s start from the bottom and work our way up. There’s definitely an image on the page, that’s centered and at the top. It doesn’t repeat. It’s name is bg.gif and it’s found in the images folder. There’s also a background color who’s code is #62965d; Something about scrolling and another color, which must be the text color since the background color was already defined.

Sound about right? Still intimidated?

You shouldn’t be. Really it’s just a bunch of simple commands that define how things should look. In my next few posts I’m going to cover some basics to help you customize your own blogs. For now just make sure you can get access to your CSS and peer at it a bit. Go ahead don’t be scared, I promise it won’t bite and whatever you mess up you can simply undo. Don’t fear the code!

Any questions on how to access CSS in you blogs? Any specific CSS topics you would like see covered in this series? Next week we’ll dive in! :)



Leave a comment

I’d love to hear your story or thoughts on mine.

However, to prevent the massive amounts of spam I was receiving I have turned off comments on any post older than 5 days old. If you'd like to leave me a note regarding this post or anything really try me on twitter (@RoniNoone,) my Facebook page, or even IG (@RoniNoone) I'm so sorry for the inconvenience. I never thought I'd have to do this but it's gotten way out of hand and comment management has become simply too time consuming to manage.

Discussion

There are 8 comments so far.

    shandy

    September 10, 2009

    Great post! I’m VERY familiar CSS as a fellow web geek, but I love to spread the word of how easy some features of CSS can be. Yes, there are more techy-intense uses with it (that I have to deal with daily), but it can really help the average user make their blog “theirs”. I’d encourage anybody to play with CSS and see what happens to their site. It just gives you more power! (but I’d back up the original css just in case :-)

    roni

    September 10, 2009

    shandy – Glad you liked it! I also deal with CSS everyday and I want to help the everyday blogger get over the fear of CSS. I agree it’s really powerful!

    Hallie

    September 11, 2009

    Thanks for doing this! I took an intro web programming class in college and we did some CSS stuff…which I promptly forgot. This’ll be great.

    Paula

    September 11, 2009

    Roni–thanks for doing these posts. I use blogger and I’ve wanted to customize my template, make it wide, perhaps use 3 column instead of two. I’ve done google searchs and have found some instructions and I’ve played with it a little. I’ve tried to backup my template and have found directions to do so, but I find it intimidating. But in a good way. I want to add pages (About Me) and (Before and After pictures) but can’t figure it out. Perhaps you can do a post about that? Thanks for being here for us. I certainly appreciate it.

    Cinemarie

    September 11, 2009

    This is a brilliant idea Roni! Thank you so much for sharing your knowledge of CSS, I can’t wait to learn more and try and make some changes to my blog thanks to you! :)

    Jaye

    September 11, 2009

    WOW!!! I feel like you are reading my mind. After I went to WordCamp09 and read your other blog about HTML I decided that it was time to really learn a little bit about HTML and CSS.

    I am taking some online classes through ed2go.com I am half way through my last HTML class and start my CSS class on the 15th. I am wondering after I learn these two languages what should I learn next? PHP, Javascript, maybe I should learn how to really use PhotoShop and not do the trial and error approach that I am currently using.(Not always effective)

    Can you should us how to make buttons? I know that sounds really easy but mine are so ugly and look very lame.

    Thanks!

    dedree

    October 4, 2009

    Thanks for this. This encourages me to master css, when I have a moment. How is the new job? Could you email me from your job email?
    dd