CSS Units

Introduction

Welcome back to our CSS series! In the last blog, we explored key concepts like aligning elements, creating navigation bars, dropdown menus, and styling with combinators, pseudo-classes, and opacity effects. We also dove into image galleries, attribute selectors, and CSS counters—giving you a comprehensive toolkit to build interactive and visually appealing web pages.

In this blog, we’ll dive even deeper into CSS by covering some advanced yet essential topics like CSS Units, Specificity, the use of CSS !important, and Math Functions. To further enhance your designs, we’ll also explore CSS Shadows and creative Text Effects. These are all must-know tools for elevating your web development skills and creating precise, professional web pages. Let’s get started!

CSS Units

CSS uses a variety of units to specify sizes, such as px, em, rem, %, vw, vh, etc. It’s essential to understand when to use each.

Pixels (px): The default unit for fixed sizes. Browser support: All browsers.
Ems (em): Relative to the font-size of the element. Browser support: All browsers.
Rems (rem): Relative to the font-size of the root element. Browser support: All browsers.
Percentages (%): Relative to the size of the parent element. Browser support: All browsers.
Viewport Width (vw): 1vw equals 1% of the viewport’s width. Browser support: Modern browsers.
Viewport Height (vh): 1vh equals 1% of the viewport’s height. Browser support: Modern browsers.

Example:

.container { width: 80%; /* Responsive width using percentages */ height: 50vh; /* Sets height relative to viewport */ }

Units like vw and vh are particularly useful for responsive designs, while px and em provide precision.

Request more information

CSS Units