• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

CSS Units

← Previous Next →

CSS units define how sizes, spacing, and dimensions are measured in a webpage. Every value related to width, height, margin, padding, font size, positioning, and layout depends on CSS units. Without a clear understanding of CSS units, it becomes very difficult to build responsive, consistent, and scalable designs.

In this chapter, you will learn what CSS units are, why they matter, the different types of CSS units, how they behave, and when to use each one in real-world layouts.

What Are CSS Units

CSS units are measurement values used to define the size of elements and text on a webpage. They tell the browser how big or small something should appear.

Example:

p {
    font-size: 16px;
}

Here, px is a CSS unit that defines the size of the text.

CSS units can be divided into two main categories:

  • Absolute units

  • Relative units

Each category serves a different purpose in layout and design.

Why CSS Units Are Important

Choosing the right CSS unit directly affects how your website looks across different screen sizes and devices.

CSS units help you:

  • Control spacing and layout precisely

  • Create responsive designs

  • Improve accessibility

  • Maintain consistency across pages

  • Adapt designs for mobile, tablet, and desktop

Poor unit choices often lead to layouts that break on small screens or look inconsistent on large displays.

Types of CSS Units

CSS provides many units, but they can be grouped logically to make them easier to understand.

The two main types are:

  • Absolute units

  • Relative units

Let’s explore each in detail.

What Are Absolute CSS Units

Absolute units have fixed values. They do not change based on screen size, parent elements, or user settings.

Common absolute units include:

  • px

  • cm

  • mm

  • in

  • pt

  • pc

Among these, px is the most commonly used in web design.

What Is px Unit in CSS

The px unit represents a pixel on the screen. It is widely used because it provides precise control.

Example:

div {
    width: 300px;
    height: 150px;
}

This element will always be exactly 300 pixels wide and 150 pixels tall.

Advantages of px

  • Easy to understand

  • Precise control

  • Predictable layout

Disadvantages of px

  • Not responsive by default

  • Does not scale well with user font settings

  • Can cause accessibility issues

Because of these limitations, px should be used carefully, especially for font sizes.

Other Absolute Units

Units like cm, mm, in, pt, and pc are based on physical measurements. They are rarely used in web design because screen sizes and resolutions vary greatly.

Example:

p {
    font-size: 12pt;
}

These units are more useful for print stylesheets than for screen layouts.

What Are Relative CSS Units

Relative units are flexible. Their values depend on another measurement such as font size, viewport size, or parent element size.

Relative units are preferred for responsive and modern web design.

Common relative units include:

  • em

  • rem

  • %

  • vw

  • vh

  • vmin

  • vmax

Each of these units behaves differently.

What Is em Unit

The em unit is relative to the font size of the parent element.

Example:

div {
    font-size: 16px;
}

p {
    font-size: 1.5em;
}

The paragraph text will be 24px because 1.5em equals 1.5 times the parent font size.

Where em Is Useful

  • Padding and margin relative to text

  • Scalable components

  • Nested elements

Common Problem with em

em values compound when elements are nested, which can cause unexpected results if not handled carefully.

What Is rem Unit

The rem unit is relative to the root element’s font size, usually the html element.

Example:

html {
    font-size: 16px;
}

h1 {
    font-size: 2rem;
}

The heading will be 32px regardless of nesting.

Why rem Is Preferred

  • Predictable behavior

  • Easier to manage

  • Better for accessibility

  • Ideal for font sizes

Most modern CSS frameworks use rem extensively.

What Is Percentage Unit

The % unit is relative to the size of the parent element.

Example:

div {
    width: 50%;
}

The element will take half the width of its parent.

Where Percentage Units Are Used

  • Fluid layouts

  • Responsive containers

  • Flexible widths

Percentages are powerful but depend heavily on the parent element’s size.

What Are Viewport Units

Viewport units are based on the size of the browser window.

Common viewport units include:

  • vw

  • vh

  • vmin

  • vmax

These units help create layouts that adapt directly to screen size.

What Is vw Unit

vw stands for viewport width.

1vw equals 1 percent of the viewport width.

Example:

div {
    width: 50vw;
}

The element will be half the width of the browser window.

What Is vh Unit

vh stands for viewport height.

1vh equals 1 percent of the viewport height.

Example:

section {
    height: 100vh;
}

This makes the section fill the entire screen height.

What Are vmin and vmax

  • vmin uses the smaller value of viewport width or height

  • vmax uses the larger value

These units are useful for responsive typography and scaling elements proportionally.

CSS Units for Font Sizes

Choosing the right unit for font size is critical.

Recommended practices:

  • Use rem for base typography

  • Avoid fixed px for body text

  • Use em for component-level scaling

Example:

body {
    font-size: 1rem;
}

h1 {
    font-size: 2.5rem;
}

This approach scales well across devices and user preferences.

CSS Units for Layout

Different layout situations require different units.

Common patterns:

  • Use % for flexible containers

  • Use vw and vh for full-screen sections

  • Use rem for spacing consistency

  • Use px for small, fixed elements

Combining units intelligently creates strong layouts.

Mixing CSS Units

It is normal and often recommended to mix CSS units.

Example:

.card {
    width: 90%;
    max-width: 400px;
    padding: 1.5rem;
}

This provides flexibility while maintaining limits.

Accessibility and CSS Units

Relative units improve accessibility.

Users who increase font size in browser settings benefit when rem and em are used.

Avoid locking text sizes using fixed px values whenever possible.

Common Mistakes with CSS Units

Some frequent errors include:

  • Using only px everywhere

  • Ignoring parent size when using %

  • Overusing viewport units for text

  • Not testing across screen sizes

Understanding how units behave prevents these issues.

Best Practices for Using CSS Units

Follow these best practices for clean and scalable CSS:

  • Use rem for font sizes

  • Use % for flexible widths

  • Use vw and vh for full-screen layouts

  • Avoid unnecessary absolute units

  • Test designs on multiple devices

These habits lead to better responsive design.

Summary of CSS Units

CSS units are the foundation of layout, spacing, and typography in web design. Absolute units like px provide precision, while relative units like rem, em, %, and viewport units enable responsive and accessible layouts. Understanding how each unit works and when to use it helps you build flexible, user-friendly, and modern websites. Mastering CSS units is a key step toward writing professional and maintainable CSS.

Practice Questions

Q1. Set a div width to 500 pixels.

Q2. Set font size to 2em inside a div.

Q3. Make a section full height of the screen using vh.

Q4. Set padding as 10% of the parent width.

Q5. Make a container 60 characters wide using ch.

Q6. Use rem to define font size of 24px (assuming root is 16px).

Q7. Set image width to 80% of its parent.

Q8. Create a box that is 5cm wide and 2in tall.

Q9. Use vmin to adjust font-size for small screens.

Q10. Create two divs with widths 60vw and 40vw side by side.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

CSS

online coding class codepractice

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

codepractice logo
Login
Go Back Top