CSS Units

CSS Units measure the length, width, padding, margin, etc with the help of absolute or relative unit.An absolute unit is a fixed value such as pixel, point, inches, etc while as a relative unit such as %, em etch is relative to the parent element.

Please keep in mind that, CSS unit is applicable only for a non-zero value. Specify length with value including its unit otherwise, it would not be work. If the length value is zero(0) then, in this case, you can remove the CSS unit.

CSS Absolute Unit

The absolute length units are fixed and measured by these units such ascm, mm, in, px, pt,pc.

Unit	Description
cm	centimeters
px *	pixels (1px = 1/96th of 1in)
in	inches (1in = 96px = 2.54cm)
mm	millimeters
pc	picas (1pc = 12 pt)
pt	points (1pt = 1/72 of 1in)

In this section, all the CSS measurement unit is described. This unit is categorized into two parts namely absolute and relative units.

Lets us understand the CSS units concept in depth.

General Syntax

     h1 {
 margin: 0.2in;
} /* inches  */

h2 {
 line-height: 3cm;
} /* centimeters */

h3 {
 word-spacing: 4mm;
} /* millimeters */

h4 {
 font-size: 12pt;
} /* points */

h5 {
 font-size: 1pc;
} /* picas */

h6 {
 font-size: 12px;
} /* picas */

Source Code

      
         h1 {
 margin: 0.2in;
} /* inches  */
h2 {
 line-height: 3cm;
} /* centimeters */
h3 {
 word-spacing: 4mm;
} /* millimeters */
h4 {
 font-size: 12pt;
} /* points */
h5 {
 font-size: 1pc;
} /* picas */

h6 {
 font-size: 12px;
} /* picas */

Code Explanation

Note: In this example,different CSS measurement unit is used to provide different property value like width,height,margin,padding ,etc.

Relative Units

Relative length units specify length value with respect to other length properties. These units are em, ex, etc.

Measuring With Relative Unit Em

Default font size is 16px hence 1em is equal to 16px;

General Syntax

     #topParaContent {
 font-size: 2.5em; /* 40px/16=2.5em */
}

Source Code

      
         #topParaContent {
 font-size: 2.5em; /* 40px/16=2.5em */
}
#secondParaContent {
 font-size: 1.875em; /* 30px/16=1.875em */
}
#thirdParaContent {
 font-size: 0.875em; /* 14px/16=0.875em */
}

Code Explanation

Note: In this example, font size is measured using the em unit.It is a ratio of available font size and browser default font size i.e (em = available font size / browser default font size).

Responsive Font Size

Responsive font size works on the basis of the viewport width and viewport height. The viewport is the size of the browser window.

1vw = 1% of viewport width(Browser width).

If the width of the viewport(browser window) is 100px then the 1vw is equal to 1px.

General Syntax

     .firstParaContent {
 font-size: 5vw;
}

Source Code

      
         .firstParaContent {
 font-size: 5vw;
}
.secondParaContent {
 font-size: 10vw;
}

Code Explanation

Note: In this example, font size is measured with the help of responsive font size. This is based on the concept of viewport width and height. Basically, Viewport is the size of the browser window.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS