# Part 1: Selectors, Specificity, and the Cascade
## Introduction
CSS (Cascading Style Sheets) is what I pick up immediately after writing HTML. The two are inseparable in practice — the markup gives structure, CSS gives it visual form. But CSS has subtleties that take time to internalise. The cascade, specificity, and inheritance explain why a style you wrote seems to have no effect, or why removing one rule breaks three unrelated things. Once those mechanics click, CSS stops being frustrating and becomes predictable.
This part covers how CSS works at the engine level, every selector type I use day-to-day, and how the browser resolves conflicts between competing rules.
***
## How to Apply CSS
There are three ways to attach CSS to an HTML document.
### External Stylesheet (preferred)
```html
```
The stylesheet is a separate `.css` file, cached by the browser across pages, and easy to maintain. This is what I use for every project.
### `
```
Useful for page-specific overrides or critical above-the-fold styles to avoid a render-blocking request.
### Inline Styles (avoid for general use)
```html
Warning
```
Inline styles have the highest specificity short of `!important`, making them difficult to override. They are appropriate when CSS is generated dynamically (e.g., a JavaScript-driven colour value), not for general styling.
***
## CSS Rule Anatomy
```css
selector {
property: value;
property: value;
}
```
```css
h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
```
* **Selector** — targets the element(s) to style
* **Declaration block** — `{ ... }` contains one or more declarations
* **Declaration** — a `property: value` pair ending with `;`
***
## Selectors
### Type Selector
Targets all elements of a given tag name.
```css
p {
line-height: 1.6;
}
code {
font-family: 'JetBrains Mono', monospace;
}
```
### Class Selector
Targets elements with a specific `class` attribute value. The most common selector in everyday CSS.
```css
.card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
padding: 1.5rem;
}
.badge--success {
background: #c6f6d5;
color: #276749;
}
```
```html
...
Active
```
A single element can have multiple classes separated by spaces.
### ID Selector
Targets a single element with a specific `id`.
```css
#main-content {
max-width: 860px;
margin: 0 auto;
}
```
I use ID selectors sparingly in CSS — their specificity is much higher than class selectors, making them hard to override. IDs are better reserved for JavaScript targeting and fragment links.
### Universal Selector
Matches every element.
```css
* {
box-sizing: border-box;
}
```
The most common use: applying `box-sizing: border-box` globally. In isolation it is fine; avoid using it for broad style rules as it matches everything in the document.
### Attribute Selector
Targets elements based on the presence or value of attributes.
```css
/* Has the attribute */
[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
/* Exact value match */
[type="submit"] {
background: #3b82f6;
color: #fff;
}
/* Contains word */
[class~="btn"] { }
/* Starts with */
[href^="https"] { }
/* Ends with */
[href$=".pdf"]::after {
content: " (PDF)";
}
/* Contains substring */
[href*="github.com"] { }
```
### Pseudo-Class Selectors
Pseudo-classes target elements in a specific state.
```css
/* User interaction */
a:hover { text-decoration: underline; }
a:focus { outline: 2px solid #3b82f6; }
a:visited { color: #7c3aed; }
a:active { color: #1d4ed8; }
/* Form state */
input:focus { border-color: #3b82f6; }
input:valid { border-color: #38a169; }
input:invalid { border-color: #e53e3e; }
input:disabled { opacity: 0.5; cursor: not-allowed; }
input:checked { accent-color: #3b82f6; }
/* Structural */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { background: #f7fafc; }
li:nth-child(odd) { background: #f7fafc; }
li:nth-child(even) { background: #fff; }
p:not(.intro) { color: #4a5568; }
```
### Pseudo-Element Selectors
Pseudo-elements create virtual sub-elements for styling.
```css
/* First line of a paragraph */
p::first-line {
font-weight: bold;
}
/* First letter */
p::first-letter {
font-size: 2rem;
float: left;
margin-right: 0.25rem;
}
/* Content before/after element */
.required-label::after {
content: " *";
color: #e53e3e;
}
[href$=".pdf"]::after {
content: " ↗";
}
/* Text selection colour */
::selection {
background: #bee3f8;
color: #1a365d;
}
```
The double-colon `::` is the CSS3 syntax for pseudo-elements. Single colon `:` works too for historical reasons, but `::` is the modern standard.
### Combinator Selectors
Combinators select elements based on their relationship to other elements.
```css
/* Descendant: any nav inside header (any depth) */
header nav { }
/* Child: direct children only */
ul > li {
list-style: none;
}
/* Adjacent sibling: h2 immediately followed by p */
h2 + p {
margin-top: 0;
}
/* General sibling: all p after h2 at same level */
h2 ~ p {
color: #4a5568;
}
```
***
## Specificity
When multiple rules target the same element and the same property, specificity determines which value wins.
### How Specificity is Calculated
Specificity is a three-number score `(A, B, C)`:
| Selector type | Contributes to |
| --------------------------------------------------------------- | -------------- |
| Inline style (`style="..."`) | A |
| ID (`#id`) | A |
| Class (`.class`), pseudo-class (`:hover`), attribute (`[type]`) | B |
| Type (`p`, `h2`), pseudo-element (`::before`) | C |
| Universal (`*`), combinators ( , `>`, `+`, `~`) | Nothing |
Higher A beats lower A regardless of B and C; A ties compare B; B ties compare C.
### Examples
```css
p /* (0, 0, 1) */
.card /* (0, 1, 0) */
#main /* (1, 0, 0) — wins over any class or type */
.card p /* (0, 1, 1) */
.card .title /* (0, 2, 0) */
#main .card p /* (1, 1, 1) */
```
```css
/* Specificity (0, 1, 0) */
.warning {
color: orange;
}
/* Specificity (0, 0, 1) — loses to .warning */
p {
color: black;
}
```
For a `
`, the text is orange because `.warning` has higher specificity.
### `!important`
```css
.override {
color: red !important;
}
```
`!important` overrides the entire specificity system. It should be used as a last resort — browser resets, utility classes, or third-party overrides. Once `!important` appears in a codebase, the only way to override it is with another `!important`, creating an escalating mess.
***
## The Cascade
The cascade is the algorithm the browser uses to determine which value applies when multiple declarations target the same property on the same element.
The cascade considers three factors, in priority order:
### 1. Origin and Importance
| Origin | Normal | `!important` |
| ------------------------------ | ------ | ------------ |
| User agent (browser defaults) | Lowest | High |
| User styles (browser settings) | Medium | Higher |
| Author styles (your CSS) | High | Highest |
Your CSS overrides browser defaults, which is why `