CSS Fundamentals for Beginners: Selectors, Properties & the Cascade
Learn CSS fundamentals from scratch. Understand selectors, properties, values, the cascade, specificity, inheritance, and how to link a stylesheet to your HTML page.
HTML gives you structure. CSS gives it life. Cascading Style Sheets control every visual aspect of a webpage — colours, fonts, spacing, layout, animations, and how the page adapts to different screen sizes.
Understanding CSS properly means understanding three things: how rules are written, how selectors target elements, and how the cascade decides which rules win when there's a conflict. This lesson covers all three.
How to Add CSS to an HTML Page
There are three ways to apply CSS. Only one is the right choice for real projects.
1. External Stylesheet (Recommended)
Create a separate .css file and link it in the <head> of your HTML:
<head>
<link rel="stylesheet" href="styles.css">
</head>In styles.css:
body {
font-family: sans-serif;
color: #333;
}This is the correct approach. Styles live in one place, are reusable across pages, and keep HTML clean.
2. Internal <style> Block
Styles written inside a <style> element in <head> — useful for quick experiments or single-page documents, but not scalable.
3. Inline Styles
<p style="color: red; font-size: 18px;">Warning: this approach causes problems.</p>Avoid inline styles. They have the highest specificity (making them hard to override), can't be reused, and mix concerns. Reserve them for dynamic styles applied via JavaScript.
CSS Rule Syntax
A CSS rule has two parts: a selector and a declaration block:
h1 {
color: #1a1a2e;
font-size: 2rem;
margin-bottom: 1rem;
}h1 is the selector (targets all <h1> elements). color, font-size, margin-bottom are properties. #1a1a2e, 2rem, 1rem are values. Each declaration ends with a semicolon, and declarations are wrapped in curly braces.
CSS Selectors
Selectors determine which HTML elements a rule applies to.
Element Selector
p { line-height: 1.6; }Targets every <p> element on the page.
Class Selector
.card {
background: #fff;
border-radius: 8px;
padding: 1.5rem;
}Targets all elements with class="card". A class can be applied to multiple elements, and one element can have multiple classes: <div class="card featured">.
ID Selector
#main-header {
background: #1a1a2e;
padding: 1rem 2rem;
}Targets the single element with id="main-header". IDs must be unique per page. Prefer classes over IDs in CSS — they're easier to override.
Universal Selector
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}The * selector targets every element. Often used in CSS resets to remove browser default margins and padding.
Attribute Selector
input[type="email"] { border: 2px solid #4a90e2; }
a[target="_blank"] { color: orange; }Targets elements based on their attributes and values.
Pseudo-class Selectors
a:hover { color: #4a90e2; }
button:focus { outline: 3px solid #4a90e2; }
li:first-child { font-weight: bold; }
li:nth-child(2n) { background: #f5f5f5; }| Pseudo-class | Targets |
|---|---|
:hover | Element being hovered |
:focus | Focused form element |
:active | Element being clicked |
:visited | Visited link |
:first-child | First child element |
:last-child | Last child element |
:nth-child(n) | nth child element |
:not(selector) | Elements that don't match |
Pseudo-element Selectors
p::first-line { font-weight: bold; }
.card::before { content: "★"; color: gold; }Pseudo-elements (::) target a part of an element or create virtual content.
Combinator Selectors
/* Descendant: all <p> inside .article */
.article p { font-size: 1rem; }
/* Direct child: only <li> that are direct children of <ul> */
ul > li { list-style: disc; }
/* Adjacent sibling: <p> immediately after <h2> */
h2 + p { margin-top: 0; }CSS Properties: Key Categories
Colour
.element {
color: #333; /* text colour */
background-color: #f0f0f0;
border-color: rgba(0, 0, 0, 0.2);
}Colour values can be hex (#ff5733), RGB (rgb(255, 87, 51)), RGBA (with opacity), HSL, or named colours (red, blue, coral).
Typography
body {
font-family: 'Inter', Arial, sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: left;
}The Cascade
The "cascade" is the algorithm that decides which rule applies when multiple rules target the same element. It considers three factors in order: origin (where the style comes from), specificity (how specific the selector is), and order (when specificity is equal, the later rule wins).
Specificity
| Selector Type | Specificity |
|---|---|
Inline style (style=—) | Highest (1,0,0,0) |
ID (#id) | (0,1,0,0) |
| Class, attribute, pseudo-class | (0,0,1,0) |
| Element, pseudo-element | (0,0,0,1) |
Universal (*) | (0,0,0,0) |
A more specific rule always beats a less specific one, regardless of order:
p { color: black; } /* specificity: 0,0,0,1 */
.intro { color: blue; } /* specificity: 0,0,1,0 — wins */
#hero p { color: red; } /* specificity: 0,1,0,1 — wins over both */!important
p { color: red !important; }!important overrides the normal cascade. Avoid it except as a last resort — it makes stylesheets very hard to maintain.
Inheritance
Some CSS properties inherit their value from the parent element; others don't.
Inherited properties (applied to children unless overridden): color, font-family, font-size, font-weight, line-height, text-align.
Non-inherited properties (must be set explicitly): margin, padding, border, background, width, height.
body {
font-family: 'Inter', sans-serif;
color: #333;
}
/* All text elements on the page inherit these values */Previous: Lesson 5 — HTML Forms & Inputs | Next: Lesson 7 — CSS Box Model
Part of the HTML & CSS Fundamentals course.