CSS Basics – The 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.
Tags: Basics, CSS, Design, Web Design
Trackback from your site.
Comments (5)
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…
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).
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
CSS is very easy to learn if you already have some coding experience
using visualization methods such as the pictures above can help with CSS coding a lot.