CSS Selectors | Targeting Elements | Lecture 13

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.

Table of Contents

🎯 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 using border-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.

HTML5 and CSS3 Compleate Series