WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

CSS Units

Previous Next

In CSS, units are used to define the size of elements such as fonts, margins, padding, borders, and other properties. There are two types of units: relative units and absolute units.

Units categories:

  1. Absolute Units
  2. Relative Units

Absolute Units:

Absolute units are fixed and don’t change based on other elements. These units are typically used when you need precise control over sizing.

  1. px (Pixels)
  2. cm (Centimeters), mm (Millimeters), in (Inches)
  3. pt (Points)
  4. pc (Picas)

px (Pixels):

The most commonly used unit. 1px equals one dot on the screen.

Example
font-size: 30px;
width: 200px;
Try it yourself

cm (Centimeters), mm (Millimeters), in (Inches):

These are physical measurements, mostly used for print styles, not for screens.

Example
width: 5cm; /* 5 centimeters */
height: 2in; /* 2 inches */
Try it yourself

pt (Points): 

Used in typography, where 1pt = 1/72 of an inch.

Example
font-size: 18pt; /* 1pt = 1/72 inch */
Try it yourself

pc (Picas): 

1 pica equals 12 points.

Example
font-size: 2pc; /* 24 points */
Try it yourself

Relative Units:

Relative units are more flexible and scalable. They change in relation to other measurements (such as the viewport size or a parent element’s size).

  1. % (Percentage)
  2. em
  3. rem (Root em)
  4. vw (Viewport Width)
  5. vh (Viewport Height)
  6. vmin
  7. vmax
  8. ch

% (Percentage):

Defines size as a percentage of the parent element’s size.

Example
width: 50%; /* 50% of the parent element's width */
Try it yourself

em:

Relative to the font-size of the element itself or its parent. For example, if the parent element’s font-size is 16px, 2em would be 32px.

Example
font-size: 1.5em; /* 1.5 times the parent font size */
Try it yourself

rem (Root em):

Similar to em, but relative to the font-size of the root element (usually the <html> tag).

Example
font-size: 1.5rem; /* Relative to root font size (e.g., 16px) */
Try it yourself

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

  • vw (Viewport Width): 1vw equals 1% of the viewport’s width (browser window width).
  • vh (Viewport Height): 1vh equals 1% of the viewport’s height.
Example
width: 50vw; /* 50% of the viewport's width */
height: 50vh; /* 50% of the viewport's height */
Try it yourself

vmin and vmax:

  • vmin: The smaller value between vw and vh.
  • vmax: The larger value between vw and vh.
Example
width: 50vmin; /* 50% of the smaller dimension (width or height) */
height: 50vmax; /* 50% of the smaller dimension (width or height) */
Try it yourself

ch:

Relative to the width of the 0 character of the element’s font.

Example
width: 30ch; /* Width based on 30 characters */
Try it yourself

Previous Next