A blog at thumblogger is build from boxes, the thumb navigation is in a box, the links are in a box, the log entry is even in a box. A box always consist of 2 elements: a boxheader (the header/title of a box) and the boxbody (the content of the box). Below is a screenshot with the boxheader and boxbody marker in red.
As you can see every box has a boxheader and a boxbody. With CSS you can set certain properties of a class. A class is for example .boxheader or .boxbody. A property is for example: background-color or color.
Now let's change the background color of a boxheader of course with CSS:
.boxheader{
background-color: #FF0000;
}
This will change the background color of a box header into red. Lets look at the details of the above code:
.boxheader, this is a class, this is a unique identifier of the boxheader, so you can say .boxheader stands for a boxheader on your blog.
background-color, this is a property, a property always has a value, in this case a color #FF0000.
{ and }, these are curly brackets. They are required.
Let's try another example:
.boxheader{
background-color: #FF0000;
color: #000000;
}
This will give the boxheader a red background and the title of the boxheader will become white.
You can also change the font:
.boxheader{
background-color: #FF0000;
color: #000000;
font-family: Arial;
}
This will give the boxheader a red background, the title of the boxheader will become white and it will appear with the Arial font. For more text properties:
http://www.w3schools.com/css/css_text.asp
Everything i told is also valid for other classes like .boxbody. A example:
.boxbody{
color: #00FF00;
}
This will give the text in a boxbody the color green.
You can also specify a border size, style and width. Example
.boxbody{
color: #00FF00;
border: 1px solid #FF0000;
}
This will give the text in a boxbody the color green, also the boxbody will be surrounded with a solid red border which is 1pixel width. More border properties are available:
http://www.w3schools.com/css/css_border.asp
As you may have noticed there are also red text which begins with # on the screenshot. These are called ID's, these are just the same as classes (the red text starting with a point (=.). Lets look at a example: i want a big red border arrount the #content.
#content{
border: 10px solid #FF0000;
}
Or: i want a black background on the #navleft:
#navleft{
background-color: #000000;
}
Your blog consists of many html tags and stuff like that. You can change the way a tag looks like with CSS, for example lets change the color of every link on your blog.
a{
color: #FF0000;
}
As we all know a link is defined as <a href="some.htm">something</a> in html, notice that the tag for a link is "a". This "a" mathes the "a" in the above code. And we still know the "color:" property from above.
Let's change the background color of our blog:
body{
background-color: #000000;
}
In html the body tag is <body>, as you can see in the above code that just "body" without the "<" and ">".
Let's give all images a nice big fat blue border:
img{
border: 20px solid #0000FF;
}
In html the image tag is <img src="">.
Things get a bit more advanced now. Let's say i want all images in the #content part to have a red border:
#content img{
border: 1px solid #FF0000;
}
Explanation:
we say i want all images: img
in the #content part: #content
to have a red border: border: 1px solid #FF0000
Because #content is in front of "img" only the images in the #content area will get a red border.
I want all links in #navleft area to have a blue color:
#navleft a{
color: #0000FF;
}
Most items in a box (links box, archive box) are lists, these are defined in html as:
<ul>
<li>List item 1</li>
<li>List item 2 </li>
<li>List item 3 </li>
</ul>
Let's change the boring black circle in front of every list item into something funnier:
li{
list-style-type:
decimal;
}
Now every list item will have a number in front.
"list-style-type" is only 1 of the many properties for a list:
http://www.w3schools.com/css/css_list.asp
I only introduced you to the basics of CSS there is so much more, so much more funny thing you can do with CSS.
A much better and "not in a half hour written" tutorial can be found at:
http://www.w3schools.com/css/
The blogger template has the same .boxheader and .boxbody classes, but different ID's. See the screenshot below. This screenshot also shows a couple of extra classes, for example .reply. You can change the font of a reply on you blog:
.reply{
font-family: Times;
}
More font properties: http://www.w3schools.com/css/css_font.asp
Just try CSS and start experimenting, try everything, every combination, if you break something just undo your changes. Don't be afraid of CSS.