When the CSS standard defines a property type as length, size, width, or height, it means a unit of measurement. CSS Provides you with, normally, six units with which to define the size of properties (I'll use 'size' to a general definition of measurement, although you might see a property define a value type as width, height, length, etc.). You'll usually encounter one of four types: Pixels(px), Points(pt), Percentages(%), and Ems(em). Additionally, there are the less-used Picas(pc), and Exes(ex). Before going over the units one by one, please note that you can use each of these units to define the size of anything, even if the unit itself is derived from a font's size. You'll have to decide for yourself which elements should be sized using which units, but there is nothing preventing you from sizing elements using whatever you choose.
Pixels define an element's size using a specific humber of pixels. This is very convenient when designing for digital displays, since it gives you exact control over the size of the element, allowing you to make exact calculations of width and height for your design. However, there are several downsides to using pixels you should be aware of: First, setting a font's size using pixel units does not allow the user to resize that font using their browser settings. When you set a font's size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size in their browser to. This is an accessibility issue that, if you choose to use pixels to set your font sizes with, should be dealt with using other means (for example, allowing the user to choose from two or more different style sheets). Secondly, when it comes to print media, pixels have no real value. If you design a document for print, it's up to the device to guess what you meant in terms of physical size. Although you can usually preview a document and make changes before printing, if your document is primarily designed for print, then you may want to look at one of the other unit options.
Ems are a relative measurement unit. One 'Em'(
Here are some examples of Ems in action. First, look at the following code:
<style type="text/css">
<!--
.parent_elem
{
font-size: 28px;
font-family: "Times New Roman", Times, serif;
}
.parent_elem p
{
font-size: 0.7em;
line-height: 1.5em;
width: 12em;
background-color:#FFCC00;
}
-->
</style>
<div class="parent_elem">
The letter 'M'.
<p>Text within the P element.</p>
</div>
Now, here's the result in the browser:
The letter 'M'.
The
The letter 'M'.
As you can see, the entire
A note about Mozilla-based browsers: Browsers like FireFox allow you to increase/decrease the text size in a manner which will effect non-relative values. While this is arguably a convenient feature, it's actually not part of the standard, and should not be relied upon. Other browsers, including version 7 of Internet Explorer, will not change the size of absolute values when you change the text size within it.
Exes are similar to Ems, in that they are a relative unit of measurement that defines 1 unit to be equal to the size of the letter "x" in the default font size. Most other properties that apply to the Em unit of measurement apply to the Ex unit of measurement. However, most browsers do not support this unit of measurement properly, and it is not recommended for use in documents intended for browsers.
These units are print media units of measurments. A point (
When assigning percentage units (
Here's an example of Ems and Percentage values mixed within the same elements:
<style type="text/css">
<!--
.parent_elem
{
font-size: 18px;
font-family: "Times New Roman", Times, serif;
}
.parent_elem p
{
font-size: 120%;
line-height: 150%;
width: 80%;
background-color:#FFCC00;
}
.child_elem
{
font-size: 0.7em;
line-height: 1em;
}
-->
</style>
<div class="parent_elem">
The letter 'M'.<br />
<span class="child_elem">
Text within a SPAN set to the child_elem class.
</span>
<p>
Text within the P element.<br />
<span class="child_elem">
Text within the P element, within a SPAN set to the child_elem class.
</span>
</p>
</div>
Here's the result in the browser:
The letter 'M'.
Text within a SPAN set to the child_elem class.
Note how the percentage values have a different effect when assigned to the width property, and when assigned to the font-size and line-height properties. Also note how the child_elem class renders differently when it has different parent elements.
It will be up to you to decide which units to assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. As a general rule, if you don't assign relative-only values to all of your fonts, you should provide a means to change the style sheet for your pages, so that the font size may be changed by the user. Also remember that when designing a page that will fit the entire browser window, to mind each element's size in terms of whether it's relative or not, since stretchable designs can 'break' in certain resolutions if their elements weren't matched properly along the way.
REFERENCE
http://www.guistuff.com/css/css_units.html
Unit: Pixels
Pixels define an element's size using a specific humber of pixels. This is very convenient when designing for digital displays, since it gives you exact control over the size of the element, allowing you to make exact calculations of width and height for your design. However, there are several downsides to using pixels you should be aware of: First, setting a font's size using pixel units does not allow the user to resize that font using their browser settings. When you set a font's size to 12 pixels, it will always have a height of 12 pixels, regardless of what the user has set the default font size in their browser to. This is an accessibility issue that, if you choose to use pixels to set your font sizes with, should be dealt with using other means (for example, allowing the user to choose from two or more different style sheets). Secondly, when it comes to print media, pixels have no real value. If you design a document for print, it's up to the device to guess what you meant in terms of physical size. Although you can usually preview a document and make changes before printing, if your document is primarily designed for print, then you may want to look at one of the other unit options.
Unit: Ems
Ems are a relative measurement unit. One 'Em'(
1em) is equal to the height of the capital letter "M" in the default font size. When applied in CSS, the Em represents either the user's default font size, or the size of the parent element's font size, if one is available. When using Ems for sizing fonts, the fonts will resize according to the browser's default font size setting. That is, if the upper-most definition of the font size is defined by Ems (or any other relativee unit of measurement), and every successive unit set in every descendent element is also defined using a relative unit, then the text on the entire page will be user-resizeable. If the parent of the element using Ems to size its fonts defines its own font size using absolute units (such as Pixels or Points), then the font of that element will 'snap' to that parent's font's size, instead. This means that setting descending element font sizes to Ems does not mean they will be user-resizeable if their parent element's font isn't resizeable. Ems are set to decimal units, like 1em, 0.9em, and 1.1em. These units can be thought of as percentages of the parent element, where the top-most level is set to the browse default font size. For example, if the browser's font size is set to 'Normal', then setting the font-size of the BODY element to 1.1em will mean that the font size inside the BODY element will be 110% the size of the browser's 'Normal' font size. If the user then set their browser's font setting to 'Large', then the font size inside the BODY element will be 110% the size of the browser's 'Large' font size. Now suppose that the BODY element's font-size was set to 10px, and the P element's font-size was set to 0.9em. This means that any text within P elements will be 9px, regardless of what the user set their browser's font setting to.Here are some examples of Ems in action. First, look at the following code:
<style type="text/css">
<!--
.parent_elem
{
font-size: 28px;
font-family: "Times New Roman", Times, serif;
}
.parent_elem p
{
font-size: 0.7em;
line-height: 1.5em;
width: 12em;
background-color:#FFCC00;
}
-->
</style>
<div class="parent_elem">
The letter 'M'.
<p>Text within the P element.</p>
</div>
Now, here's the result in the browser:
The letter 'M'.
Text within the P element.
The
parent_elem class acts as a size dictating class. It sets the size of its own text in pixels, namely, 28px. The P element within it is selected and only given Em values. Note that not only the font-size and line-height values are Ems, but also the width of the P element is set to an Em value, in this case, 15em. Now, let's view the same HTML, only with the parent_elem's font-size value set to 20px:The letter 'M'.
Text within the P element.
As you can see, the entire
P element has been resized. It was scaled down to fit the newly assigned font-size value of 24px to the parent_elem class. By mixing Ems and Percentage values you can create a completely scaling design, that is either defined by you, or the user's browser settings. Remember though, that if you want the user to be able to scale the fonts themselves, you have to allow them to control the upper-most font value, which means that every font value on the page must be relative (either an Em value or a Percentage one).A note about Mozilla-based browsers: Browsers like FireFox allow you to increase/decrease the text size in a manner which will effect non-relative values. While this is arguably a convenient feature, it's actually not part of the standard, and should not be relied upon. Other browsers, including version 7 of Internet Explorer, will not change the size of absolute values when you change the text size within it.
Unit: Exes
Exes are similar to Ems, in that they are a relative unit of measurement that defines 1 unit to be equal to the size of the letter "x" in the default font size. Most other properties that apply to the Em unit of measurement apply to the Ex unit of measurement. However, most browsers do not support this unit of measurement properly, and it is not recommended for use in documents intended for browsers.
Units: Points and Picas
These units are print media units of measurments. A point (
1pt) equals 1/72 of an inch, while a pica (1pc) equals 1/6 of an inch. Documents intended for printed media will be able to tell the device exactly what the intended size is for these units. Digital displays, however, will have to guess, somewhat arbitrarily, how to convert these units into pixels, and there is no real uniform way of doing so. Since points were used since the early days of the web, most browsers have a set relation between pixels and points, but this is inherently wrong. Remember that small displays today can have high resolutions, so determining how large an 'inch on the display' would be is almost impossible across devices. Documents designed to be displayed primarily on the web should avoid using these units.Unit: Percentages
When assigning percentage units (
%) to a property that isn't font-size or line-height, that value always relates to the parent block of that element. When assigning percentage units to the font-size or line-height properties, they act like the Em unit, where 100% equals 1em. If you set the font-size property of an element to 100%, and that element's parent block is the BODY element, the result will be the same as setting the font-size to 1em -- namely, the size of the text will become the browser's default font size. It's important to remember that percentage values mean different actual absolute values when assigned to the font-size and line-height properties, and when assigned to everything else. Assigning 100% to the width property of an element is completely different than assigning 1em to it, for example.Here's an example of Ems and Percentage values mixed within the same elements:
<style type="text/css">
<!--
.parent_elem
{
font-size: 18px;
font-family: "Times New Roman", Times, serif;
}
.parent_elem p
{
font-size: 120%;
line-height: 150%;
width: 80%;
background-color:#FFCC00;
}
.child_elem
{
font-size: 0.7em;
line-height: 1em;
}
-->
</style>
<div class="parent_elem">
The letter 'M'.<br />
<span class="child_elem">
Text within a SPAN set to the child_elem class.
</span>
<p>
Text within the P element.<br />
<span class="child_elem">
Text within the P element, within a SPAN set to the child_elem class.
</span>
</p>
</div>
Here's the result in the browser:
The letter 'M'.
Text within a SPAN set to the child_elem class.
Text within the P element.
Text within the P element, within a SPAN set to the child_elem class.
Note how the percentage values have a different effect when assigned to the width property, and when assigned to the font-size and line-height properties. Also note how the child_elem class renders differently when it has different parent elements.
Decisions...
It will be up to you to decide which units to assign to which properties, and to take into consideration accessibility, media type, different display resolutions, and compatibility, among other things. As a general rule, if you don't assign relative-only values to all of your fonts, you should provide a means to change the style sheet for your pages, so that the font size may be changed by the user. Also remember that when designing a page that will fit the entire browser window, to mind each element's size in terms of whether it's relative or not, since stretchable designs can 'break' in certain resolutions if their elements weren't matched properly along the way.
REFERENCE
http://www.guistuff.com/css/css_units.html
