CSS Units Of Length
Going The Distance - CSS Units Of Length
So you have started work on you CSS based design, but you see all these px em and even this wacky looking this like #fd9850. What do they mean, how do you use them? Well that is what were going to work out in this segment of the tutorial.
First lets look a units of distance. They are 9. %, in, cm, mm, em, ex, pt, pc, and px.
in, cm, mm, pt and pc are all based of inches or millimeter. You can use these, but it is not recommended. Simply because and inch on one computer does not equal and inch on another. This has to do how they are computed. For example using in (inch) on my computer is more like 1 1/4 inches and 1cm is more like 1.1cm. So don't use these.
So now were left with %, px, em and ex. And you should you these, and know when it is best to use them.
% is makes the element that percentage of the elements with. So for example, if I have a div that is 100px wide, and I set another div that is in it to a width of 60% it will be 60px wide. This is best used to make flexible layouts. Such as setting you menu to a with of 20% and you content to a with of 80%.
px is equal to one dot on your screen. This one most likely, the measurement you will use the most. To set borders widths, heights, padding, margin etc. This is so because you know that the with will be followed rigidly on every computer. But remember not everyone has a 1280 x 1024 screen. You can't make your site fixed at a too wide a width.
em is an extremely useful measurement. It is equal to the height of the font the user is using. This is normally about 16px. Some times the person viewing your site will make the font larger. I spend a lot of time reading web pages, and don't like squinting at small text. So you can make everything size up when I change the size of the font by using ems. It is a good idea to use this as much as you can. Unfortunately it is not quite as straightforward as using px so I not used as much as it should be.
ex is a unit that is very rarely used. You could spend a year leaning CSS and never know it existed. It is equal it about half an em. A more technical definition is it is equal to the height of characters like c and s as opposed to h or y.
