11
Sep

CSS Basics – The Box Model

Written by Simon Ward. Posted in Web Design

CSS Box Model

Learning how to design using Cascading Style Sheets (CSS) can be a little tricky for the beginner if you don’t figure out a few of the basics. One of the basic concepts in CSS is the box model.

CSS is the code that is used to define design in most modern web pages. WordPress Blogs and Myspace layouts both require CSS.

The above diagram explains how The Box Model works. The entire diagram represents a single Div element in CSS. So if the div was the main text of a page, the width and height would define the area which text will fill. The padding would define the area between the text and the border. And the margin would define the area between the border and the next div element on the page. I hope this basic tutorial helps.

www.pingable.org

Tags: , , ,

Trackback from your site.





Simon Ward

I created pingable back in 2007. Still loving blogging about Wordpress. Read more Connect with me via my Google Plus.

Comments (5)

  • Jack from Lionel Trains
    May 13, 2010 at 4:37 am |

    Thanks for your breakdown of css styles. Your diagram of the box model is gonna save me a bunch of headaches when I try and edit the code on wordpress stylesheets lol. I’ve already encountered the white screen of death screwing around…

  • Bob Jenson from Web Design New Zealand
    June 4, 2010 at 3:24 am |

    Thanks for this, I’m always having a nightmare with CSS. At least I’m finally not giving up and using tables instead.

    One of the hardest things I had to work out was a div with a background that automatically expanded with the content (so you have a top left, top right corners etc).

  • Eden from Design Lover
    November 24, 2010 at 12:58 pm |

    Thanks for this post. Helps me out with some problems i’ve been trying to solve for some time now. Keep u the good work!

    Cheers

    Johan from Holland

  • September 17, 2011 at 9:16 pm |

    CSS is very easy to learn if you already have some coding experience

  • September 25, 2011 at 8:38 am |

    using visualization methods such as the pictures above can help with CSS coding a lot.

Leave a comment

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

Win an Elegant Themes membership

Pingable Facebook

Pingable Archive