Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
CSS values may be expressed in a number of different units of measure. Some of these units of measure only apply to some types of values, but you need to know them all. The percent sign is for relative percentage, in this case the width of this element would be 100% of the width of its containing element. PT is for points. It's a typographic measurement. There are 72 points in an inch and 12 points is one pica, which is pc. An em is another typographic measurement.
It's equal to current font size. So if you've got a 12 point font, 1 em is 12 pts. If your font is set to 32 points than 1 em will be 32 points. Em originally meant the width of a lowercase letter m. Today it pretty much always means the size of font and in CSS it's defined to mean the size of a font. In CSS the size of an X is defined to be half the size of an em. In typography originally an X was the height of the lowercase letter x.
An inch is the imperial inch size and this tends to be a relative size. It has to do with the way that your graphics environment is set up. It's rarely exactly actually an inch, because computer monitors don't tend to be setup in any way that a computer could really know what an inch is going to be on that screen, especially when you're dealing with web pages and you have no idea what type of environment your web page is going to be displayed in. Likewise with centimeters and millimeters.
So cm is centimeter and mm is millimeter. This one px is pixels. So this particular width would be 600 pixels wide and pixels you can pretty much count on being one to one. 1 pixel is going to be 1 pixel. Unfortunately, this is becoming less true. At the time that this is being recorded Apple has just released their retina display MacBook Pro and on the when retina display MacBook Pro in its default configuration, 1 pixel is actually 2 pixels in dimension.
So 1 pixel is 2 pixels wide and 2 pixels high. So we're coming to a place where an even pixels is going to be a relative measurement rather than an absolute measurement. But this much is probably sure, and from where I sit I don't how all of this is going to unfold, but I think it makes sense that if you have an image on the screen that's 600 pixels wide and 600 pixels tall and you want to line it up with an element that your defining your CSS to be 600 pixels wide and 600 pixels tall, those two elements ought to be exactly the same size.
So pixels are good for making things that are a certain size to match other graphical elements that are a fixed size. So CSS uses a concise list of units to specify the sizes of objects on the screen. It's good to understand these units so that you can have consistent results with your CSS projects.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101447 Viewers
61 Video lessons · 88208 Viewers
71 Video lessons · 72089 Viewers
56 Video lessons · 103848 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.