By the end of this lesson, you will be able to:
:information_source: CSS selectors help us choose which HTML elements to style. Think of them as pointing tools - they tell CSS exactly which parts of your webpage to change!
Remember the three ways to write CSS? Inline CSS, Internal CSS, and External CSS.
selector {
property : value;
}
Basic CSS syntax
h1 {
color : red;
}
Example: Making all h1 elements red
We change the properties and values to control how elements look. Let's explore the four basic selectors:
The element selector is the simplest type. It selects ALL elements of a specific type on your page.
:bulb: Tip If you write
h1
as your selector, it will style EVERY<h1>
element on your page!
Example:
CSS Input (style.css):
h1 {
color: red;
text-align: center;
}
p {
color: blue;
}
HTML Input (index.html):
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* Both h1 elements will be red and center-aligned */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Welcome to my web page!</h1>
{/* p element will be blue */}
<p style={{'color': 'blue'}}>I love programming.</p>
Want to style multiple elements the same way? The grouping selector saves you time!
Example:
CSS Input (style.css):
h1, p {
color: red;
text-align: center;
}
HTML Input (index.html):
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello, world!</h1>
<h1>Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* All h1 and p elements will be red and center-aligned */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Welcome to my web page!</h1>
<p style={{'color': 'red', 'textAlign': 'center'}}>I love programming.</p>
The class selector lets you style specific elements that share the same class name.
class="classname"
to HTML elements:memo: Note Remember: Use a period (.) before the class name in CSS, but not in HTML!
Example:
CSS Input (style.css):
.red-center {
color: red;
text-align: center;
}
p {
color: blue;
}
HTML Input (index.html):
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="red-center">Hello, world!</h1>
<h1>Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* Only h1 with class="red-center" will be red and center-aligned */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
{/* This h1 has no styling applied */}
<h1>Welcome to my web page!</h1>
{/* p element will be blue */}
<p style={{'color': 'blue'}}>I love programming.</p>
The id selector targets ONE specific element on your page.
id="idname"
to ONE HTML element:memo: Note Remember: Use a hash (#) before the id name in CSS, but not in HTML!
Example:
CSS Input (style.css):
#red-center {
color: red;
text-align: center;
}
p {
color: blue;
}
HTML Input (index.html):
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="red-center">Hello, world!</h1>
<h1>Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* Only h1 with id="red-center" will be red and center-aligned */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
{/* This h1 has no styling applied */}
<h1>Welcome to my web page!</h1>
{/* p element will be blue */}
<p style={{'color': 'blue'}}>I love programming.</p>
.Red
is different from .red
):bulb: Tip Good names describe what they do:
.highlight
, #main-header
, .error-message
.3column
, .my class
, #header-1-1
Feature | Class Selector | Id Selector |
---|---|---|
Symbol | Period (.) | Hash (#) |
Usage | Can use on many elements | Only ONE element per page |
Multiple per element | Yes! Use spaces between | No, only one id per element |
One. Multiple classes on one element (separate with spaces):
Example:
CSS Input (style.css):
.red {
color: red;
}
.center {
text-align: center;
}
HTML Input (index.html):
<head>...</head>
<body>
<h1 class="red center">Hello, world!</h1>
<h1>Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* h1 with both classes applied gets both red color and center alignment */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
{/* This h1 has no styling applied */}
<h1>Welcome to my web page!</h1>
{/* This p has no styling applied */}
<p>I love programming.</p>
2. Same class on multiple elements:
Example:
CSS Input (style.css):
h1 {
color: red;
}
.center {
text-align: center;
}
HTML Input (index.html):
<head>...</head>
<body>
<h1 class="center">Hello, world!</h1>
<h1 class="center">Welcome to my web page!</h1>
<p>I love programming.</p>
</body>
Output:
{/* Both h1 elements get red color from h1 selector and center alignment from .center class */}
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Hello, world!</h1>
<h1 style={{'color': 'red', 'textAlign': 'center'}}>Welcome to my web page!</h1>
{/* This p has no styling applied */}
<p>I love programming.</p>
Let's review what we learned about CSS selectors:
Selector Type | Symbol | Example | What it does |
---|---|---|---|
Element | none | h1 { } |
Styles ALL h1 elements |
Grouping | , | h1, p { } |
Styles multiple elements |
Class | . | .highlight { } |
Styles elements with that class |
Id | # | #header { } |
Styles ONE specific element |
:bulb: Tip When to use each selector:
Code with AI: Try using AI to generate CSS for specific selectors.
Prompts:
"CSS to style all paragraph elements with blue text."
"CSS to style a div with the class 'hero' with a red background."
"CSS to style an element with the ID 'header' with a large font size."
Try these exercises to master CSS selectors:
<h2>
elements greenRemember: Practice makes perfect! The more you use selectors, the easier they become.