font-size with various measurements

  
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
p {
  font-family: arial;
  font-size: 12pt;
}

p.px {
  font-size: 12px;
}

p.pt {
  font-size: 12pt;
}

p.pc {
  font-size: 2pc;
}

p.in {
  font-size: 0.5in;
}

p.cm {
  font-size: 1cm;
}

p.mm {
  font-size: 12mm;
}

p.em {
  font-size: 1.5em;
}

p.ex {
  font-size: 1.5ex;
}
</style>
</head>

<body>
<h1>Lengths</h1>
<p class="px">The length used here is 12 px</p>
<p class="pt">The length used here is 12 pt</p>
<p class="pc">The length used here is 2 pc</p>
<p class="in">The length used here is 0.5in</p>
<p class="cm">The length used here is 1cm</p>
<p class="mm">The length used here is 12mm</p>
<p class="em">The length used here is 1.5em</p>
<p class="ex">The length used here is 1.5ex</p>
</body>
</html>

Related examples in the same category

1.	Absolute Units
2.	Relative Units
3.	Testing 96 DPI Equals an Inch
4.	This paragraph has a 200 pixel width and 10 pixels of padding
5.	Relative units giving rise to unequal side margins
6.	Different measures
7.	em is relative to the font size
8.	Relative size font-size: .75em
9.	width: size an element by assigning pixels, ems, a percentage, or another fixed measurement to width.
10.	Percentages are more flexible because they can scale to the viewport.
11.	width:100% stretches an element to the width of its parent.
12.	Units of Length and Percentage
13.	Absolute vs. Relative Measurements
14.	one inch tall
15.	inch measurement
16.	This font is 24 pixels tall and this div is 3 ems tall
17.	The body's border is 1em thick
18.	font-size: 1in
19.	inch vs pixel
20.	percentage measurement width
21.	A negative margin
22.	This paragraph has a 1 pixel thick, solid black border around it.
23.	Comparing em to Pixels
24.	This font is 1.2 smaller than the default size, or pixels.
25.	em measurement
26.	ex measurement
27.	inch measurement 2
28.	inch vs pixels
29.	Em Measurement Comparison to Pixels
30.	percentage measurement
31.	12 pixel base

font-size with various measurements : measurement « Style Basics « HTML / CSS

Related examples in the same category