CSS Length Measurement Units and Types of CSS Style Sheets

0 51

CSS Length Measurement Units Relative Absolute Style Sheets Types

in this tutorial, we will learn about CSS Length Measurement Units Relative Absolute Style Sheets Types 

What is CSS length measurement units?

In CSS various type Length Measurement Units are used to define the size of font’s height weight of margins. Two types of Length Measurement Units are used in CSS and they are namely relative and absolute.


The relative length specifies length of units related to other length property to the comparison of the current value that is calculated.

Relative Length Description
em em specify the font size (height) em unit is a relative of the Value of the font-size property.
ex ex specify x-height of a font.
px px will specify size of fonts in pixels.


When a web designer knows physical property of output device that time Absolute length are specified.

Absolute Length Description
in in will specify size in inches.
cm cm will specify size in centimeters.
mm mm will specify size in millimeters.
pt pt will specify size in points.
pc pc will specify size in picas.


Percentages define the length of content which is relative to another value.

Types of CSS Style Sheets

CSS Style Sheets

There are three types of CSS style sheets used in web page namely, there are inline, internal or embedded, and external style sheets. But the most common and recommended way is to keep CSS file separate and add that file link in the head element.

CSS inline Style

An inline style placed directly in HTML element by using style attribute, a web designer can’t reuse inline style at anywhere or any point of time in web page anywhere.

CSS internal or embedded

An internal or embedded styles are placed in the head element to define a common style for your HTML elements. CSS internal or embedded styles only can be re-used in the same Web page in which they are placed.

CSS external style sheet

External style sheet always defined in a separate file with the extension of .css. External style sheet provides the benefit of reusability of implementing common style rules for multiple HTML pages.
External style sheet widely used and recommended way also to reuse the CSS anywhere in your web page.



Leave A Reply

Your email address will not be published.