CSS Specificity

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.

Specificity

CSS specificity determines which rules apply when multiple rules target the same element. Understanding specificity is key to mastering CSS.

What is Specificity?

Specificity refers to the priority given to CSS rules based on their type. More specific rules will override less specific ones.

Specificity Hierarchy:/p>

Inline Styles (e.g., style=”color: red;”) – Highest specificity.
IDs (e.g., #header) – Higher than classes, but lower than inline styles.
Classes (e.g., .button) and pseudo-classes (e.g., :hover) – Lower than IDs.
Elements (e.g., p, h1, etc.) – Lowest specificity.

Specificity Calculation:

Inline styles: 1000
ID selectors: 100
Class, pseudo-class, attribute selectors: 10
Type selectors, pseudo-elements: 1

Example of Specificity:

/* Specificity score: 001 (element) */ p { color: blue; } /* Specificity score: 010 (class) */ .text { color: green; } /* Specificity score: 100 (ID) */ #main-text { color: red; }

In this example, if an element is targeted by all three selectors, the one with the ID selector (#main-text) will be applied because it has the highest specificity.

Request more information

CSS Specificity