CSS Units are used to define the size and position of elements in a web page. There are different types of units available in CSS, each with its own purpose and usage. Understanding CSS units is essential for creating responsive and visually appealing web pages.
CSS Units can be broadly classified into two categories: Absolute Units and Relative Units.
Absolute Units are fixed units of measurement that do not change with the size of the viewport or the font size. The most commonly used absolute units are:
px
(pixels) - A pixel is a single dot on a screen. It is a fixed unit of measurement and does not change with the size of the viewport or the font size.pt
(points) - A point is a unit of measurement used in typography. It is equivalent to 1/72 of an inch and is a fixed unit of measurement.in
(inches) - An inch is a unit of measurement used in the imperial system. It is equivalent to 2.54 centimeters and is a fixed unit of measurement.cm
(centimeters) - A centimeter is a unit of measurement used in the metric system. It is equivalent to 0.3937 inches and is a fixed unit of measurement.mm
(millimeters) - A millimeter is a unit of measurement used in the metric system. It is equivalent to 0.03937 inches and is a fixed unit of measurement.Example:
<p style="font-size: 16px; margin-left: 20px;">This is a paragraph with a font size of 16 pixels and a left margin of 20 pixels.</p>
Relative Units are units of measurement that are relative to other elements in the web page. The most commonly used relative units are:
%
(percentage) - A percentage is a unit of measurement that is relative to the size of the parent element. For example, if the width of the parent element is 500 pixels and the width of the child element is set to 50%, the child element will be 250 pixels wide.em
- An em is a unit of measurement that is relative to the font size of the element. For example, if the font size of the parent element is 16 pixels and the font size of the child element is set to 1.5em, the font size of the child element will be 24 pixels (1.5 x 16).rem
- A rem is a unit of measurement that is relative to the font size of the root element. For example, if the font size of the root element is 16 pixels and the font size of the child element is set to 1.5rem, the font size of the child element will be 24 pixels (1.5 x 16).vw
(viewport width) - A vw is a unit of measurement that is relative to the width of the viewport. For example, if the width of the viewport is 1000 pixels and the width of the element is set to 50vw, the element will be 500 pixels wide.vh
(viewport height) - A vh is a unit of measurement that is relative to the height of the viewport. For example, if the height of the viewport is 800 pixels and the height of the element is set to 50vh, the element will be 400 pixels high.Example:
<div style="width: 50%; margin: 0 auto;">This is a div element that is 50% wide and centered horizontally.</div>
CSS Units are an essential part of web design and development. Understanding the different types of units and their usage is crucial for creating responsive and visually appealing web pages.