If you have ever taken a dive into the CSS code of a layout you liked - only to find something like this:

Then this tutorial is for you - because today I am going to explain the strange dimension system built into CSS! :)

Now first off, how many of you have ever be at a lost as to the direction you were going? Or have to think for a minute to figure out where West is from North? Even more to the point - how many of you have ever heard the old saying "Never Eat Soggy Waffles"? (No, quite that! - I didn't make it up!) Well, for all us humans without GPS systems - this saying stands for "North East South West" which is the clock-wise order of the directions.

Well, CSS also uses the clockwise order of directions. Take a look at the following code:

When you see something like:

If it were in English it would say:

So just remember that the first element is the top (North) dimension and the rest can be found be saying "Never Eat Soggy Waffles". Now, CSS also has built in pattern recognizers. For instance look at the following code that only seems to cover the padding for the top and right of ".object".

So what is the padding for the left and bottom of ".object"? Well, it is 10pixels on the bottom and 25pixels on the left. The computer automatically assumes that if you don't enter all the dimensions it should just keep repeating the pattern to fill in the remaining spaces. So to the computer, the above code would look like this:

Just like you can type the first three values of a HEX number "color: #fff;" (white) and the computer will recognize it as the full 6 digit HEX number "color: #ffffff;" (white) - you can also type "padding: 5px 10px;" and the computer will see it as "padding: 5px 10px 5px 10px;". The computer will even read just one value and fill all remaining values with that number!

So, hopefully you can use this tutorial to help you better follow the code of CSS champs. :)