Imagine someone builds your house perfectly…
Strong walls, solid roof, great structure.
But they forget to paint it.
Does the house look good?
No.
Because paint is what gives a house its beauty and personality.
👉 CSS does the same thing for a website.
Without CSS, a website is just plain text and structure.
With CSS, it becomes colorful, attractive, and user-friendly.
In this blog, we’ll cover:
- What is CSS?
- Element Selector
- Class Selector
- ID Selector
- Group Selector
- Descendant Selector
- Basic CSS Selector Priority (high-level)
What is CSS?
CSS stands for Cascading Style Sheets.
It is used to design and style web pages.
Let’s break the name down:
1. Cascading
“Cascading” means flowing step-by-step.
CSS applies styles in a specific order, and only where needed.
This allows styles to override each other based on priority.
2. Style
Style refers to how something looks —
colors, fonts, spacing, layout, and overall appearance.
3. Sheet
A sheet is simply a file where you write all your styles
(usually a .css file).
👉 CSS allows you to create beautiful and professional websites.
Without CSS, even a site like Amazon would look plain and boring.
CSS Selectors
CSS selectors are used to target HTML elements and apply styles to them.
Let’s explore the most common ones.
1. Element Selector
The element selector targets HTML elements by their tag name.
Example HTML:
<p>This is a paragraph</p>
CSS:
p {
color: red;
}
This will change the color of all <p> elements to red.
2. Class Selector
The class selector uses the class attribute to style specific elements.
HTML:
<p class="text-red">Great blog, like please!</p>
CSS:
.text-red {
color: red;
}
📌 A class selector starts with a dot (.)
You can reuse the same class on multiple elements — very useful!
3. ID Selector
The ID selector targets a single unique element.
HTML:
<p id="first">Like it at least</p>
CSS:
#first {
color: red;
}
📌 An ID selector starts with a hash (#)
📌 An ID must be unique
📌 An ID cannot start with a number
4. Group Selector
Sometimes multiple elements need the same style.
Instead of writing CSS again and again, we use group selectors.
Without Group Selector:
h1 {
font-family: Verdana, sans-serif;
}
h2 {
font-family: Verdana, sans-serif;
}
With Group Selector:
h1, h2 {
font-family: Verdana, sans-serif;
}
✅ Cleaner code
✅ Less repetition
5. Descendant Selector
The descendant selector selects elements inside another element.
HTML:
<div>
<p>Great blog</p>
</div>
CSS:
div p {
color: red;
}
This targets only <p> elements inside a <div>.
📌 Commonly used for parent-child styling.
Basic CSS Selector Priority (Specificity)
When multiple styles apply to the same element, priority matters.
From lowest to highest priority:
1️⃣ Element Selector
p { }
div { }
⬇️
2️⃣ Class Selector
.box { }
⬇️
3️⃣ ID Selector
#header { }
⬇️
4️⃣ Inline Style (Highest Priority)
<p style="color: red;">This is a paragraph</p>
📌 Inline styles override all other selectors.
Final Thoughts
CSS is what turns a simple webpage into a beautiful experience.
HTML builds the structure — CSS gives it life.
If HTML is the house,
👉 CSS is the paint, furniture, and decoration.
Happy styling! 🚀
Top comments (0)