@codeswithpankaj

CSS Units

CSS Units Tutorial

By Codes With Pankaj

CSS units are essential for defining the size, spacing, and layout of elements on a webpage. Understanding the different types of units available in CSS and how to use them effectively is crucial for creating responsive and visually appealing designs. In this tutorial, we’ll explore various CSS units, including absolute, relative, and viewport units, along with practical examples.

Table of Contents

  1. Introduction to CSS Units

  2. Absolute Units

    • Pixels (px)

    • Points (pt)

    • Centimeters (cm) and Inches (in)

    • Millimeters (mm)

  3. Relative Units

    • Percent (%)

    • Em (em)

    • Rem (rem)

    • Viewport Width (vw) and Viewport Height (vh)

  4. Choosing the Right Units

  5. Practical Examples

    • Example 1: Using Pixels (px) for Fixed Sizes

    • Example 2: Using Percentages (%) for Responsive Design

    • Example 3: Using Em and Rem for Scalable Typography

    • Example 4: Using Viewport Units (vw, vh) for Fluid Layouts

  6. Conclusion

1. Introduction to CSS Units

CSS units define the size of elements, text, margins, paddings, and more. They determine how these elements will appear on different screens and devices. CSS units can be broadly categorized into two types:

  • Absolute Units: Fixed-size units that do not change based on the context.

  • Relative Units: Units that are relative to another value, such as the parent element's size or the viewport size.

Understanding when and how to use each type of unit is key to building flexible and responsive web designs.

2. Absolute Units

Absolute units are fixed and are not affected by other elements or settings on the page. These units are ideal for situations where you need precise control over the size of an element.

a. Pixels (px)

The most commonly used absolute unit is the pixel (px). Pixels are the smallest unit of measurement on the screen, and they provide precise control over element sizes.

Example:

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

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

Use Cases:

  • Fixed-size elements that do not need to be responsive.

  • Precise control over layout elements, such as borders, margins, and paddings.

b. Points (pt)

Points (pt) are traditionally used in print media and are equivalent to 1/72 of an inch. They are not commonly used in web design but can be useful for print stylesheets.

Example:

.text {
  font-size: 12pt;
}

In this example, the text is set to a size of 12 points.

Use Cases:

  • Print-specific stylesheets.

  • Situations where you need to match print design specifications.

c. Centimeters (cm) and Inches (in)

Centimeters (cm) and inches (in) are rarely used in web design but can be useful for print media or when precise physical measurements are required.

Example:

.box {
  width: 5cm;
  height: 2in;
  background-color: lightgreen;
}

In this example, the box is 5 centimeters wide and 2 inches tall.

Use Cases:

  • Print-specific stylesheets.

  • Situations where physical measurements need to be exact.

d. Millimeters (mm)

Millimeters (mm) are another absolute unit commonly used in print media. Similar to centimeters and inches, they provide precise physical measurements.

Example:

.box {
  width: 50mm;
  height: 30mm;
  background-color: lightcoral;
}

In this example, the box is 50 millimeters wide and 30 millimeters tall.

Use Cases:

  • Print-specific stylesheets.

  • Precise physical measurements.

3. Relative Units

Relative units are more flexible than absolute units, as they adjust based on the context, such as the size of the parent element or the viewport. They are essential for creating responsive designs.

a. Percent (%)

Percentages (%) are relative to the size of the parent element. They are commonly used for creating responsive layouts.

Example:

.container {
  width: 80%;
  height: 50%;
  background-color: lightyellow;
}

In this example, the container takes up 80% of the width and 50% of the height of its parent element.

Use Cases:

  • Responsive layouts that adapt to different screen sizes.

  • Creating fluid designs where elements resize based on the parent container.

b. Em (em)

The em unit is relative to the font size of the parent element. It is commonly used for scaling typography, padding, and margins.

Example:

.text {
  font-size: 1.5em;
  padding: 0.5em;
}

In this example, the font size is 1.5 times the parent element's font size, and the padding is 0.5 times the font size.

Use Cases:

  • Scalable typography that adapts to different screen sizes.

  • Relative padding and margins based on font size.

c. Rem (rem)

The rem unit is similar to em, but it is relative to the root element's (usually the <html> element) font size. This makes it more predictable and easier to manage across large projects.

Example:

.text {
  font-size: 2rem;
}

In this example, the font size is 2 times the root element's font size.

Use Cases:

  • Consistent typography across a project.

  • More predictable scaling compared to em.

d. Viewport Width (vw) and Viewport Height (vh)

Viewport units (vw, vh) are relative to the size of the viewport (the visible area of the web page). 1vw is 1% of the viewport's width, and 1vh is 1% of the viewport's height.

Example:

.hero {
  width: 100vw;
  height: 100vh;
  background-color: lightpink;
}

In this example, the hero section takes up the entire width and height of the viewport.

Use Cases:

  • Creating full-screen elements.

  • Responsive designs that adapt to different screen sizes.

4. Choosing the Right Units

Choosing the right CSS units depends on the context of your design:

  • Pixels (px): Use for fixed sizes and precise control.

  • Percentages (%): Use for responsive layouts where elements need to scale based on the parent container.

  • Em (em) and Rem (rem): Use for scalable typography and spacing, especially when working with responsive designs.

  • Viewport Units (vw, vh): Use for full-screen elements and responsive designs that adapt to the viewport size.

5. Practical Examples

Let’s look at some practical examples of using different CSS units.

Example 1: Using Pixels (px) for Fixed Sizes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fixed Sizes with Pixels - codeswithpankaj</title>
  <style>
    .box {
      width: 300px;
      height: 150px;
      background-color: lightblue;
    }
  </style>
</head>
<body>

<div class="box">
  This box has fixed dimensions using pixels.
</div>

</body>
</html>

Explanation:

  • The box has a fixed size of 300px by 150px, making it consistent across different devices.

Example 2: Using Percentages (%) for Responsive Design

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Design with Percentages - codeswithpankaj</title>
  <style>
    .container {
      width: 

80%;
      height: 50%;
      background-color: lightgreen;
    }
  </style>
</head>
<body>

<div class="container">
  This container is responsive, using percentage-based dimensions.
</div>

</body>
</html>

Explanation:

  • The container's size adjusts based on the parent element, making it responsive.

Example 3: Using Em and Rem for Scalable Typography

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scalable Typography with Em and Rem - codeswithpankaj</title>
  <style>
    body {
      font-size: 16px;
    }

    .text-em {
      font-size: 1.5em;
      padding: 1em;
    }

    .text-rem {
      font-size: 2rem;
    }
  </style>
</head>
<body>

<div class="text-em">
  This text uses em units for scalable typography.
</div>

<div class="text-rem">
  This text uses rem units for scalable typography.
</div>

</body>
</html>

Explanation:

  • The first text block scales based on the parent element's font size using em.

  • The second text block scales based on the root element's font size using rem.

Example 4: Using Viewport Units (vw, vh) for Fluid Layouts

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fluid Layouts with Viewport Units - codeswithpankaj</title>
  <style>
    .hero {
      width: 100vw;
      height: 100vh;
      background-color: lightcoral;
    }
  </style>
</head>
<body>

<div class="hero">
  This section takes up the full viewport width and height.
</div>

</body>
</html>

Explanation:

  • The hero section fills the entire viewport, making it ideal for full-screen layouts.

6. Conclusion

CSS units are fundamental to web design, providing the flexibility needed to create both fixed and responsive layouts. Understanding when to use absolute units like pixels and relative units like percentages, em, rem, and viewport units allows you to create designs that are both precise and adaptable to different devices.

  • Absolute Units: Provide fixed sizes, best for non-responsive designs.

  • Relative Units: Adapt to the parent element or viewport, ideal for responsive designs.

By mastering these units, you can create more dynamic, scalable, and user-friendly web designs.

For more tutorials and insights, visit Codes With Pankaj.

PreviousCSS OverflowNextCSS Display

Last updated