CSS - Measurement Units

  • CSS - Measurement Units

    • CSS - Measurement Units Lesson

      For applying various styles and giving values into the property, measurement units play a vital role in CSS. Various measurement units supported by CSS are as follows,

      • Percentage (%)- measures as a % relative to another value like p {font-size: 12 pt; line-weight: 125%;}


      • Centimeter (cm): div {margin-bottom: 12 cm ;}


      • em: It is the relative measurement for font-height as em spaces where 2 em=24 pt (when assigning a font of 12pt).   p {letter-spacing: 5 em;}


      • inches (in): p {word-spacing: 20 inch;}


      • millimeter (mm): p {word-spacing: 20 mm;}


      • point (pt): 1 point=1/72nd inch like, body  {font-size: 20pt;}


      • pixel(px): It mainly denotes screen pixels like p{padding: 20 px;}


      • ex: It is a relative measured in terms of font’s x-height in lowercase letter. E.g., p{font-weight: 20pt; line-height: 4 ex;}


      • picas (pc): 1 pc= 12 pt. For example, p { font-size: 12 pc;}



      Example:


      <!DOCTYPE html>

      <html>

         <head>

            <style type = "text/css">

               

      p {font-size:24pt; line-weight:25%;letter-spacing:1em;word-spacing:20mm;font-weight:20pt;line-height:4ex;}


               

               h1 {

                  font-size:12 pc;

                  margin-left: 40px;

                  margin-right: 12 cm;

               }

            </style>

         </head>   

         <body>

            <h1>This is a heading</h1>

            <p>Contents.</p>

         </body>

      </html>


      Output:


      Quiz :

      Quiz 1: What are the different types of measurement units used in CSS?

      Quiz 2: What are the relative measurements in CSS? Give examples.


CSS – Inclusion
CSS – Colors