Web Designing: CSS Box Model approach and some examples

I have been doing my bit on Web Designing for Web 2.0 concept for quite some time now. Some related posts on the same :

• Web Designing: Opting for XHTML 1.0 and CSS 2.0
• Web Designing: Faster Websites means more Business


In this post I’ll be now covering a very basic Web Designing topic on CSS Box Model which will pave the way for you to think in the boxed approach and harness the power of CSS to get simpler designs while at the same time not losing the charm and looks of your design.


CSS Box Model





As you can make out, a Web-Page is composed (from CSS point-of-view) of several parts starting from outside. The idea for Web Designers and UI enthusiasts is to think in this approach while designing their layouts or writing a code snippet.

Some basic selectors of CSS like margin, outline, border and padding should be known to put things in place. A point to note, the above selectors are known as short-hand selectors and can help you save the effort by specifying the style, width and color in just one go. Check the following example:

• padding: 25px;          //All four paddings are 25px

• border:  5px solid red;     //Can mention the [width], [style] and [color] all together


Now trying some full-fledged examples to prove what I had mentioned previously - Using the CSS Box Model approach.


• Example 1: The basics

This example uses the CSS Box Model and the CSS attributes to style a DIV element. Check the CODE below. The CSS selector:property combination used:

• background-color: #F7F6F3;
• border: solid 4px White;
• outline: #E6E2D8 Solid 4px;
• padding: 20px;

CODE Snippet

• <div style="background-color:#F7F6F3; border:solid 4px transparent; outline:#E6E2D8 Solid 4px; padding:20px; margin:20px;">
•  
•         This example uses the CSS Box Model and the CSS attributes to style a DIV element. Check the CODE below.

•  
• </div>

• Example 2: The Gmail style

This is the perfect Gmail Login page style if you might have noticed.

CODE Snippet

• <div style="background-color:#E8EEFA; border:solid 4px transparent; outline:#C3D9FF Solid 1px; padding:20px;">
•  
•             This is the perfect <strong>GMail</strong> Login Page style which you might have noticed.
•  
• </div>

• Example 3: The W3Schools style

This is the perfect W3Schools style.

CODE Snippet

• <div style="outline:double 4px #98bf21; background-color:#E1EFBB; border:solid 4px transparent; padding:20px; margin:20px;">
•  
•             This is the perfect <strong>W3Schools</strong> style.
•  
• </div>

Post a Comment