What CSS Is and How Styles Are Applied to HTML
- CSS Basics
- Selectors & Specificity
- Box Model & Units
- Typography & Text Styling
- Colors & Color Spaces
- Positioning & Stacking Context
- Flexbox
- Grid
- Grid Advanced
- Responsive Design
- Container Queries
- Pseudo-classes & Pseudo-elements
- Modern Selectors
- CSS Custom Properties
- CSS Functions
- Transitions & Animations
- Transforms
- Forms & Input Styling
- CSS Architecture & Methodologies
- Accessibility in CSS
- Performance & Optimization
- View Transitions & Modern APIs
- Cascade Layers & Scope
What CSS Is
CSS (Cascading Style Sheets) is the language that describes how HTML content should look. HTML defines the structure and meaning of a page - headings, paragraphs, images, lists - while CSS controls the presentation: colors, spacing, fonts, layout and responsiveness. Separating the two keeps content and design independent, so the same HTML can look completely different with a new stylesheet.
Three Ways to Apply CSS to HTML
A browser can receive CSS instructions in three ways, and understanding when each applies helps explain why a style is or is not showing up.
| Method | How it is written | Typical use |
|---|---|---|
| External stylesheet | <link rel="stylesheet" href="styles.css"> in the head | Real projects - one file styles many pages |
| Internal stylesheet | <style>...</style> inside the head | Single-page demos or page-specific overrides |
| Inline style | style="color:red;" on the element itself | Quick tests, or styles generated dynamically by scripts |
Why "Cascading" Matters
The word "cascading" describes how the browser resolves conflicts when multiple rules target the same element. Styles flow down from external files, through internal styles, down to inline styles, and later rules can override earlier ones when specificity and source order allow it. This cascade is what lets a developer set broad defaults once and override them only where needed.
How the Browser Applies a Stylesheet
When a page loads, the browser builds the HTML into a structure (the DOM), reads every CSS rule it can find, matches each rule's selector against elements in that structure, and then paints the final result using the matched styles. This is why a stylesheet linked after the content it affects can sometimes cause a brief flash of unstyled content - the browser paints before the CSS has finished loading.