Skip to content
Related Articles

Related Articles

Improve Article

CSS | Units

  • Difficulty Level : Medium
  • Last Updated : 03 Jul, 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. 
Absolute Length Units:  

  • cm: centimeter 
    Syntax:
   font-size: 0.5cm;
   line-height: 0.1cm;
  • Example:

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</gfg>
        <div class = "geeks">A computer science portal for geeks</div>
    </body>
</html>                   
  • Output:

css units

  • mm: milimeter 
    Syntax:
   font-size: 5mm;
   line-height: 1mm;
  • Example:

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</gfg>
        <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:

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</gfg>
        <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:

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</gfg>
        <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:

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</gfg>
        <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:

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</gfg>
        <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 meaning 2times the size of current font. 
    Syntax:
    font-size: 10px;
    line-height: 2em;
  • Example:

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:

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 width of the 0
    Syntax:
font-size: 2ch;
  • Example:

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:

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:

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:

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:

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:

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:

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
  • Firefox
  • Opera
  • Safari

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :