The Project | About Us | Contribute | Donations | License

HOME

In CSS, units and measurements are essential for defining the size, spacing, and layout of elements. Understanding the different types of units and when to use them is crucial for creating responsive and well-structured designs.

Types of CSS Units

CSS units can be broadly categorized into two types:

Absolute Units
Relative Units

Absolute Units

Absolute units are fixed and do not change based on other elements or the viewport. They are useful when you need precise control over the size of an element.

px (Pixels): The most commonly used unit. One pixel is one dot on the screen.
cm (Centimeters): One centimeter.
mm (Millimeters): One millimeter.
in (Inches): One inch, which is equal to 2.54 centimeters.
pt (Points): One point is 1/72 of an inch.
pc (Picas): One pica is equal to 12 points.

Relative Units

Relative units are more flexible and adapt based on the context, such as the size of the parent element or the viewport.

em: Relative to the font-size of the element. For example, if the font-size of the element is 16px, 1em is 16px.
rem (Root em): Relative to the font-size of the root element (usually the <html> element). If the root font-size is 16px, 1rem is 16px.
% (Percentage): Relative to the parent element's size. For example, width: 50% means 50% of the parent element's width.
vw (Viewport Width): 1vw is 1% of the viewport's width.
vh (Viewport Height): 1vh is 1% of the viewport's height.
vmin: 1vmin is 1% of the smaller dimension (width or height) of the viewport.
vmax: 1vmax is 1% of the larger dimension (width or height) of the viewport.

Practical Examples

Example 1: Using Pixels

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixels Example</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, the .box element has a fixed width of 200 pixels and a height of 100 pixels.

Example 2: Using em and rem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>em and rem Example</title>
    <style>
        html {
            font-size: 16px;
        }
        .container {
            font-size: 1.5em; /* 1.5 * 16px = 24px */
        }
        .box {
            width: 10em; /* 10 * 24px = 240px */
            height: 5em; /* 5 * 24px = 120px */
            background-color: lightcoral;
        }
        .box-rem {
            width: 10rem; /* 10 * 16px = 160px */
            height: 5rem; /* 5 * 16px = 80px */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
    <div class="box-rem"></div>
</body>
</html>

In this example:

The .box element uses em units, which are relative to the font-size of its parent (.container).
The .box-rem element uses rem units, which are relative to the root font-size.

Example 3: Using Viewport Units

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viewport Units Example</title>
    <style>
        .box {
            width: 50vw; /* 50% of the viewport width */
            height: 50vh; /* 50% of the viewport height */
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

In this example, the .box element's width and height are set to 50% of the viewport's width and height, respectively.

Practical Exercises

Exercise 1: Fixed and Relative Units

Create a simple HTML page with three boxes:

The first box should have a fixed width and height using pixels.
The second box should use em units for its width and height.
The third box should use vw and vh units for its width and height.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Units Exercise</title>
    <style>
        .box-px {
            width: 200px;
            height: 100px;
            background-color: lightblue;
        }
        .box-em {
            font-size: 16px;
            width: 10em; /* 10 * 16px = 160px */
            height: 5em; /* 5 * 16px = 80px */
            background-color: lightcoral;
        }
        .box-vw-vh {
            width: 50vw; /* 50% of the viewport width */
            height: 50vh; /* 50% of the viewport height */
            background-color: lightseagreen;
        }
    </style>
</head>
<body>
    <div class="box-px"></div>
    <div class="box-em"></div>
    <div class="box-vw-vh"></div>
</body>
</html>

Exercise 2: Responsive Design with Relative Units

Create a responsive layout where a box's width is 80% of its parent container, and its height is 50% of the viewport height.

Solution

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Units Exercise</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: lightgray;
        }
        .box {
            width: 80%; /* 80% of the parent container */
            height: 50vh; /* 50% of the viewport height */
            background-color: lightpink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

Summary

In this lesson, we covered the different types of CSS units and measurements, including absolute units like pixels and relative units like em, rem, and viewport units. We also provided practical examples and exercises to help reinforce these concepts. Understanding how to use these units effectively is crucial for creating flexible and responsive web designs.

CSS Units and Measurements

Types of CSS Units

Absolute Units

Relative Units

Practical Examples

Example 1: Using Pixels

Example 2: Using em and rem

Example 3: Using Viewport Units

Practical Exercises

Exercise 1: Fixed and Relative Units

Solution

Exercise 2: Responsive Design with Relative Units

Solution

Summary

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website