Many CSS properties require you to specify a length, for examples the width property, the font-size property.
The following code sets Units of Measurement in Properties
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w . ja v a 2s. com-->
background: grey;
color:white;
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<p>this is a test.</p>
</body>
</html>To specify a length, you concatenate the number and the unit identifier together.
In the code above, width property is 5cm. The font size is 20pt.
CSS defines two kinds of length unit
The cm and pt units,
both of which are examples of absolute units.
These units are real-world measurements. CSS supports five types of absolute units.
| Unit Identifier | Description |
|---|---|
| in | Inches |
| cm | Centimeters |
| mm | Millimeters |
| pt | Points (1 point is 1/72 of an inch) |
| pc | Picas (1 pica is 12 points) |
You can mix and match units in a style and also mix absolute and relative units.
You can mix and match units.
<!DOCTYPE HTML>
<html>
<head>
<style>
p { <!-- w w w .j av a2s . co m-->
width: 5cm;
font-size: 20pt;
}
</style>
</head>
<body>
<p>I like <span>HTML</span> and CSS. java2s.com</p>
</body>
</html>A relative unit is measured in terms of some other unit.
CSS defines a wide range of relative measurements.
The following table shows the relative units that CSS defines and are supported on in mainstream browsers.
| Unit Identifier | Description |
|---|---|
| em | Relative to the font size of the element |
| ex | Relative to "x-height" of the element's font |
| rem | Relative to the font size of the root element |
| px | A number of CSS pixels (assumed to be on a 96dpi display) |
| % | A percentage of the value of another property |
In the following example, the value of the height
property is 2em.
2em means that the height of
p elements is twice the font size.
<!DOCTYPE HTML>
<html>
<head>
<style>
p { <!--from w w w. j av a 2s. c o m-->
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
<p style="font-size:12pt">Font size 12pt.</p>
</body>
</html>The following code shows how to compare height setting in inch and pixel.
<html>
<head>
<title>Pixels to Inches</title>
<style type='text/css'>
div {<!-- ww w .j a v a 2 s . co m-->
background: #000;
border: 1px solid rgb(128, 128, 128);
color: white;
font: 9px monospace;
margin: 15px;
text-align: center;
}
div#inches {
width: 1in;
height: 1in;
}
div#pixels {
width: 96px;
height: 96px;
}
</style>
</head>
<body>
<div id='inches'><-- 1 Inch --></div>
<div id='pixels'><-- 96 Pixels --></div>
</body>
</html>An easy to set the length is to use pixel value. 1 pixel is 1/96th of an inch. The following code set the font size and width in pixel value.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p { <!-- ww w . j a va 2 s. co m-->
background: grey;
color:white;
font-size: 20px;
width: 200px;
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
</body>
</html>You can express a unit of measurement as a percentage of another property value. You do this using the % (percent) unit.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p { <!-- w w w .java 2s. c o m-->
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a href="http://java2s.com">Visit the website</a>
<p>I like <span>HTML</span> and CSS.</p>
</body>
</html>One good feature for percentage value is that the value is updating as you resize the browser window.
The following code uses a Relative Unit.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w ww .j a va 2 s. c o m-->
background: grey;
color:white;
font-size: 15pt;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p style="font-size:12pt">This is another test.</p>
</body>
</html>
The code above sets the height property to 2em,
which means that the height of p elements is twice the font size.
A font-size is 15pt for the first p element.
The font-size is 12pt on the second p element.
You can use relative units to express a multiple of another relative measure.
The following example shows the height property is expressed in em units.
The em units are derived from the value of the font-size property,
which is expressed using rem units.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
html {<!-- www .j a v a 2s. co m-->
font-size: 0.2in;
}
p {
background: grey;
color:white;
font-size: 2rem;
height: 2em;
}
</style>
</head>
<body style="font-size:14pt">
<a href="http://java2s.com">website</a>
<p>This is a test.</p>
<a href="http://w3c.org">W3C</a>
</body>
</html>The above example assigns an absolute font size of 0.2 inches.
The rem unit is relative to the font size
of the html element,also known as the root element.
The font-size value 2rem
means that the font size will be twice the size of the root element font-0.4 inches.
The height property in the same style is specified as 2em,
which is twice as much again. This means the browser will display p
elements using a font that is 0.4 inches high and the overall element will be 0.8 inches high.
Another font-related relative unit is ex,
and 1ex is approximately 0.5em.
The mainstream browsers treat 1 pixel to be 1/96th of an inch.
The following code shows demonstrates specifying pixels in a CSS style.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w ww . jav a2 s.com-->
background: grey;
color:white;
font-size: 20px;
width: 200px;
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
em units are more flexible.
You only have to alter the size of the font and the rest of the style works seamlessly.
You can express a unit of measurement as a percentage of another property value.
You do this using the % (percent) unit.
The following code expresses units as a Percentage of Another Property Value.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w ww . java 2 s.c om-->
background: grey;
color:white;
font-size: 200%;
width: 50%;
}
</style>
</head>
<body>
<a href="http://java2s.com">website</a>
<p>this is a test.</p>
<a href="http://w3c.org">W3C</a>
</body>
</html>