Let’s begin with Lecture 13 of the HTML5 & CSS3 series. CSS Selectors – Targeting Elements with Precision. This lecture is for absolute beginners; even kids can follow along and understand.
🎯 Objective:
By the end of this lecture, you will:
- Understand what CSS selectors are
- Know how to target elements like
<h1>,<p>, and<a>using selectors - Be able to style specific elements without affecting others
- Style links, headings, and paragraphs differently on your page!
🔍 What Are CSS Selectors?
Selectors in CSS help you pick which HTML element(s) you want to style.
Think of it like this:
If your webpage is a big toy box, then CSS selectors are like magic hands that grab only the toys (elements) you want to paint or change.
🧱 Basic CSS Selector Types
| Selector | Targets | Example |
|---|---|---|
* | All elements | * { color: red; } |
element | All instances of a tag | p { font-size: 16px; } |
.class | All elements with a class | .highlight { background: yellow; } |
#id | One unique element | #title { color: blue; } |
element1, element2 | Multiple elements | h1, h2 { color: green; } |
🌈 Common Selectors Explained
1. Element Selector
Selects all elements of a certain type.
p {
color: purple;
}This makes all paragraphs on your page appear in purple.
2. Class Selector (.)
Use classes to apply styles to multiple elements.
In HTML:
<p class="highlight">This paragraph has highlight styling.</p>
<h2 class="highlight">So does this heading!</h2>In CSS:
.highlight {
background-color: yellow;
}3. ID Selector (#)
Use IDs for one-of-a-kind elements (only used once per page).
In HTML:
<h1 id="main-title">Welcome to My Site</h1>In CSS:
#main-title {
font-size: 36px;
color: darkblue;
}4. Grouping Selectors
Apply the same style to multiple elements at once.
h1, h2, h3 {
font-family: 'Arial', sans-serif;
}💻 Try This: Style Your Home Page Differently
Let’s go back to your index.html file and use CSS selectors to make each part look unique.
Step 1: Open index.html
Make sure your code looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<style>
/* We'll add styles here */
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Hello! In this article, I'm going to share some fun facts about animals.</p>
<h2>Cats</h2>
<p>Cats are amazing pets...</p>
<h2>Dogs</h2>
<p>Dogs are loyal friends...</p>
<h2>Birds</h2>
<p>Birds can fly and sing beautiful songs...</p>
</body>
</html>Step 2: Add CSS Inside <style>
Update your <style> block with these selectors:
/* Change all headings */
h1 {
color: navy;
font-family: Georgia, serif;
}
/* Style subheadings */
h2 {
color: darkgreen;
}
/* Style all paragraphs */
p {
color: #333;
font-size: 16px;
}
/* Make the first paragraph special */
p:first-of-type {
font-weight: bold;
background-color: #f0f8ff;
padding: 10px;
}
/* Style links */
a {
color: crimson;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}Now run with Live Server and see the difference!
🎉 You’ve just given your page a custom, styled look — using only CSS selectors!
🧪 Try It Yourself!
- Give your
<h2>tags a border-bottom usingborder-bottom: 1px solid gray; - Make the word “Cats” appear in a different color using an ID.
- Add a class called
"fun"to one of the paragraphs and give it a background color. - Use
p:nth-child(3)to style the third paragraph only.
🚀 Next Lecture Preview:
In Lecture 14, we’ll learn how to work with colors in CSS — including hex codes, RGB values, HSL, and named colors — so you can make your website as colorful as a rainbow!
Stay Updated
If you found this information useful, don’t forget to bookmark this page and Share and leave your feedback in the comment section below.
