Super mini CSS Tutorial

Below is my very mini tutorial on using CSS to customize your site 🙂

You can customize any element on your site by determining the selector name of the element and then declaring a property and a value.

For example, the selector name of your blog post titles is this: h2.post-title

The properties you might want to change could be these:
font-size
color
text-transform

You put it all together in your stylesheet code by entering the selector followed by an open curly brace. On the next line you enter each property, followed by a colon, a value, and a semi-colon. On the last line you enter a closing curly brace. It would end up looking like this:

h2.post-title {
font-size: 16px;
color: purple;
text-transform: lowercase;
}

This page has more information about the types of text styling that are possible, and a try it yourself area where you can enter a value and see what effect it has:
http://www.w3schools.com/css/css_text.asp

The tricky thing can be determining the selector name. In Firefox, you can right-click (or Ctrl + click) on anything on your screen that you want to know the selector name of. You’ll then see a little pop-up that shows you the exact name.

You can get the codes for specific colors here:
http://www.colorpicker.com/

I hope this helps! It’s a very powerful tool once you’ve got ahold of the basics 😉

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s