# 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:
```css
selector {
property: value;
}
```
Example:
```css
h1 {
color: blue;
}
```
Here:
* `h1` is the **selector**.
* `color` is the **property**.
* `blue` is the **value**.
This rule tells the browser:
> "Display every `
` 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:
```html
Hello World
```
### 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 `
```
### 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:
```html
```
Inside **style.css**
```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! 🚀