Home / Articles / Programming languages / Markup languages / HTML & CSS / CSS: working with units

CSS: working with units

CSS: working with units
 
CSS: working with units
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


In CSS absolute and relative units are used to specify dimensions of various elements. Absolute units don’t depend on the output environment, and relative units denote dimensions relative to other elements.

Relative units

Relative units are typically used for text, or when you need to calculate the relative percentage of the elements. Table 1 contains a list of the main relative units.

Table 1. Relative units of measurement.

Unit

Description

em

Fort size of the current element

ex

x size (lowercase size or half size)

px

Pixels

%

Percent

The changing value depends on the font size of the current element (set via style attribute font-size). Each browser has a default text size used in case if the size is not specified. Initially 1em is the browser’s default size. Accordingly, if we set the size of the text for each page in em’s, we should work with this parameter. If em is used for a specific element, 1em is accepted as the parent font size.

The argument ex denotes the height of the symbol "x" in the lower case. Argument ex is subject to the same rules as em, that is, it relates to the browser default fort size or to the font size of the parent element.

A pixel is a basic point, displayed on monitors or similar devices, such as smartphones. Pixel size depends on the resolution of the device and its specifications.

Example 1 shows the use of these units.

Example 1. Using relative units.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style type="text/css">
      .em, .ex, .px, .percent { font-family: Verdana, Arial, sans-serif; }
      .em { font-size: 2em; }
      .ex { font-size: 2ex; }
      .px { font-size: 30px; }
      .percent { font-size: 200%;}
    </style>
  </head>
  <body>
    <span class="em">Size in em</span>
    <span class="ex">Size in ex</span>
    <span class="px">Size in pixels</span>
    <span class="percent">Size in percent</span>
  </body>
</html>

The result of the example is shown below.

Size in em
Size in ex
Size in pixels
Size in percent

Absolute unit

Absolute units are used less frequently than relative, and in most cases when working with text. Table 2 lists some of these units.

Table 2. Absolute units.

Unit

Description

in

Inch (1 inch equals 2,54 cm)

cm

Centimeter

mm

Millimeter

pt

Point (1 point equals 1/72 inch)

pc

Pica (1 pica equals 12 points)

Probably, the most commonly used unit to denote font size is a point. Many people are used to specify font size in word processors with, for example, 12. But what the number means, they don’t know. That’s what they are, points. A point is, perhaps, the only measuring unit used in both metric and in non-metric system countries. And all thanks to word processing programs and publishers. Example 2 shows the use of points and other units.

Example 2. Using absolute units.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style>
      .in, .mm, .pt { font-family: Verdana, Arial, sans-serif; }
      .in { font-size: 0.5in; }
      .mm { font-size: 8mm; }
      .pt { font-size: 24pt; }
    </style>
  </head>
  <body>
    <span class="in">Size in inches</span>
    <span class="mm">Size in millimeters</span>
    <span class="pt">Size in points</span>
  </body>
</html>

The result of using absolute units is shown below.

Size in inches
Size in millimeters
Size in points

 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation