Styling your Curbly profile - Part 1: CSS basics and colors

I'm what you could call a beginner when it comes to home decorating but a more accurate description would be a total and complete newbie. I still want to contribute in some way to this great community, though.

As you probably have seen, Curbly lets you modify the look of your profile. However, a standard template isn't very personal and that link to "advanced control using CSS" sounds damn frightening. When you've gathered enough courage and pressed it you're greeted by a single text area. Oh, really?

This is where I hopefully can be of some assistance. In this series of posts I'll explain the basics of CSS. I'll also show specifically how to change the appearance of things on your profile page.

In this first part (of maybe three) I'll teach you the basics of CSS and teach you how to change the color of things on your profile. Enjoy!

CSS stands for Cascading Style Sheets. It's used by web designers to tell a browser how to display HTML elements like paragraphs, headers and links. A CSS syntax is made up of three things; a selector, a property and a value and is written like this: (don't give up just yet, that was the most complicated sentence in this post)

selector { property: value }

In this series I'll write it like this for clarity though:

selector {

property: value;

}

 

Notice the semicolon at the end of the value. I've made it a habit to always include it because you need it if you're adding more than one property to a selector.  Example:

selector {

property: value;

property-two: value;

}

I recommend that you use that structure and always add semicolons, at least in the beginning of your CSS career. It makes it somewhat easier.

Now, let's look at a few common HTML elements that we can use as selectors.

p - Paragraph. In other words, regular text.

h1, h2 ... h6 - Headers. h1 is the, uh, heaviest one.

a - A link.

There's tons more but let's focus on these in this post. Time to write our first working style. Let's say we want to change the color of all the paragraphs on our profile to green. This is how the CSS would look:

p {

color: green;

}

 

That wasn't too complicated, was it? But now I hear 80% of you screaming "Damn it, Mikael, that was the ugliest hue of green I've ever seen! I want a sexy text color, like the green in the Curbly logo!" Well, alright. It'll get a little more complicated but you asked for it.

There's more ways to define colors in CSS. The benefit of using a more complicated method is that you can choose exactly the hue you want. Let's learn how to pick a color in MS Paint and apply it to our paragraphs.

Open MS Paint and double click a color square in the color palette at the bottom of the window. Expand the window that pops up and find a lime green that you like. Now look at the boxes to the far right of the window, the ones that's labeled red, green and blue. Now we know the amount of each color that, when mixed, adds up to a sexy lime green color. Let's write some CSS:

p {

color: rgb(150, 195, 41);

}

 

150 is the number from the box labeled red in my Paint, 195 green and 41 blue. That's all you need to know to be able to choose any color you want for your paragraphs at your Curbly profile. But that's not all! You can use the same method to color headers or links too:

h2 {

color: rgb(150, 195, 41);

}

a {

color: rgb(150, 195, 41);

}

 

Wicked!

The h2's on our profiles has a background color too, though. Let's change that to match the green text! We can't change it by using the color property but the background-color will probably do the trick. Let's give it a try.

 

h2 {

color: rgb(150, 195, 41);

background-color: rgb(0,0,100);

}

 

Hey, it worked! One last thing before we rap this up. Just because an element doesn't have a background color it doesn't mean you can't add one! Try adding one to your links or paragraphs. Or why not remove the background of the h2 using background-color: none; instead.

That's all for today. I hope you learned something! I'll try to get the next post(s) up as quick as possible, you'll probably want to do more things with your profile than to change colors.

Feel free to ask me anything by posting a comment!

March 04, 2007

7 comments

Viewed 982 times

0

Mikael's blog (3 posts)

Subscribe to this blog
Member since: 02/27/07
About: Hi! I'm a 22 year old web designer from Örebro, Sweden.New apartment, new motivation. 

More by Mikael

• Next: Styling your Curbly profile...