CSS UOM

CSS: Learn How to Specify Units of Measure (px, pt, em, %)

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 3 mins read

The units of measure in CSS are pixels (px), points (pt), ems (em), and percent (%). In this tutorial, you will learn how to specify the units of measure in CSS.

Common CSS Units of Measure

SymbolNameTypeDescription
pxPixelsAbsoluteA pixel represents a single dot on a monitor. The number of dots per inch depends on the resolution of the monitor.
ptPointsAbsoluteA point is 1/72 of an inch.
emEmsRelativeOne em is equal to the font size for the current font.
%PercentRelativeA percent specifies a value relative to the current value.

Notes on CSS Units of Measure

  • When you use an absolute unit of measures like pixels or points, the measurement won't change even if the user changes the font size in the browser. Though, the size will change if the screen resolution changes.
  • When you use relative units of measure like ems or a percent, the measurement will change if the user changes the browser's font size.
  • User the units of measure to specify a variety of CSS properties, including font-size, line-height, width, height, margin, and padding.

Examples

.wrap1 {
	    width: 400px;
	    color: blue;
	}

This is a sample paragraph text to demonstrate the effect of units of measurement in CSS.

.wrap2 {
	    width: 40em;
	    color: green;
	}

This is a sample paragraph text to demonstrate the effect of units of measurement in CSS.

.wrap3 {
	    width: 120pt;
	    color: orange;
	}

This is a sample paragraph text to demonstrate the effect of units of measurement in CSS.

Complete HTML Example

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        body {
            font-size: 90%;
            margin-left: 2em;
        }
        
        header {
            padding-bottom: .75em;
            border-bottom: 3px solid blue;
            margin-bottom: 0;
        }
        
        h1 {
            font-size: 300%;
            margin-bottom: 0;
            color: blue;
        }
        
        h2 {
            font-size: 200%;
            margin-bottom: 0;
        }
    </style>
</head>

<body>
    <h1>CSS Tutorial - Units of Measure</h1>
    <br>
    <br>
    <br>
    <br>
    <header>
        <h2>Saint John Valley Town Hall</h1>
    </header>
    <section>
        <p>Welcome to Saint John Valley Town Hall. We have some fascinating offers for you.</p>
    </section>
</body>

</html>

Output

The output would be as shown in the featured image of this article.

See also: