Setting the Properties of a Container

>> Browse templatesMoney tips46 comments

Blogger Template Design: Tutorial 4

In this tutorial, you'll know the basics of what code sets the properties of a container. To make things simple, we'll look at 2 container blocks only - Main and Post. Once you know these, the basic ideas for all the other containers are pretty much the same.

Here is a sample code for the 2 containers:
#main {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
min-width: 400px;
max-width: 400px;
background: $mainbgColor;
color: #111111;
font: $textFont;
}

.post {
margin: 0px 20px 10px 0px;
padding: 10px 20px 10px 2px;
line-height: 1.5em;
text-align: left;
background: $postbgColor;
}

The #main and .post are the titles of each containers. Each container codes must be contained within {...}. For the explanation below, we'll focus on the codes inside the post block, especially for the explanation on the margin and padding (the codes colored in red).
  • Margin - sets the distance between the border of the container to the border of a parent (larger) container outside it. There are 4 numbers defining the Margin property. The 1st number sets the top margin, the 2nd sets the right margin, the 3rd number sets the bottom margin, and the 4th number sets the left margin. It basically sets the whole margin in a clock-wise fashion starting from the top. In the case above, the parent container for the post container is the main container. See how the dashed border for the blue (post) container is placed inside the green (main) container following the post block's margin command (the codes in red). If the post's margins are all set to zero, then the post container would be exactly the same size as the main container. Think of the Margin as a command that moves its border away from a parent border. Another thing, Margin can have a negative value, which means that it moves toward the parent border and may overlap it (not away from it).
  • Padding - sets the distance between the border of the container to the border of a child (smaller) container inside it. In the case of the post container, the child container is the post-body. The 4 numbers defining the padding sets the padding in a clock-wise fashion also, just like the Margin property. See how the post's padding puts the post-body inside the post container, away from the dashed border. Unlike the Margin, think of the Padding as a command that moves a child border away from its border. Padding values cannot be negative.
  • Min-width and Max-width - sets the width of the container. Usually, it's enough to write it as width = 400px (for example), but it's becoming more of my habit to set the width as strict as possible, because I sometimes saw that if it's not written strictly, the container width might shrink and expand freely on some situations and in some different browsers. So by setting the width strictly, I made sure that it looks exactly like I want at all times in all browsers (basically getting rid of alignment bugs). If you look at my newer templates, I even set the width redundantly, say in Main-wrapper and then in Main containers eventhough they are pretty much the same. Doing it this way solves some alignment bugs that I saw (eventhough I don't really understand why it solves it by writing it redundantly).
  • Background - sets the background color of the container. It uses the hexadecimal code for colors. See here for all the color values. You can also set a background image that repeats itself to cover the whole container block. The way to do this is by pointing to the URL of an image. For details on how to do this, see W3Schools tutorials. You can also set the value to be $samplevariable, where the variable is the one that you define in Subsection 1 in CSS Styling Structure.
  • Color - sets the color of your text using the hexadecimal color code, or the variable defined earlier in Subsection 1.
  • Font - sets the font of your text. You can use the variables set in Subsection 1 also. See W3Schools tutorials for more details on setting the font properties.
  • Text-align - sets the alignment of your text. The 3 options are either left, center, or right.
  • Line-height - sets the distance, or height, between two text lines.
My tutorial just gives the basic idea on some of the codes in the Blogger templates. I'd say the most important ones for a basic understanding are the margin and padding commands. If you want a more detailed explanation on CSS styling language, I recommend w3Schools CSS Tutorial as a quick and easy resource center.

***************************************
Next Tutorial:
The next tutorial is on the quick overview of all the common containers and elements in a Blogger template.

46 comments:

Daniel Cruz January 22, 2008 8:44 pm  

I like this blog is fantastic, is really good written. Congratulation. Do you want to see something more? Read it...:Great investment opportunity in Costa Rica: beach real estate, condo, condos for sale. Visit us for more info at: http://www.jaco-bay.com

SostyPasha February 01, 2009 2:33 am  

Thanx so much :)
may God bless you mate

jaffa April 20, 2012 12:06 am  

In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non visual styles such as the speed and emphasis with which text is read out by aural text readers. Thanks.
Regards,
mississauga real estate agent

santa May 08, 2012 2:42 am  

Designing often necessitates considering the aesthetic, functional, economic and sociopolitical dimensions of both the design object and design process. Thanks.
Regards,
health insurance quotes california

steve7876 August 10, 2015 8:24 am  

The learning lab is providing the best Maths and English tutor in Sydney and if you are looking for maths tutor for your child contact us now!

shahbaz July 23, 2016 5:11 am  

Deem as magnanimous beside difference in fiat to blunder for this saintly sale inventory group unusual piddling encompass introduce.honeymoon packages in Brazil

shahbaz July 25, 2016 6:43 am  

Pepperfry coupon codes are retailed on Couponmama- a competent dealer of coupon codes and discount coupons. If we talk about tables then, variety of tables are ready to serve you.bestvitaminsforall.com

shahbaz September 03, 2016 4:06 am  

Thanks a ton for sharing your knowledge! It is great to see that some people still put in an effort into managing their websites. I’ll be sure to check back again real soon.flat icon

shahbaz September 21, 2016 12:36 am  

You may contact my previous clients who will tell you about work quality and make you choose my services wholesalebodyoils

shahbaz October 29, 2016 1:11 am  

It is imperative that they read weblog post carefully,I would like to thank you for this excellent information!banking exchange rates currency

Legal Herbal Online December 21, 2016 6:45 am  

Nice to be visiting your blog again, it has been months for me. Well this article that i've been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share recuperar dados

shahbaz December 28, 2016 10:01 pm  

Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking.money transfer rates

bettycyoung January 18, 2017 11:38 pm  

Great antimicrobial to allergens, mold, germs, Best Crib Mattress under $100. It uses an extraordinary blend Fine.

virginiaddavis February 22, 2017 10:38 pm  

good Showbox is an application that aids you in Watch Showbox APK with this Showbox Application. So, there is constantly nice.

John Rowland March 29, 2017 10:03 am  

This is my first time i visit here. I found so many entertaining stuff in your blog, especially its discussion. From the tons of comments on your articles, I guess I am not the only one having all the leisure here! Keep up the excellent work.
magnaflowexhaustshop.com

triciagonzalez April 25, 2017 11:12 pm  

To gain access to all media content over the world Kodi for iPhone, iPad, iOS Download (with & without Jailbreak) is an all-rounder app when it comes to handling media.

Lukas Wessels May 30, 2017 10:59 pm  

i am glad approximately those forms of blogs and posts and also maintain up them. In that form of blogs and development substitution is receiving better up too much. thanks for sharing us one of these discovered element. Galaxy Jacket for Women

samish leather June 14, 2017 9:53 pm  

Interesting article! Thank you for sharing them! I hope you will continue to have similar posts to share with everyone. Star Trek Costumes

Unknown June 15, 2017 11:46 pm  

Your selection of topic is very good and also well written. Thanks for sharing with us most effective information.
Keep sharing more with us!
Very amazing article!! I have enjoyed reading. Nice blog. I will keep visiting this blog very often
Keep sharing more with us!!
Spiderman 2 Tobey Maguire jacket

R3K Groups July 31, 2017 10:43 pm  

buy tumblr followers
https://www.youtube.com/watch?v=OsodbtYnlyY

R3K Groups July 31, 2017 10:44 pm  

buy tumblr followers
https://www.youtube.com/watch?v=OsodbtYnlyY

buy tumblr followers

pixie cerny August 03, 2017 11:11 pm  
This comment has been removed by the author.
Elizabeth Denny September 08, 2017 5:05 am  

Your substance is out and out splendid from multiple points of view. I think this is drawing in and educational material. Much obliged to you such a great amount for thinking about your substance and your perusers.
Agent Of SHEILD S2 Nick Blood Biker Jacket

Eunus Khan September 10, 2017 10:09 am  

I personally like your post; you have shared good insights and experiences. Please keep it up. Hampton bay ceiling fans

Mohammad Eunus Khan September 13, 2017 4:13 am  

You have done a great job. I will definitely dig it and personally recommend to my friends. I am confident they will be benefited from this site. house for sale in Chandigarh sector 35

Unknown September 23, 2017 3:40 am  

I have read your article, it is very informative and helpful for me.I admire the valuable information you offer in your articles. Thanks for posting it. Write my Essay for me

susanbowling September 25, 2017 4:43 am  

Could untag themselves if they desire. Search Instagram Download and more. Instagram For PC is extremely focusing.

Unknown September 26, 2017 10:49 am  

I think this is a really good article. You make this information interesting and engaging. You give readers a lot to think about and I appreciate that kind of writing. Xiaomi mi 5X

Unknown September 27, 2017 3:50 am  

I regularly visit this site to check out the events and functions and sometimes for resources. However, it has been a while that you have shared some news about latest or upcoming events. Android game Hacker Apk

govind Sen September 27, 2017 10:43 pm  

I am a regular visitor to your website and have always liked the kind of work that you do. I genuinely get new ideas and thoughts that help me a lot in my personal work as well.best air conditioner

Unknown October 02, 2017 9:59 am  

This was nice and impressive post i read it and it was incredible thank you so much for sharing this kind of info with us you are so good and amazing with your work. I appreciate that thank you. Gulet Charter Croatia

Mohammad Eunus Khan October 04, 2017 9:53 am  

Very informative and understandable. I think this is an informative post and it is very useful and knowledgeable. I hope you will continue posting new article! Download Kingoroot Apk

John Michael October 04, 2017 11:47 pm  

Intriguing article! Much obliged to you for sharing them! I trust you will keep on having comparable presents on share with everybody.
Wishes For Fathers

Unknown October 05, 2017 7:17 am  

This was nice and impressive post I read it and it was incredible thank you so much for sharing this kind of info with us you are so good and amazing with your work. I appreciate that thank you. Judi Poker

Unknown October 06, 2017 11:42 pm  

Thanks for taking the time to discuss that, I feel strongly about this and so really like getting to know more on this kind of field. It should be really useful for all of us. KHATRIMAZA DOWNLOAD FULL MOVIES IN HINDI 480P 720P 1080P

Unknown October 07, 2017 7:14 am  

Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made for writing this awesome article. seo

Unknown October 08, 2017 10:59 pm  

I am happy to find this post Very useful for me, as it contains lot of information. I Always prefer to read The Quality and glad I found this thing in you post. activeweb business directory

Unknown October 10, 2017 10:05 pm  
This comment has been removed by the author.
Unknown October 10, 2017 10:08 pm  

This article is such a pleasant and intriguing one, I'm exceptionally happy with the given substance. I trust more fantastic articles would be posted in your site. Much thanks to you such a great amount for this and continue sharing. forex economic calendar

Unknown October 12, 2017 12:13 am  

I am also interested in this topic. I have spent a lot of time on searching this kind of topic. It is very informative. coe1.annauniv.edu latest updates

Mohammad Eunus Khan October 15, 2017 1:00 am  

Thank you very much for writing such an interesting article on this topic. This has really made me think and I hope to read more. علاج المخدرات

Unknown October 16, 2017 12:09 am  

Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made for writing this awesome article. webmusic.in

Unknown October 17, 2017 9:08 pm  

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article. hamptonbaycabinets.net

Unknown October 18, 2017 11:17 pm  

Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made for writing this awesome article. Amazon Echo Compatible Devices

Unknown October 19, 2017 11:29 pm  

I think this is an informative post and it is very useful and knowledgeable. therefore, I would like to thank you for the efforts you have made in writing this article.m2ufree

Mohammad Eunus Khan October 21, 2017 12:16 am  

You made such an interesting piece to read, giving every subject enlightenment for us to gain knowledge. Thanks for sharing the such information with us to read this. Contact FinTalk