🎯 Session Overview
Welcome to Session 2! Now that you know how to write basic CSS rules, we need to learn how to aim them. If you have 100 paragraphs on a page, how do you make just one of them red without affecting the others?
In this session, you will learn:
- How to use CSS Selectors to target specific elements accurately.
- How to use Classes and IDs.
- How to target elements inside other elements (Descendants & Children).
- How to add interactive Hover Effects.
- How browsers resolve conflicts using Specificity and the Cascade.
⏪ Quick Recap: Session 1
Let's remember how CSS is written:
- Selector: Tells the browser what to style (e.g.,
h1). - Property: Tells the browser what feature to change (e.g.,
color). - Value: The new setting (e.g.,
blue).
Today, we are zooming in entirely on the Selector part of that rule.
🎯 Basic CSS Selectors
The easiest way to target an HTML element is just to call it by its tag name. But what if we need to be more specific? Let's look at the "Big Three" selectors.
1. Element Selector
This targets every single element of that type on the page. Use this for general rules.
h1 {
color: blue;
}2. Class Selector (The Dot .)
A Class is a custom label you give to an HTML element. You can give the same class to many elements! To select a class in CSS, you must put a dot (.) before its name.
<!-- HTML -->
<p class="highlight">Look at me!</p>
<p class="highlight">Me too!</p>
/* CSS */
.highlight {
color: red;
}3. ID Selector (The Hashtag #)
An ID is a unique identifier. It is like a fingerprint—an ID can only be used on ONE element per page. To select an ID in CSS, use a hashtag (#).
<!-- HTML -->
<h1 id="main-title">Welcome to TechTicket</h1>
/* CSS */
#main-title {
font-size: 40px;
}🔗 Advanced Selectors: Grouping and Relationships
CSS allows us to target elements based on their relationship to other elements.
Group Selectors (The Comma ,)
If you want h1, h2, and h3 to all share the same font, you don't need to write the rule three times. Just separate them with a comma!
h1, h2, h3 {
font-family: Arial, sans-serif;
}Descendant Selectors (The Space )
If you want to target a paragraph, but ONLY if it is inside a <div>, use a space between the selectors.
/* Targets any <p> that lives anywhere inside a <div> */
div p {
color: green;
}Child Selectors (The Greater-Than >)
Similar to Descendant, but stricter. It targets elements that are direct children (immediately inside) the parent, not grandchildren.
/* Targets <p> ONLY if it is directly inside the <div> */
div > p {
color: orange;
}Imagine this HTML:
<div>
<p>I am a child!</p>
<section>
<p>I am a grandchild!</p>
</section>
</div>
Descendant (div p) will color BOTH paragraphs, because they both live inside the div eventually.
Child (div > p) will ONLY color the first paragraph, because the second one is a child of the <section>, not the <div> directly!
✨ Pseudo-Classes (The Colon :)
A pseudo-class targets an element only when it is in a specific state. The most famous one is :hover, which triggers when the user's mouse pointer is over the element.
button:hover {
background-color: blue;
}⚖️ CSS Specificity (The Point System)
What happens if you accidentally write two CSS rules that target the exact same element, but tell it to do opposite things?
/* In CSS: */
p { color: blue; }
.highlight { color: red; }
<!-- In HTML: -->
<p class="highlight">What color am I?</p>The browser has a "Point System" called Specificity to decide who wins. The rule with the most points wins!
The Specificity Point System
Because a Class (10 pts) beats an Element (1 pt), the paragraph in our example will be red!
🌊 The CSS Cascade
Okay, so IDs beat Classes, and Classes beat Elements. But what if two rules have the exact same specificity points?
This is where the Cascade comes in. CSS stands for Cascading Style Sheets. The browser reads your CSS file from top to bottom, like a waterfall.
Rule: If two selectors have the exact same specificity, the one written last wins!
.box { background: green; }
.box { background: purple; } /* This is written last, so it wins! */🎮 Interactive Demo: Specificity Visualizer
Let's see Specificity and the Cascade in real time. We have a target box below. Use the buttons to apply different CSS rules to it and see which one takes over!
Ready.
🏋️ Practice Exercises
Open your code editor (like VS Code), create an index.html and style.css file, and try these out!
Exercise 1: Class Action
In your HTML, create a paragraph with class="warning". In your CSS, use a class selector to change its text color to orange.
.warning { color: orange; }
Exercise 2: The Unique ID
In your HTML, create an <h1> with id="hero-title". In your CSS, use an ID selector to change its font size to 50px.
#hero-title { font-size: 50px; }
Exercise 3: Interactive Link
Create a normal <a> link. Use the :hover pseudo-class to change the link's color to green when the mouse touches it.
a:hover { color: green; }
🔥 Mini Challenge: The Nested Target
Create this exact HTML structure:
<div class="card">
<h2>Title 1</h2>
<p>Paragraph 1</p>
</div>
<h2>Title 2</h2>
<p>Paragraph 2</p>Your Goal: Write a single CSS rule that turns Paragraph 1 green, but leaves Paragraph 2 alone. You are NOT allowed to add any new classes or IDs to the HTML!
.card p { color: green; }
🏠 Homework Project
Create a fresh HTML page containing three different sections (using div tags).
- Give the first div an ID of
#header. - Give the other two divs a class of
.content-box. - Write CSS to style the
#headerdifferently from the.content-boxelements. - Add a button to the page and give it a cool
:hovereffect!
📝 Session Summary
- Element Selectors (
p) target all elements of a type (1 Specificity point). - Class Selectors (
.card) target specific groups of elements (10 Specificity points). - ID Selectors (
#main) target one unique element (100 Specificity points). - Combinators like the space (Descendant) and
>(Child) allow you to target elements based on where they live inside the HTML. - Pseudo-classes like
:hovertrigger styles based on user interactions. - The Cascade means that if specificities are perfectly tied, the rule written lowest down in your CSS file wins!