Units Property in CSS

The CSS has several different units for expressing a length. This many CSS properties take "length" values, such as width, margin, padding, font-size, etc

value	used for
cm	The define the measurement in centimeters.
mm	the define the measurement in millimeters.
in	This used to define the measurement in inches.
px *	This define the measurement in points.
pt	This define the measurement in picas.
pc	This define the measurement in pixels.
em	The relative to the font-size of the element.
ex	The relative to the x-height of the current font (rarely used)
ch	This relative to the width of the "0" (zero)
rem	This relative to font-size of the root element
vw	This relative to 1% of the width of the viewport
vh	The relative to the width of the viewport
vmin	The relative to the smaller dimension of the viewport.
vmax	The relative to the larger dimension of the viewport.
%	This used to define the measurement as a percentage that is relative to another value

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* h2{
      color:red;
      font-size: 60px;
      background-color: black;
      height: 500px;
      width:600px;
    } */
/*
    .parent{
      width: 600px;
      height: 600px;
      background-color: blue;
    }
    .child{
      height: 50%;
      width: 50%;
      background-color: red;
    }*/
    /* html{
      font-size: 15px;
    }
    .parent{
        font-size: 5px;
    }
    .relative{
      font-size: 2rem;
    }
    .absolute{
      font-size: 32px;
    } */
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
.box{
  width:20vmin;
  height: 100vh;
  background:orangered;
  color:white;
}

  </style>
</head>
<body>
    

    <!-- <h2>Tutor Joes</h2> -->

    <!-- <div class="parent">
      <div class="child">

      </div>
    </div> -->

    <!-- <div class="parent">
      <h3 class="relative">
        Tutor Joes - R
      </h3>
    </div>

   
    <h3 class="absolute">
      Tutor Joes - A
    </h3> -->

    <div class="box">
      <h1>CSS Units</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium at adipisci officiis est culpa perspiciatis sint cum in, a vitae quaerat. Recusandae nihil doloribus expedita, corporis velit sit inventore fugit accusamus ab unde quia. Enim dolorum accusamus similique deserunt pariatur ullam neque minus, veritatis autem facilis dolores nesciunt ducimus cumque facere sapiente tempora natus quasi dicta quidem, officiis eveniet eos fuga? Id iste doloribus deserunt, molestias obcaecati repellendus at cum impedit optio ex, odio, reprehenderit soluta debitis exercitationem asperiores. Nam, nihil reprehenderit doloremque eius corrupti repellat ad natus, cumque amet distinctio ab tenetur perspiciatis consequuntur repellendus laboriosam dolore delectus ipsum error unde minus dignissimos! Tempora repellat quidem ipsum vero, nesciunt dicta error sit blanditiis. Maiores laudantium, consequatur, enim minima expedita, non impedit numquam voluptatem provident officia totam in maxime voluptatum. Hic consequuntur maxime aperiam animi tempora, ea debitis natus ducimus, voluptates facere consequatur ullam doloribus consectetur. Asperiores ex quaerat laborum.</p>
    </div>
</body>
</html>

<!--

  font-size
  height
  width

  px
  %
  em
  rem
  vw
  vh
  vmax
  vmin

  Absolute Units
    cm  Centimeters
    mm  Millimeters
    in  Inches
    px  pixels
    pt  Points
    pc  Picas

  Relative Units
    em
    rem  relative em
    ch
    ex
    vw   viewport width
    vh   viewport height
    vmax viewport maximum
    vmin viewport minimum
    %    percentage

em
  1em = 16px Browser Default size
  1em = base value 16px * 1 => 16px
  2em = base value 16px * 2 => 32px
  2em = base value 10px * 2 => 20px

-->

Output

Units Property in CSS

Source Code :

Output

CSS Tutorial

Properties Reference

Cascading Style Sheet

Flexbox Tutorial

CSS Grid Tutorial

Transitions Properties

CSS Properties with Examples

CSS Selectors

CSS Pseudo Elements

CSS Attribute Selectors

Input Pseudo Classes

CSS Examples

CSS Animation Projects