CSS Lengths - HTML CSS CSS

HTML CSS examples for CSS:Length

  1. HOME
  2. HTML CSS
  3. CSS
  4. Length

Introduction

The following code shows a style that uses length related properties.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            p {<!--from  www .  java  2s  .  c o  m-->
                background: grey;
                color:white;
                width: 5cm;
                font-size: 20pt;
            }
        </style>
    </head>
    <body>
        <a href="http://java2s.com">Website</a>
        <p>I like <span>CSS</span> and HTML.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

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, which are described in the following table.

CSS absolute units of measurement

Unit IdentifierDescription
in Inches
cm Centimeters
mmMillimeters
ptPoints (1 point is 1/72 of an inch)
pcPicas (1 pica is 12 points)

Relative Lengths

Relative lengths is measured in terms of some other unit.

The following table shows the relative units that CSS defines and that can be relied 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

Related Tutorials