How Change Background And Text Color Of Blogger

How to Change Background And Text Color Of Blogger template as is very easy task which can be done without any problem.If you still think you really doesn't know anything about codes and to do it is really a big problem then don't miss even a single post from this blogger design series.If you want from start just start reading my all posts on design from beginning which explain all codes to blogger used in its design on how to make your own blogger template.

Today i will be going to explain on the next part of codes coming in blogger template. and codes define the body section of your template.Below are the codes.

Click the image To View Large

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

The body element defines the document's body.The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc and after defining all these the tag is closed at end.

So we start with writing body {
this symbol means we have started defining css for body and will close it when it will be complete with opposite symbol } and this tells the css for body has been defined.

Now in body css comes the next line background:$bgcolor; this line defines the background color of your template. But the color defined here is $bgcolor. So which color it is.

As i have also told you before on how to change the colors for blogger template in the previous post.There $bgcolor would have been defined in variable definitions,that color would be your blogger template background color.If you want to change it you can change $bgcolor it from there.

And one more is to just write color code in place of $bgcolor that color will be used as we use this way to design new blogger template like this background:#000000;.

You can get all color codes from here.

You can also use any image for you blogger background just write the above line like this.

background:url(http://url_of_the_image);

Your image will be used in place of color.

Now comes margin:0;.Now what does this tag do.As its clear from its name it defines all the space around the elements for which it is being defined,like you added any header in your template and now you want little spacing to it from top,below,left or right.So you have to use this to get space for the element from any part around it.

In full it can be defined as

margin:5px 10px 5px 10px;

That tell the

margin-top
margin-right
margin-bottom
margin-left

all 4 things define these 4 margins above from all four sides.

Then comes color:$textcolor; as this too is same to define color of your text as you can change it in by replacing text color code with $textcolor or just change $textcolor from from visiting this post.


Now come these lines

font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;


telling font and size of text to be used,you can define it as you want.As font defined is georgia you can define any one you want like arial,times roman anything you want.

Now the size has been given small you can give it medium,normal or large.

you can also define size in specific measure like this.

font-size:12px;

now this line text-align: center;

This aligns the text to the centre you can make it to align left or right also by just changing center to left or right.

and after defining all these the css for body tag ends with this symbol }.