CSS3 Modern Styling, Flexbox & Grid Masterclass Track Progress

0 / 6 Lessons (0%)

CSS3 Modern Styling, Flexbox & Grid Masterclass/Beginner/CSS Syntax, Selectors & Specificity

CSS Syntax, Selectors & Specificity

Key Takeaway:CSS (Cascading Style Sheets) applies styling rules to HTML elements using selectors, properties, and values.

What Is It & Why Use It?

CSS rules consist of a selector (what to style) and a declaration block (how to style it). The browser resolves conflicting styles using the Cascade: specificity scores determine whether an element selector (1 pt), class selector (10 pts), or ID selector (100 pts) wins.

CSS Specificity Weight Scale Hierarchy

Interactive Diagram

Visual Architecture & Runtime Schematic

CSS Specificity Weight Scale Hierarchy

Node 01

!important Override

Entity state & role in architecture: !important Override

Example Code

/* Element Selector (Score: 1) */
p {
  color: #94a3b8;
  line-height: 1.6;
}

/* Class Selector (Score: 10) - Recommended for components */
.feature-badge {
  background-color: #0284c7;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-block;
}

/* Pseudo-class hover state */
.feature-badge:hover {
  background-color: #0369a1;
}

Language: css

Code Line-by-Line Breakdown

.feature-badge

Target all elements with class='feature-badge' in HTML.

border-radius: 9999px;

Pill shape: renders perfectly rounded capsule borders.

.feature-badge:hover

Applies alternate styles when user cursor hovers over element.

Remember These Rules

Always prefer classes over IDs for reusability and manageable specificity.

Avoid !important whenever possible; solve specificity through clean class naming like BEM.

Later rules in the stylesheet override earlier rules of equal specificity.

Quick Test

Which CSS selector has the highest specificity score?

/* Element Selector (Score: 1) */ p { color: #94a3b8; line-height: 1.6; } /* Class Selector (Score: 10) - Recommended for components */ .feature-badge { background-color: #0284c7; color: #ffffff; padding: 6px 12px; border-radius: 9999px; font-weight: 600; display: inline-block; } /* Pseudo-class hover state */ .feature-badge:hover { background-color: #0369a1; }