🎨 Introduction to CSS – My First Step Into Styling Web Pages
📅 October 18, 2025
✍️ By Evans
Hey, welcome back! 👋
After spending some time learning HTML and understanding how to build the structure of a webpage, I felt something was missing. My pages worked — but they looked plain and dull. That’s when I discovered CSS (Cascading Style Sheets) — the secret sauce that turns a basic web page into something beautiful and professional.
CSS allows you to add colors, spacing, fonts, and layouts that make your website come alive. It’s the language of style on the web, and this post marks my very first step into it. 🌈
💡 What is CSS?
CSS stands for Cascading Style Sheets, and it’s used to describe how HTML elements should look on the screen. Think of HTML as the skeleton of a webpage, and CSS as the clothing, colors, and design that make it stand out.
For example, without CSS, your page might just look like black text on a white background. But with CSS, you can make it colorful, aligned, styled, and visually attractive.
🧱 Basic CSS Example
Here’s my very first CSS rule:
h1 {
color: blue;
font-size: 30px;
text-align: center;
}
What’s happening here?
- h1 is the selector — it targets the element I want to style.
- Inside the curly braces {} are declarations — the styles I want to apply.
- Each declaration has a property (like color) and a value (like blue).
So this simple rule tells the browser: “Hey, make all my <h1> headings blue, bigger, and centered.”
🧪 My First Try
When I first added CSS to my HTML page, I used the <style> tag right inside the <head> section like this:
<!DOCTYPE html>
<html>
<head>
<title>My First CSS Page</title>
<style>
body {
background-color: #f0f8ff;
font-family: Arial, sans-serif;
}
h1 {
color: #3333ff;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>Now my page looks a bit more alive!</p>
</body>
</html>
Your HTML:
<head>
<link rel="stylesheet" href="style.css">
</head>
When I opened the page, I actually smiled. 😄
The background had a soft blue tint, and my heading finally looked neat. It was the first time my page looked like a real website!
📚 Why “Cascading”?
The “Cascading” in CSS means that styles are applied in a specific order of priority. If two rules affect the same element, the one that comes last (or is more specific) takes effect.
For example:
p {
color: green;
}
#intro {
color: red;
}
If your paragraph has the id="intro", it’ll be red, not green — because an ID selector is more specific than a general p selector.
Understanding this “cascade” concept was confusing at first, but it’s what makes CSS powerful and flexible.
⚠️ Mistakes I Made at First
When I started, I made some funny but common mistakes:
- ❌ Wrote colour instead of color — CSS only understands American spelling!
- ❌ Forgot to close curly braces { } and wondered why nothing worked.
- ❌ Applied styles to the wrong selector (like h2 when my tag was h1).
- ❌ Didn’t save my file or refresh the browser (classic beginner move 😅).
Each mistake taught me how careful CSS can be — one missing semicolon can break everything.
🎨 How CSS Changed My Web Pages
Before CSS, all my pages looked the same — black text, no layout, and no personality.
After learning even basic CSS, I could:
- Add beautiful colors 🌈
- Use different fonts 🖋️
- Space out sections properly 📏
- Make buttons stand out 🔘
It felt like I had unlocked a design toolbox that gave my imagination freedom.
💬 Pro Tip I Learned Early
Always keep your styles organized!
At first, I used the <style> tag directly in HTML. But soon, I learned that separating CSS into its own .css file keeps things cleaner and easier to manage — especially when your website grows.
Example:
<link rel="stylesheet" href="style.css">
That single line connects your HTML with your external CSS file.
🎯 Final Thoughts
Learning CSS was a big step for me — it felt like going from black-and-white to full color. 🌟
I started understanding how small style changes could completely transform a webpage’s mood and personality.
Next up, I’ll dive deeper into how CSS actually works — from selectors to properties, and how they control the design of each HTML element.
Thanks for reading,
Catch you in the next one!
— Evans 💻✨