Lesson 10 – CSS3 Measurement Units

So far, we have only used percentages and pixels as a measurement unit in the course. However, there are many more measurement units. And, you should have a fair knowledge of all of them. CSS3 supports absolute units such as inches and points. Similarly, it also supports relative unites in the likes of ems and percentages.

Here is a complete list of measurement units in CSS3.

  • Percentage (%): It defines measurement relative to another value in percentage. Example (height: 50%)
  • Centimeter (cm): It specifies measurement in centimeters. Example (width: 200cm)
  • Inches (in): It specifies measurement in inches. Example (height: 1in)
  • Millimeter (mm): It specifies measurement in millimeters.  Example (width: 2000mm)
  • Picas (pc): It specifies measurement in picas where one pica is equal to 12 points. Therefore, an inch contains 6 picas. Example (font-size: 2pc)
  • Pixels (px): It specifies measurement in screen pixels. Pixel is the most commonly used measurement unit in CSS3. Example (padding-right: 50px)
  • Points (pt): It specifies measurements in points. One point is equal to 1/72nd of an inch. Example (font-size: 18pt)
  • Font’ X-Height (ex): This particular measurement unit is the most difficult to under. It is a measurement unit which specifies the measurement relative to the horizontal height or X-height of the font. The X-height is in turn equal to the letter x of the font written in lowercase. Example (line-height: 2ex)
  • em: it is the measurement in em spaces which are relative to the height of the font. In fact, an em space is exactly equal to the given font size. For example, each em space would be 20 pixels if the font size of your document is 20 pixels. Similarly, 2em will be 40 pixels and so on. Example (width: 2em)
  • Root em (rem): It specifies measurement or length as a fraction of font size of the root’s element. In real life, it is almost equal to the default font size of the HTML5 document. Example (height: 3rem)

With this lecture, we have come to the end of our course. It covers only the most basic concepts of CSS3. We highly recommend taking more advanced courses and getting your hands dirty with CSS3 to master this exciting and very important web development language.