CSS Values & Units
Learn about the different values and units you can use in CSS to size, color, and style your elements
CSS Length Units
CSS provides various units for expressing length. These units fall into two categories: absolute units and relative units.
Absolute Units
Absolute units are fixed and appear as exactly that size. They are not recommended for responsive designs.
- px - Pixels (1px = 1/96th of 1in)
- cm - Centimeters
- mm - Millimeters
- in - Inches (1in = 96px = 2.54cm)
- pt - Points (1pt = 1/72 of 1in)
- pc - Picas (1pc = 12pt)
Relative Units
Relative units are relative to another length property. They scale better between different rendering mediums.
- % - Percentage of the parent element
- em - Relative to the font-size of the element
- rem - Relative to the font-size of the root element
- vw - 1% of the viewport's width
- vh - 1% of the viewport's height
- vmin - 1% of the viewport's smaller dimension
- vmax - 1% of the viewport's larger dimension
Length Units in Action
Example Code
/* Absolute length units */
.box {
width: 300px; /* Pixels - most common */
height: 2in; /* Inches */
margin: 0.5cm; /* Centimeters */
padding: 10mm; /* Millimeters */
font-size: 1pc; /* Picas (1pc = 12pt) */
line-height: 12pt; /* Points (1pt = 1/72in) */
}
/* Relative length units */
.container {
width: 80%; /* Percentage of parent element */
font-size: 1.2em; /* Relative to parent font size */
font-size: 1.2rem; /* Relative to root element font size */
width: 50vw; /* Viewport width (1% of viewport width) */
height: 75vh; /* Viewport height (1% of viewport height) */
margin: 5vmin; /* 1% of viewport's smaller dimension */
padding: 2vmax; /* 1% of viewport's larger dimension */
}When to Use Which Unit
Use Absolute Units For:
- Print stylesheets (cm, mm, in, pt, pc)
- When the physical size matters (like for rulers)
- Fixed-size elements that should not scale
- Pixel-perfect designs (px)
Use Relative Units For:
- Responsive designs (%, vw, vh)
- Typography that scales (em, rem)
- Layouts that adapt to different screen sizes
- Accessible designs that respect user font size preferences
CSS Color Units
CSS provides several ways to specify colors. You can use color keywords, hexadecimal notation, RGB/RGBA values, or HSL/HSLA values.
Named Colors
CSS provides 140+ named colors like red, blue, green, etc. Easy to remember but limited in options.
Hexadecimal Colors
Hexadecimal colors are specified with #RRGGBB, where RR, GG, and BB are hexadecimal values between 00 and FF.
RGB and RGBA Colors
RGB defines colors using Red, Green, and Blue components. RGBA adds an Alpha channel for transparency.
HSL and HSLA Colors
HSL defines colors using Hue, Saturation, and Lightness. HSLA adds an Alpha channel for transparency.
Color Units in Action
Example Code
/* Named colors */
.primary {
color: red;
background-color: aqua;
border-color: rebeccapurple;
}
/* Hexadecimal colors */
.secondary {
color: #ff0000; /* Red */
color: #00ff00; /* Green */
color: #0000ff; /* Blue */
color: #ff00ff; /* Magenta */
color: #f09; /* Short form for #ff0099 */
}
/* RGB and RGBA colors */
.tertiary {
color: rgb(255, 0, 0); /* Red */
color: rgb(0%, 100%, 0%); /* Green */
color: rgba(0, 0, 255, 0.5); /* Semi-transparent blue */
}
/* HSL and HSLA colors */
.quaternary {
color: hsl(0, 100%, 50%); /* Red */
color: hsl(120, 100%, 50%); /* Green */
color: hsla(240, 100%, 50%, 0.3);/* Semi-transparent blue */
}Other CSS Values
Besides length and color units, CSS supports various other value types for different properties.
Numeric Values
- Unitless numbers - line-height: 1.5;
- Integers - z-index: 10;
- Numbers with units - opacity: 0.7;
Angle Values
- deg - Degrees (360deg = full circle)
- rad - Radians (6.2832rad = 360deg)
- grad - Gradians (400grad = 360deg)
- turn - Turns (1turn = 360deg)
Time Values
- s - Seconds
- ms - Milliseconds (1000ms = 1s)
Resolution Values
- dpi - Dots per inch
- dpcm - Dots per centimeter
- dppx - Dots per pixel unit (96dpi = 1dppx)
Other Values in Action
Example Code
/* Numeric values */
.opacity-example {
opacity: 0.7; /* Number between 0 and 1 */
}
.z-index-example {
z-index: 10; /* Integer number */
}
.line-height-example {
line-height: 1.5; /* Unitless number */
}
/* Angle values */
.rotate-example {
transform: rotate(45deg); /* Degrees */
}
.skew-example {
transform: skew(0.1rad); /* Radians */
}
.gradient-example {
background: linear-gradient(90deg, red, blue); /* Degrees */
}
/* Time values */
.transition-example {
transition: all 0.3s; /* Seconds */
}
.animation-example {
animation: slide 2s infinite; /* Seconds */
}
/* Resolution values */
@media (min-resolution: 2dppx) {
.high-res-image {
background-image: url(image@2x.png);
}
}