What is the difference between px, em and ex?

What is the difference between px, em and ex? And when you define font-size in CSS, do you use px, pt or em?

>em : the font-size of the relevant font
>ex : the x-height of the relevant font
>px : pixels, relative to the viewing device

1. Pixels (px) are browser dependent. It is the absolute size that you would see on your screen.
2. Em are sort of like percentages. Ems is referring to the base text size. The value of 1 em means the same thing as a value of 100 percent. But you can also say it in the opposite way: A percentage value is just an em multiplied by 100.
3. Points(pt) are what you would want to use in print media.

CSS Length Units:

• Absolute: Inches(in), centimeter(cm), milimeter (mm), points (pt), picas (pc)

Points are standard typographical measurements that have been used by printers and typesetters for decades and by word-processing programs for many years. Traditionally, there are 72 points to an inch (points were defined before widespread use of the metric system). Therefore, the capital letters of text set to 12 points should be one-sixth of an inch tall. For example, p {font-size: 18pt;} is equivalent to p {font-size: 0.25in;}.

Picas are another typographical term. A pica is equivalent to 12 points, which means there are 6 picas to an inch. As just shown, the capital letters of text set to 1 pica should be one-sixth of an inch tall. For example, p {font-size: 1.5pc;} would set text to the same size as the example declarations found in the definition of points.

These units are really useful only if the browser knows all the details of the monitor on which your page is displayed, the printer you're using, or whatever other user agent might apply. On a web browser, display is affected by the size of the monitor and the resolution to which the monitor is setand there isn't much that you, as the author, can do about these factors. absolute units are much more useful in defining style sheets for printed documents, where measuring things in terms of inches, points, and picas is common. As you've seen, attempting to use absolute measurements in web design is perilous at best.

• Relative: em (em-height), ex (e-height), px. The first two stand for and "x-height," which are common typographical measurements; however, in CSS, they have meanings you might not expect if you are familiar with typography.

em: one "em" is defined to be the value of font-size for a given font. If the font-size of an element is 14 pixels, then for that element, 1em is equal to 14 pixels.

ex: refers to the height of a lowercase x in the font being used. Therefore, if you have two paragraphs in which the text is 24 points in size, but each paragraph uses a different font, then the value of ex could be different for each paragraph. This is because different fonts have different heights for x

px: tiny boxes of color in a monitor are pixels. In general, if you declare something like font-size: 18px, a web browser will almost certainly use actual pixels on your monitor after all, they're already there but with other display devices, like printers, the user agent will have to rescale pixel lengths to something more sensible. In other words, the printing code has to figure out how many dots there are in a pixel, and to do so, it may use the 96ppi reference pixel.

Conclution

Because of this potential for rescaling, pixels are defined as a relative unit of measurement, even though, in web design, they behave much like absolute units.

Rrefrence: css the definite guid by eric meyer

> what is the difference px,em and ex?

http://www.w3.org/TR/CSS21/syndata.html#length-units describes those and the other length units available in CSS

> And when you define font-size in css, do i use px,pt or em?

As a rule of thumb, use percentages on screen and pt for print.

em : The em is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt.

px : Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution).

pt : Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.