Image may be NSFW.
Clik here to view.
In our previous encounter, we had discussed about the basic structure of the Blogger HTML template on an overall basis. Today’s discussion is a sub-part of the previous understanding – i.e to understanding the skeletal structure of Blogger CSS.
Mission 3: This tutorial lesson for Blogger is to focus on the styling structure of the Blogger template. In other words, the CSS coding structure generally used for Blogger template designing.
PREVIOUS MISSON – Mission 2 – Understanding Structure of Blogger HTML Template.
NEXT MISSON – Mission 4 – Create Simple Blogger Template Skeletal Structure.
Note: We are still using the “Simple Template” from Blogger for reference.
You see it in action here.
A Pictorial Representation Of The Blogger Template CSS:
| Image may be NSFW. Clik here to view.  |
| Click the image to Enlarge |
Important: For easier understanding the CSS styling part of the Blogger template has been divided into 3 parts or sections.
Note: A typical style sheet(CSS – Cascading Style Sheets) generally is put between tags like shown below:
<head>
<style>All your css codings</style>
</head>
but, in this template which we are using is not between <style> & </style> tags but between <head></head> tags.
SECTION 1: VARIABLES
Variable values declared as said before is used for reusing the same code/values again within the template thus causing simplicity, code reduction and faster performance. Variables can also be used to get a combination of different values by reusing.
For E.g:- If you want some particular section of the texts to be font colored RED, then you can declare once in this section as
<Variable name=”keycolor” description=”Main Color” type=”color” default=”red” value=”red”/>
Note: It is not mandatory that you need to use variables in your template. It is up to the designer to decide whether you want to use them or not. For eg: this blog don’t really use variables mostly – very few variables are declared.
SECTION 2: CONTENTS/GLOBALS
This section generally contains the common CSS codes which is for a common appearance for the template elements. The global settings for your web page appearance.
For E.g:- The complete html can be given a background lets say html{background:green;}
Later you can customize the background by declaring the html to some other color.
Note: The last declared CSS styling is considered by browsers when rendering a web page. If you declare body{background:red;} and after few lines you declare body{background:yellow;} then, your background would be “Yellow” and not red. You can test that by declaring one after another twice in your template.
SECTION 3: HEADER and the rest
This is the section of the CSS where the actual elements starting from “Header” is designed or styled in your template. The rest of the coding contains styling for main contents, sidebars and footers. If other elements they are also considered.
The Rest of the CSS coding in a typical Blogger templates are:
1) Header
2) Columns (Main Column where content/article appears and Sidebar column)
3) Posts (Post body, Post header, Post footer and so on)
4) Comments (Comment threads)
5) Footer
6) Other styling if any.
Those codes can be seen in the template HTML of the template we are using.
That’s all for today, we will create a simple Blogger template with the help of the past 3 tutorials.
I’ll also share the template for download so that you can learn that simple structure.
Enjoy the rest of lessons.
The post Understanding Structure of Blogger CSS | Mission 3 appeared first on iTechColumn.