Three Column Code Explained 3

<style> Yep! This is the last part and as the word says this is where the styling starts and once again we see both open and closing tags <style> </style>
Styling can be a little tricky, especaily in the case of Blogger. Why; you might ask? Because much of the styling has already been done in the template you have chosen. For example the background colour therefore; in order to change an area background colour you need to give that area a specific id as we have done previously.
td{padding:1em; td identifies what we are wanting to style, in this case the table data, note only add things here if you want it to apply to all table data or cells.The styling side of the page is called CSS and like HTML it is fussy and likes things opened and closed thus the { and the other one } at the end of the styling related to each section. Don't forget them, it is a computer program and as such will only do what you have instructed it to do. From which the saying comes "I wish my computer would do what I want it to do, not what I told it to do." Ok I'm starting to rave 


padding:1em; Tells the CSS to give one em of padding to the cell, I wasn't real smart here I should not have used em it is a little hard to explain, so lets keep this simple and change it to 12px, not that an em is 12px, it is just easier for me to explain. 12px stands for 12 pixels. Therefore we could write padding:12px; and you will then find it easier to understand. If you want more or less padding just change the 12 to whatever you want.
font-size:12px; Basically gives the height of the letter's, this is becoming a bit easier eh! Feel free to change the 12 and see what happens.
text-align: centre;} Text alignment we have set to centre, you can use left and right also. and then the closing brace for that section } Once again he's lost the plot! Each thing you want to change needs to have a colon after it : what you want to change it to needs a semi-colon after it ; So far so good?


td p {width:100px;} Ok td is the same however now we are telling the CSS to do certain things to object within the td in this case the paragraph or the text within the <p> and </p>. Therefore in this example I have told the text within the cell to only fit inside a box 100 pixel's wide. Once again feel free to experiment with the 100. Now time to go off on a little rave session, remember the columns in this example are actual cells because we only used one row. So all text within them will be 100px wide, but what if I don't want them all the same? Tuff Luck! No sorry to achieve that say for only the first column, I would put that inside the first_columns { } braces. However would need a new instruction #first_column p{......


#first_column{color:white;
background-color:black;} These are the first columns instructions, where we have just the word color it refers to the text's colour. And a great big apology to my Australian friends here it has to be spelt color not colour! As you can see I have asked it to be white. Following on from that not needing much explanation is background-color and I have asked it to be black.

#second_column{
background-color:#CDC0B0;}
#third_column{
background-color:#8B7D6B;} These sections should be self explanatory now except for the numbers with a hash sign, they are hexadecimal numbers used for colours because some of us are not happy with say black we want to be a little bit more specific. Which Black?
I will not give the colours and codes here however this is a link to them http://www.w3schools.com/cssref/css_colors.asp

</style> Now we are finished with our styling so we close it.
I truly hope you have found this explanation useful, please leave a comment if you have or would like to see others like it.