CSS Units

CSS uses many units for sizes. Choosing the right one matters for responsive design.

Absolute Units

Unit	Description
`px`	Pixel — fixed size, most common absolute unit

Relative Units

Unit	Relative To
`%`	Parent element's size
`em`	Parent's font-size
`rem`	Root (`html`) font-size (usually 16px)
`vw`	1% of viewport width
`vh`	1% of viewport height

💡 Use rem for font sizes and spacing — it scales well when users change browser font size.

Example

html { font-size: 16px; }

h1 {
  font-size: 2rem;    /* 32px — relative to html */
}
p {
  font-size: 1rem;    /* 16px */
  margin-bottom: 1.5rem;
}

.hero {
  height: 100vh;      /* full viewport height */
  width: 100%;        /* full parent width */
}

.sidebar {
  width: 25%;         /* 25% of parent */
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned