Prev Next

CSS Units

CSS Units are used to define sizes, distances, and proportions in your web design. They allow you to control how elements appear on a page. Units can be categorized as absolute (like px, cm) or relative (like %, em, rem).

Key Topics

Absolute Units

Absolute units provide fixed sizes and are not affected by surrounding elements. Common absolute units include px, cm, mm, in, and pt.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Absolute Units</title>
    <style>
        .box {
            width: 100px;
            height: 50px;
            background-color: #007BFF;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 2in;">2 inches wide</div>
    <div class="box" style="width: 5cm;">5 cm wide</div>
    <div class="box" style="width: 100px;">100 pixels wide</div>
</body>
</html>

Explanation: Absolute units provide consistent sizes, making them suitable for print designs or fixed layouts.

Relative Units

Relative units are flexible and depend on other properties, such as the font size of the parent element or the viewport size. Common relative units include %, em, and rem.

<style>
    .container {
        font-size: 16px;
    }
    .relative {
        width: 50%;
        padding: 1em;
        background-color: #FF6B6B;
        color: white;
        margin-bottom: 10px;
    }
</style>
<div class="container">
    <div class="relative">50% width and 1em padding</div>
    <div class="relative" style="padding: 2rem;">2rem padding (relative to root font size)</div>
</div>

Explanation: Relative units adjust dynamically, making them ideal for responsive designs.

Viewport Units

Viewport units (vw, vh, vmin, vmax) are based on the dimensions of the viewport, making them highly responsive.

<style>
    .viewport {
        width: 50vw;
        height: 30vh;
        background-color: #007BFF;
        color: white;
        text-align: center;
        line-height: 30vh;
        margin-bottom: 10px;
    }
</style>
<div class="viewport">50vw wide and 30vh tall</div>

Explanation: Viewport units are responsive to screen size, making them ideal for dynamic layouts.

Combined Example

This example combines absolute, relative, and viewport units to demonstrate their use in a cohesive layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Units</title>
    <style>
        .box {
            margin: 10px;
            text-align: center;
            padding: 10px;
            color: white;
        }
        .absolute {
            width: 100px;
            height: 50px;
            background-color: #007BFF;
        }
        .relative {
            width: 50%;
            background-color: #FF6B6B;
        }
        .viewport {
            width: 50vw;
            height: 30vh;
            background-color: #28A745;
        }
    </style>
</head>
<body>
    <div class="box absolute">100px Width</div>
    <div class="box relative">50% Width</div>
    <div class="box viewport">50vw Width, 30vh Height</div>
</body>
</html>

Explanation: This layout demonstrates how to mix units effectively for various design needs.

Key Takeaways

  • Absolute Units: Provide fixed sizes, useful for print designs.
  • Relative Units: Adjust dynamically, making them ideal for responsive designs.
  • Viewport Units: Depend on screen size, ensuring adaptability for different devices.
Prev Next