Introduction to CSS – Bringing Life to HTML
After spending the last ten days learning HTML and building my first portfolio website, I noticed something important.
The website worked.
The structure was correct.
The content was there.
But...
It didn't look very appealing.
That's when I realized the role of CSS.
If HTML is responsible for the structure of a webpage, CSS is responsible for its appearance.
Today marks the beginning of my CSS journey.
What is CSS?
CSS stands for Cascading Style Sheets.
It is a stylesheet language used to describe how HTML elements should look.
Instead of creating content, CSS controls:
Colors
Fonts
Spacing
Layout
Animations
Responsiveness
Overall appearance
Without CSS, every website would look plain and almost identical.
Why Do We Need CSS?
Imagine building a house.
HTML creates the walls, doors, and rooms.
CSS paints the walls, arranges the furniture, adds lighting, and gives the house its personality.
That's exactly how websites work.
HTML provides the structure.
CSS makes it beautiful.
JavaScript makes it interactive.
Together, these three technologies form the foundation of modern web development.
How CSS Works
CSS follows a simple pattern:
selector {
property: value;
}
Example:
h1 {
color: blue;
}
Here:
h1is the selector.coloris the property.blueis the value.
This rule tells the browser:
"Display every
<h1>element in blue."
The Three Ways to Add CSS
There are three methods to apply CSS to an HTML document.
1. Inline CSS
Inline CSS is written directly inside an HTML element using the style attribute.
Example:
<h1 style="color: blue;">Hello World</h1>
Advantages
Quick for testing.
Useful for applying a style to a single element.
Disadvantages
Difficult to maintain.
Not reusable.
Makes HTML cluttered.
2. Internal CSS
Internal CSS is written inside a <style> tag within the <head> section.
Example:
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
Advantages
Keeps styles in one place.
Good for small projects.
Disadvantages
- Cannot be reused across multiple pages.
3. External CSS
External CSS stores styles in a separate .css file.
Example:
<link rel="stylesheet" href="style.css">
Inside style.css
h1 {
color: blue;
}
Advantages
Reusable across multiple pages.
Easy to maintain.
Keeps HTML clean.
Best practice for real-world projects.
Which Method Should You Use?
| Method | Best For |
|---|---|
| Inline CSS | Quick testing or one-off styles |
| Internal CSS | Small single-page projects |
| External CSS | Professional websites and large projects |
In modern web development, External CSS is the preferred approach.
Why is CSS Called "Cascading"?
The word Cascading refers to how CSS resolves conflicts when multiple styles target the same element.
The browser follows a priority system to decide which style should be applied.
You'll explore this in detail when learning Specificity and the Cascade.
Best Practices
✔ Keep HTML focused on structure.
✔ Keep CSS focused on presentation.
✔ Use External CSS whenever possible.
✔ Write clean, readable CSS.
✔ Reuse styles instead of repeating code.
My Biggest Takeaway
Until today, I focused entirely on building the structure of webpages with HTML.
Now I understand that structure alone isn't enough.
CSS is what transforms a plain document into a visually appealing website.
Learning CSS feels like moving from building a house to designing its interior.
I'm excited to see my HTML projects come to life as I continue learning layouts, colors, typography, and responsive design.
Tomorrow, I'll explore CSS Selectors, which allow us to target and style specific HTML elements.
See you on Day 22 of my #100DaysOfCode journey! 🚀