Imagine Your Blog
The outer white solid line is referring to body tag. Remember, body tag will paint all browser windows. All the white solid line box inside body tag is refer to division tag. If the solid line is inside other solid line, then its meaning that division tag will embeded inside other solid line. When we see all solid line inside body tag, there are 11 solid line, so it also refer to 11 division tag with specified id (such as header id, attribution id, etc.). Let talk one example from the picture above, sidebar id and postside id are inside mainside id, so division tag for sidebar id and postside id must embeded inside division tag for mainside id. Green color on the picture above is refer to margin area and the orange color is refer to padding area, inside dashed line refer to section area. From this definition, we can write the html code as follow
And for the css code is written as follow
Until here, you are finish making your template. But its still less style for text, widget, and also for post content. For fill that, you can learn css in here.