Blogger blog's CSS Style Structure

In this part, a basic overview of CSS part will be introduced. Previous part (Code structure of blogger template ) only describes about the CSS style block names and what those can do. Here, the code structure of CSS part will be explained. The template of blogger varies. But the most important part is common to every blogger template. So, if you know the basic of the common part, you may be able to understand all's easily. Let's move to the basic CSS code style structures:

Part 1: Variables
Variables are used to define font and colors of the blogger template. Through this part template header, font color, style etc. are defined. You can change it's color and fonts from the following locations:

Layout > Fonts and Colors

Minima's variable deceleration is like the following:

/* Variable definitions */ <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" .............................. ..............................

Part 2 : Global
Firstly, the body of the template is mapped. It's the major part of your blog. Global part is defined by the word "body" and is defined "{" and "}". Here, the template background color, margin, font, font-size, text-align etc. are defined. Typical, "minima" template has the following type of global deceleration part.

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

Part 3: Header

Header wrapper related information is presented here. Header title, header description, color etc. information are presented here. The code segment looks like the following:

/* Header */ #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; .............................. ..............................

Part 4: Main Wrapper

Main-wrapper contains "date header", "post", "comment" etc. You can customize it, by adding page elements form the layout option. It controls size, appearance of your blog. "Minima" template has the following main wrapper code segments:

/* Main-Wrapper */ #main-wrapper { width: 410px; float: $startSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ .............................. ..............................

Part 6: Sidebar Wrapper

Sidebar-wrapper contains several things like "Labels", "Blog Archive", "AdSense" adds, "Link Lists", "Picture", "Bookmarking" tabs etc. "Minima" template has the following sidebar wrapper code segments:

/* Sidebar-Wrapper */ #sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ .............................. ..............................

Part 7: Miscellaneous
It's the additional part of your blogger template and contains several information like "About me" or your blog quote etc. It's actually the profile of the blog owner. The code segment of "Minima" template is like the followings:

/* Sidebar-Wrapper */ /* Profile */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; ............................. .............................

Part 8: Post-Footer:
The footer is the part below the post body. It contains the post related information like "Posted by PosterName", "Labels", "10 Comments", "Link to this post" etc. Sometimes, it may contains "Feed" also. The code segment of "Minima" template is like the followings:

/* Sidebar-Wrapper */ /* Profile */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; .............................. ..............................

Part 9: Comment:
All the comment related information is presented here. Here you can define "comment header", "comment-author" etc. Typical, "minima" template has the following code segment:

/* Comments */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; .............................. ..............................

Part 10: Footer:
Footer part contains related information about blog ownership, copyright notes. Moreover, you can add more stuffs like "Recent Posts", "AdSense" ads, "Popular Posts" etc. The code segment of the "Minima" looks like the followings:

/* Footer */ #footer { width:660px; clear:both; margin:0 auto; .............................. ..............................

This is the basic style of CSS on blogger template. You just learn and remember them for advancing the next section. Remember, it's very simple to design blogger template.