1. CSS-UNIT
  2. CSS UNIT
Learn CSS Units:px to rem,rem to px,px to vw

CSS Units

In CSS, length is measured by either an absolute value or relative value.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

Download 
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

Download 
#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

Download 
.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
Tutorials HTML CSS BOOTSTRAP 5 BOOTSTRAP 4
Performance Evalution HTML Quiz/Test CSS Quiz/Test Bootstrap 4 Quiz/Test Bootstrap 5 Quiz/Test
CSS Frameworks Materialize CSS Pure CSS UiKit CSS Bulma CSS
2021-22 © shapeyourpath.com