Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

CSS Units

  • Difficulty Level : Medium
  • Last Updated : 05 Nov, 2021

CSS has several different units for expressing the length and measurement. CSS units are needed to specify the measurement in stylesheet like padding:”5px”. Mainly there are two types of units in CSS.  

  • Absolute Length
  • Relative Length

Absolute Length: It is not good for use on-screen, cause screen size varies so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known. 

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Absolute Length Units:

cm: centimeter



Syntax:

   font-size: 0.5cm;
   line-height: 0.1cm;

Example: This example illustrates the CSS units by specifying the length unit in cm.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 1.2cm;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 0.5cm;
        line-height: 0.1cm;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:

css units

mm: millimeter

Syntax:

   font-size: 5mm;
   line-height: 1mm;

Example: This example illustrates the CSS units by specifying the length unit in mm.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 12mm;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 5mm;
        line-height: 1mm;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:

css units

in: inches



Note: inches (1in = 96px = 2.54cm) 

Syntax:

    font-size: 0.2in;
    line-height: 0.1in;

Example: This example illustrates the CSS units by specifying the length unit in inches.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: .5in;
        font-weight: bold;
    }
     
    .geeks {
        font-size: .2in;
        line-height: .1in;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:

css units

px: pixels

Note: pixels (1px = 1/96th of 1in) 

Syntax:

   font-size: 20px;
   line-height: 10px;

Example: This example illustrates the CSS units by specifying the length unit in pixels.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 40px;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 17px;
        line-height: 5px;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:



css units

pt: points

Note: points (1pt = 1/72 of 1in) 

Syntax:

    font-size: 16pt;
    line-height: 8pt;

Example: This example illustrates the CSS units by specifying the length unit in points.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 35pt;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 15pt;
        line-height: 5pt;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:

css units

pc: picas

Note: picas (1pc = 12 pt) 

Syntax:



      font-size: 1pc;
      line-height: 0.5pc;

Example: This example illustrates the CSS units by specifying the length unit in pc.

HTML




<html>
 
<head>
    <title>CSS units</title>
    <style>
    .gfg {
        font-size: 3pc;
        font-weight: bold;
    }
     
    .geeks {
        font-size: 1.3pc;
        line-height: .2pc;
    }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">A computer science portal for geeks</div>
</body>
 
</html>

Output:

css units

Relative Length: It is good for use on-screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.

Relative Length Units:  

em: Relative to the font size of that element.

Note: Here 2em means 2 times the size of the current font. 

Syntax:

    font-size: 10px;
    line-height: 2em;

Example: This example illustrates the CSS units by specifying the length unit in em.

HTML




<html>
 
<head>
    <title>relative unit</title>
    <style>
    p {
        font-size: 15px;
        line-height: 2em;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
     
<p>GeeksforGeeks Line height: 2x10px = 20px</p>
 
</body>
 
</html>

Output:



em unit

ex: Relative to the X(axis)-height of the current font.

Syntax:

font-size: 1ex;

Example: This example illustrates the CSS units by specifying the length unit in ex.

HTML




<html>
 
<head>
    <title>relative unit</title>
    <style>
    p {
        font-size: 40px;
    }
     
    span {
        font-size: 1ex;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks:<span>A computer science
        portal for geeks</span></p>
 
</body>
 
</html>

Output:

ex unit image

ch: Relative to the width of the 0.

Syntax:

font-size: 2ch;

Example: This example illustrates the CSS units by specifying the length unit in ch.

HTML




<html>
 
<head>
    <title>ch unit in CSS</title>
    <style>
    body {
        font-size: 50px;
    }
     
    div {
        font-size: 1ch;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Output:



ch unit

rem: Relative to the browser base font-size.

Syntax:

font-size: 3rem;

Example: This example illustrates the CSS units by specifying the length unit in rem.

HTML




<html>
 
<head>
    <title>ch unit in CSS</title>
    <style>
    body {
        font-size: 4rem;
    }
     
    div {
        font-size: 1.6rem;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Output:

ch unit

vw: Relative to 1% of the width of the viewport.

Syntax:

font-size: 10vw;

Example: This example illustrates the CSS units by specifying the length unit in vw.

HTML




<html>
 
<head>
    <title>vw unit</title>
    <style>
    h1 {
        font-size: 4vw;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
 
</html>

Output:



unit image

vh: Relative to 1% of the height of the viewport.

Syntax:

font-size: 10vh;

Example: This example illustrates the CSS units by specifying the length unit in vh.

HTML




<html>
 
<head>
    <style>
    h1 {
        font-size: 6vh;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
</body>
 
</html>

Output:

unit image

vmin: Relative to 1% of the viewport’s smaller dimension.

Syntax:

font-size: 10vmin;

Example: This example illustrates the CSS units by specifying the length unit in vmin.

HTML




<html>
 
<head>
    <title>vmin unit</title>
    <style>
    h1 {
        font-size: 8vmin;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
     
<p>1vmin = 1vw or 1vh whichever is smaller.</p>
 
</body>
 
</html>

Output:



vmin unit

vmax: Relative to 1% of the viewport’s larger dimension.

Syntax:

font-size: 20vmax;

Example: This example illustrates the CSS units by specifying the length unit in vmax.

HTML




<html>
 
<head>
    <title>vmax unit</title>
    <style>
    h1 {
        font-size: 5vmax;
    }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
<p>A computer science portal for geeks</p>
 
     
<p>1vmax = 1vw or 1vh whichever larger.</p>
 
</body>
 
</html>

Output:

vmax

%: % unit sets the font-size relative to the current font-size.

Syntax:

font-size: 250%;

Example: This example illustrates the CSS units by specifying the length unit in percentage.

HTML




<html>
 
<head>
    <title>CSS unit</title>
    <style>
    body {
        font-size: 250%;
    }
     
    div {
        font-size: 17px;
    }
    </style>
</head>
 
<body>
     
<p>GeeksforGeeks</p>
 
    <div>A computer science portal for geeks</div>
</body>
 
</html>

Output:

percentage unit

Supported Browser:

  • Google Chrome
  • Internet Explorer
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!