XQA
Back to Web Development
2026-01-305 min read

CSS Units (Web Development)

Learn CSS Units (Web Development) step by step with clear examples and exercises.

Title: CSS Units (Web Development)

Why This Matters

In web development, understanding CSS units is crucial for designing and styling websites effectively. CSS units help you control the size, position, and spacing of HTML elements on a webpage. They are essential when it comes to creating responsive designs that adapt to different screen sizes and devices. Knowing how to use CSS units can make your website look professional and user-friendly.

Prerequisites

Before diving into CSS units, you should have a basic understanding of:

  1. HTML (HyperText Markup Language) - the standard markup language for creating web pages
  2. CSS (Cascading Style Sheets) - the style sheet language used for describing the look and formatting of a document written in HTML
  3. Basic HTML elements such as `, , `, etc.
  4. Selectors, properties, and values in CSS

Core Concept

CSS units are used to specify measurements for various aspects of web design. There are several types of CSS units, each with its own purpose and range of applicability:

  1. Pixels (px): Pixels are the most common unit used in CSS and represent a fixed size measured in dots on the screen. They are useful when you need precise control over the positioning and sizing of elements.
  2. Percentages (%) : Percentages are relative to the parent element's width or height, making them ideal for creating responsive designs that adapt to different screen sizes.
  3. Em: Em is a relative unit based on the font size of the element it is applied to. It can help create scalable designs where text and layout adjust automatically when the user changes the font size.
  4. Rem: Rem is similar to em but based on the root font size (usually set in the HTML `` tag). This makes rem a more consistent unit for creating responsive designs across different web pages.
  5. Viewport units (vw, vh, vmin, vmax): Viewport units are relative to the viewport (the visible area of the web page on a device). They can be helpful when designing mobile-first or responsive layouts.

Worked Example

Let's create a simple HTML and CSS example to demonstrate the use of different CSS units:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Units Example</title>
<style>
body {
font-size: 16px; /* root font size */
}

.box {
width: 300px; /* fixed width using pixels */
height: 200px; /* fixed height using pixels */
border: 1px solid black;
}

.percentage-box {
width: 50%; /* relative width using percentages */
height: 300px; /* fixed height using pixels */
border: 1px solid red;
}

.em-box {
font-size: 2em; /* increasing the font size by 2 em units */
border: 1px solid blue;
}

.rem-box {
width: 50rem; /* using rem to create a responsive design */
height: 300px; /* fixed height using pixels */
border: 1px solid green;
}

.vw-box {
width: 20vw; /* using vw for a responsive design */
height: 200px; /* fixed height using pixels */
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="percentage-box"></div>
<div class="em-box">This is an em box.</div>
<div class="rem-box"></div>
<div class="vw-box"></div>
</body>
</html>

Common Mistakes

  1. Forgetting to set the root font size: If you don't set the font-size property in the HTML `` tag, em and rem units will not work as expected.
  2. Mixing up pixel and percentage values: Be careful when using both pixels and percentages for the same property to avoid unexpected results.
  3. Ignoring browser default font sizes: Different browsers have different default font sizes, which can affect how your em and rem units are calculated.
  4. Using viewport units improperly: Viewport units should be used only when creating responsive designs or for specific elements that need to adapt to the viewport size.
  5. Not testing on multiple devices: Always test your designs on different devices and screen sizes to ensure they look good and function properly.

Practice Questions

  1. Create a CSS class that sets the font size of all paragraphs (``) to 20 pixels using an inline style.
  2. Write a CSS rule that sets the width of all `` elements to 80% and adds a 5-pixel border.
  3. Create a CSS variable named $baseFontSize with a value of 16px, and then use it to set the font size for all headings (`, `, etc.) using em units.
  4. Write a CSS rule that sets the height of all images (``) to 100% of their container's width, ensuring they are responsive.
  5. Create a CSS class named .responsive-box that uses viewport units to set the width and height of the box to 20vw by default but scales up to 40vw on screens larger than 768 pixels wide.

FAQ

  1. Why are em and rem units useful for creating responsive designs? Em and rem units are relative to the font size of the element they are applied to or the root font size, respectively. This means that as the user changes the font size, the design will adapt automatically, making it more accessible and user-friendly.
  2. When should I use pixels instead of percentages? Pixels are best used when you need precise control over the positioning and sizing of elements, such as logos or buttons that require exact alignment. Percentages should be used for creating responsive designs that adapt to different screen sizes.
  3. What is the difference between em and rem units? Em is a relative unit based on the font size of the element it is applied to, while rem is based on the root font size (usually set in the HTML `` tag). This makes rem a more consistent unit for creating responsive designs across different web pages.
  4. Why are viewport units important when designing mobile-first or responsive layouts? Viewport units are relative to the viewport (the visible area of the web page on a device), making them ideal for creating designs that adapt to different screen sizes and devices, especially when designing for mobile devices.
  5. What is the best practice for using CSS units in my projects? The best practice is to use a combination of pixels, percentages, em, rem, and viewport units depending on the specific requirements of your project. It's essential to test your designs on multiple devices and screen sizes to ensure they look good and function properly.
CSS Units (Web Development) | Web Development | XQA Learn