css length


Many CSS properties require you to specify a length, for examples the width property, the font-size property.


	      	<!DOCTYPE HTML>
			<html>
			<head>
			<style type="text/css">
			p  {
			    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.


CSS defines two kinds of length unit


  • absolute
  • relative

Absolute Lengths


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 { 
			            width: 5cm; 
			            font-size: 20pt; 
			        } 
			        </style> 
			    </head> 
			    <body> 
			        <p>I like <span>HTML</span> and CSS. </p> 
			    </body> 
			</html>
	      


Relative Lengths


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 { 
			            font-size: 15pt; 
			            height: 2em; 
			        } 
			        </style> 
			    </head> 
			    <body> 
			        <a href="http://studentsempire.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 {
			  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>
	      

Pixel values


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.


The pixel , referred to in code as px , is by far the most commonly used unit of length in CSS. A pixel is the smallest unit of resolution on a screen and if you look very closely at your screen you might just be able to see the square dots that are the pixels.


Most computer screens have a resolution of 72 dots per inch (dpi), but you will find that laser and bubble jet printers are usually set with a higher resolution — my current printer runs at 300 dpi. In contrast, mobile devices can have a lower resolution than computer screens or (in the case of some smart phones such as the iPhone) a higher resolution.


	      	<!DOCTYPE HTML> 
			<html> 
			    <head> 
			        <style type="text/css"> 
			        p {
			            background: grey; 
			            color:white; 
			            font-size: 20px; 
			            width: 200px; 
			        } 
			        </style> 
			    </head> 
			    <body> 
			        <a href="http://studentsempire.com">Visit the website</a> 
			        <p>I like <span>HTML</span> and CSS.</p> 
			    </body> 
			</html>
	      


Percentage values


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 { 
			            background: grey; 
			            color:white; 
			            font-size: 200%; 
			            width: 50%; 
			        } 
			        </style> 
			    </head> 
			    <body> 
			        <a href="http://studentsempire.com">Visit the website</a> 
			        <p>I like <span>HTML</span> and CSS.</p> 
			    </body> 
			</html>
	      

Relative to Font Size

	      	<!DOCTYPE HTML>
			<html>
			<head>
			<style type="text/css">
			p  {
			    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>
	      

Derived from Other Relative Values


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  {
			    font-size: 0.2in;
			}
			p  {
			    background: grey;
			    color:white;
			    font-size:  2rem;
			    height: 2em;
			}
			</style>
			</head>
			<body style="font-size:14pt">
			   <a href="http://studentsempire.com">website</a>
			   <p>This is a test.</p>
			   <a href="#">visit</a>
			</body>
			</html>
	      


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.


Pixels


The mainstream browsers treat 1 pixel to be 1/96th of an inch.


	      	<!DOCTYPE HTML>
			<html>
			<head>
			<style type="text/css">
			p  {
			    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.


Percentages


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 {
			    background: grey;
			    color:white;
			    font-size: 200%;
			    width: 50%;
			}
			</style>
			</head>
			<body>
			    <a href="http://studentsempire.com">website
			    <p>this is a test.

<a href="#">click </body> </html>