CSS - Measurement Units
CSS - Measurement Units
For applying various styles and giving values into the property, measurement units play a vital role in CSS. Various measurement units supported by CSS are as follows,
Percentage (%)- measures as a % relative to another value like p {font-size: 12 pt; line-weight: 125%;}
Centimeter (cm): div {margin-bottom: 12 cm ;}
em: It is the relative measurement for font-height as em spaces where 2 em=24 pt (when assigning a font of 12pt). p {letter-spacing: 5 em;}
inches (in): p {word-spacing: 20 inch;}
millimeter (mm): p {word-spacing: 20 mm;}
point (pt): 1 point=1/72nd inch like, body {font-size: 20pt;}
pixel(px): It mainly denotes screen pixels like p{padding: 20 px;}
ex: It is a relative measured in terms of font’s x-height in lowercase letter. E.g., p{font-weight: 20pt; line-height: 4 ex;}
picas (pc): 1 pc= 12 pt. For example, p { font-size: 12 pc;}
Example:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
p {font-size:24pt; line-weight:25%;letter-spacing:1em;word-spacing:20mm;font-weight:20pt;line-height:4ex;}
h1 {
font-size:12 pc;
margin-left: 40px;
margin-right: 12 cm;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Contents.</p>
</body>
</html>
Output:
Quiz :
Quiz 1: What are the different types of measurement units used in CSS?
Quiz 2: What are the relative measurements in CSS? Give examples.