One Mom’s Journey from Fat to Skinny to Confident

BLOGGING THOUGHTS

CSS For Bloggers Part 2 – The Basics

2 Comments 745 views

Sorry for the delay between parts. If you missed CSS for Bloggers Part 1 Click here to check it out.

OK, so let’s move on with the CSS stuff. K? I’m going to start at the beginning. We could jump right in to modifying CSS for your blog but I’m telling ya, a good foundation and you’ll be editing your own CSS is no time.

I like to think of a web page as a Peanut Butter and Jelly Sandwich. Crazy I know but CSS is the Jelly to HTML Peanut Butter. It makes it all sweet and yummy. OK bad metaphor but I’m hoping you catch my drift. As I said in Part 1, CSS is the language that adds the “look” to your site/blog’s look and feel.

If you are blogging you are probably familiar with at least a little HTML. HTML is a tag based language. Many people online are comfortable with that. You want something bold you wrap a <strong> tag around it. Italics? an <em> tag.

For example in this sentence this is <strong>bold</strong> and this is <em>emphasized</em>.

Looks like this…

For example in this sentence this is bold and this is emphasized.

If you have no idea what I’m talking about no fear as CSS is completely different. It’s a language that’s made up of selectors, properties and values.

Take a big ol’ guess at what that CSS rules does.

Yup… it defines the background color as green. Easy right?

See, CSS rules are made up of a…

Selector – What you want to effect. In the case of our example it’s the body of our html document.

and a

Statement – How you want to effect it. Statements are composed of property value pairs. In the case of our example we changed the background color (a property) to green (the value.)

Again, not too terribly difficult. Is it? The hard part is knowing what can be selectors, properties and values.Let me go into this at a basic level and then leave you with some resources before moving on to part 3 of this series.

Let’s more to a another example. Say you want all your paragraphs to be blue. You simply write a rule like this.

p {
color:blue;
}

p is the selector. It is what you are style. The { marks the beginning on the statement. Color is the property referring to the text color and blue, well, blue is a color… duh. ;) Finally the } marks the end of the statement.

Now you could have more then one property value pair between the brackets. For example..

p {
color:blue;
background-color:yellow;
font-size: large;
}

I just added two other property value pairs that would make all my paragraphs look like this…

I am a crazy paragraph.

So far so good? Here are some resources to help take some of these concepts further.

Look for part 3 of this series in about 6 months. Ahhh I’m only kidding but in all seriousness. Please be patient. I will be covering more on topics in the next part. As always let me know if you have any specific questions. I’m here to help!



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 2 comments so far.

    Becky F

    October 15, 2009

    Quick question on syntax… does everything *need* to be broken up like that, on different lines, or is that just for human readability?

    Thanks for continuing the tutorial!

    roni

    October 15, 2009

    Great question! It’s just for human readability. As long as all your brackets { } colons : and semi-colons ; are correct you can put it all on one line. In fact CSS (as well as HTML) ignores all spaces after the first one including line breaks.