CSS Tutorial - CSS Lengths








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>

Click to view the demo

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

  • 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 IdentifierDescription
inInches
cmCentimeters
mmMillimeters
ptPoints (1 point is 1/72 of an inch)
pcPicas (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>

Click to view the demo





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 IdentifierDescription
emRelative to the font size of the element
exRelative to "x-height" of the element's font
remRelative to the font size of the root element
pxA 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>

Click to view the demo

Example

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'>&lt;-- 1 Inch --&gt;</div>
  <div id='pixels'>&lt;-- 96 Pixels --&gt;</div>
</body>
</html>

Click to view the demo

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.

<!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>

Click to view the demo

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 { <!--   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>

Click to view the demo

One good feature for percentage value is that the value is updating as you resize the browser window.

Relative to Font Size

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>

Click to view the demo

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.

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  {<!--   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>

Click to view the demo

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.

Pixels

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>

Click to view the demo

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.

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>

Click to view the demo