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.
Jack from Lionel Trains
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
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).