🎨 Understanding How CSS Works – From Selectors to Properties
📅 October 25, 2025
✍️ By Evans
Hey, welcome back! 👋
After my first CSS lesson, I could already change colors and fonts — but I didn’t really understand how CSS worked behind the scenes. Why did some rules override others? Why did certain styles apply while others didn’t? 🤔
So I decided to go deeper — to learn how CSS truly works, from selectors that target elements to properties that control every tiny piece of design. This post is all about that "aha!" moment where everything started making sense. 💡
🧩 What CSS Actually Does
CSS is short for Cascading Style Sheets, and its job is to tell the browser how to display HTML elements.
When a browser loads a webpage, it:
- Reads the HTML (the content and structure).
- Loads the CSS (the design rules).
- Combines them together to create what you see.
So HTML says “what’s on the page”, and CSS says “how it should look.”
For example:
<p>Hello, world!</p>
Without CSS — plain text.
Add this CSS:
p {
color: purple;
font-size: 20px;
}
Boom! ✨ The browser paints your “Hello, world!” in purple, larger, and cleaner.
🎯 Selectors – Targeting the Right Elements
Selectors are like arrows pointing at the parts of your webpage you want to style.
Here are some I’ve learned:
-
Element Selector → targets all of that tag
p { color: blue; } -
Class Selector → targets any element with a class name (you use . before
the name)
.highlight { background-color: yellow; }HTML example:
<p class="highlight">This text has a yellow background!</p> -
ID Selector → targets one unique element (you use # before the name)
#main-title { color: darkred; }HTML example
<h1 id="main-title">Welcome to My Page</h1> -
Universal Selector → applies to everything
* { margin: 0; padding: 0; } -
Grouping Selector → style multiple tags at once
h1, h2, h3 { color: navy; }
At first, I mixed them up 😅 — I used a class selector with a # or forgot the dot. But after some practice, I started to see how flexible selectors make CSS.
⚙️ Properties and Values – The Building Blocks of Style
Once you’ve selected an element, you use properties to define what you want to change — and values to tell the browser how.
Example :
p {
color: green; /* property: color, value: green */
font-size: 18px; /* property: font-size, value: 18px */
}
Each declaration ends with a semicolon ;, and all of them are wrapped in curly braces { }.
It’s like giving the browser a list of instructions for that element.
🧱 How the Browser Reads CSS – The Cascade
The word cascading means that when two or more rules target the same element, CSS decides which one wins based on specificity and order.
Here’s what I learned about that:
- Inline styles (inside the HTML element) are strongest.
- IDs are stronger than classes.
- Classes are stronger than elements.
- If two rules have the same strength, the one that comes last wins.
Example:
p { color: blue; }
p { color: red; }
The text will be red, because that rule comes last.
And if you do this:
#intro { color: green; }
p { color: red; }
Once I understood this order, everything started to click! 🧠
🧪 Experiment I Tried
I created this small example to test everything I learned:
<!DOCTYPE html>
<html>
<head>
<style>
p { color: gray; }
.special { color: blue; }
#unique { color: red; }
</style>
</head>
<body>
<p>Hello world!</p>
<p class="special">I’m styled with a class!</p>
<p id="unique">I have a unique ID style!</p>
</body>
</html>
When I opened it, I could clearly see:
- The first line was gray
- The second was blue
- The last one was red
That experiment helped me finally see how selectors, properties, and the cascade worked together.
⚠️ Mistakes I Made at First
- ❌ Forgot the semicolon ; after a property.
- ❌ Missed curly braces {} and broke the whole rule.
- ❌ Used color:red without a space (which still works but looks messy).
- ❌ Tried to style something but used the wrong selector (like .button instead of #button).
Now I always double-check my punctuation and indentation — clean CSS saves time later!
💬 Pro Tip I Learned
Use developer tools in your browser (right-click → “Inspect”) to test CSS live. You can see exactly which rule is applied to an element, what’s being overridden, and even change colors on the fly. 🔍
It’s one of the best ways to learn by doing.
🎨 How I See CSS Now
CSS started to make sense once I understood that it’s like a set of layers:
- HTML provides the content.
- CSS paints the style over it.
- The browser applies the rules based on priority.
It’s both logic and art — and that’s what I love about it.
🎯 Final Thoughts
Learning how CSS works — from selectors to properties — gave me real control over my designs. I no longer feel like I’m guessing or copying random snippets online. I know why something looks the way it does.
Next up, I’ll explore different ways to add CSS to a webpage — inline, internal, and external — and when to use each.
Stay tuned, and happy coding!😊
— Evans 💻