In this chapter, we will learn about CSS units, which are used to specify measurements in stylesheets. Understanding the different types of units and how to use them is essential for creating precise and flexible web designs. We will cover:
- Introduction to CSS Units
- Absolute Units
- Relative Units
- Examples of Using CSS Units
Introduction to CSS Units
CSS units are used to define the size, margin, padding, border, and other properties of HTML elements. Units can be broadly classified into two categories: absolute units and relative units.
Absolute Units
Absolute units are fixed units of measurement. They are not affected by other elements or the size of the viewport. Common absolute units include:
px: Pixelscm: Centimetersmm: Millimetersin: Inchespt: Pointspc: Picas
Pixels (px)
Pixels are the most commonly used absolute unit in web design. One pixel represents one dot on the screen.
Example
div {
width: 200px;
height: 100px;
border: 1px solid black;
}
HTML
<div>This div is 200 pixels wide and 100 pixels tall.</div>
Centimeters (cm)
Centimeters are a unit of measurement based on the metric system. One centimeter is equal to 10 millimeters.
Example
div {
width: 5cm;
height: 3cm;
border: 1px solid black;
}
HTML
<div>This div is 5 centimeters wide and 3 centimeters tall.</div>
Inches (in)
Inches are a unit of measurement commonly used in the United States. One inch is equal to 2.54 centimeters.
Example
div {
width: 2in;
height: 1in;
border: 1px solid black;
}
HTML
<div>This div is 2 inches wide and 1 inch tall.</div>
Points (pt)
Points are typically used in print media. One point is equal to 1/72 of an inch.
Example
div {
font-size: 12pt;
}
HTML
<div>This text has a font size of 12 points.</div>
Picas (pc)
Picas are another unit used in print media. One pica is equal to 12 points.
Example
div {
width: 3pc;
}
HTML
<div>This div is 3 picas wide.</div>
Relative Units
Relative units are based on the size of other elements or the viewport. They are more flexible and adaptable to different screen sizes. Common relative units include:
em: Relative to the font size of the elementrem: Relative to the font size of the root element%: Percentagevw: Viewport widthvh: Viewport height
em
The em unit is relative to the font size of the element. For example, 2em means twice the size of the current font size.
Example
div {
font-size: 16px;
}
span {
font-size: 1.5em;
}
HTML
<div>This is normal text. <span>This is 1.5 times larger.</span></div>
rem
The rem unit is relative to the font size of the root element (<html>). It is useful for maintaining consistent scaling across the entire document.
Example
html {
font-size: 16px;
}
div {
font-size: 1.5rem;
}
HTML
<div>This text is 1.5 times the root font size.</div>
Percentage (%)
The percentage unit is relative to the size of the parent element. It is commonly used for responsive designs.
Example
div {
width: 50%;
height: 50%;
border: 1px solid black;
}
HTML
<div style="width: 400px; height: 200px;">
<div>This div is 50% of the parent element's size.</div>
</div>
Viewport Width (vw)
The vw unit is relative to the viewport’s width. One vw is equal to 1% of the viewport’s width.
Example
div {
width: 50vw;
}
HTML
<div>This div is 50% of the viewport's width.</div>
Viewport Height (vh)
The vh unit is relative to the viewport’s height. One vh is equal to 1% of the viewport’s height.
Example
div {
height: 50vh;
}
HTML
<div>This div is 50% of the viewport's height.</div>
Examples of Using CSS Units
Example 1: Using Pixels and Percentages
.container {
width: 80%;
height: 200px;
border: 1px solid black;
}
.box {
width: 50%;
height: 50px;
background-color: lightblue;
}
HTML
<div class="container">
<div class="box">This box is 50% of the container's width.</div>
</div>
Example 2: Using em and rem
html {
font-size: 16px;
}
.container {
font-size: 1rem;
}
.box {
font-size: 1.5em;
}
HTML
<div class="container">
This text is 1rem.
<div class="box">This text is 1.5em relative to its parent.</div>
</div>
Example 3: Using Viewport Units
.header {
height: 10vh;
background-color: lightgray;
}
.main {
width: 80vw;
height: 80vh;
background-color: lightgreen;
}
HTML
<div class="header">Header</div>
<div class="main">Main Content Area</div>
Conclusion
In this chapter, you learned about CSS units, including absolute units like pixels, centimeters, inches, points, and picas, as well as relative units like em, rem, percentages, and viewport units. Understanding how to use these units effectively is essential for creating precise and flexible web designs.