What is CSS?
CSS stands for Cascading Style Sheets.
CSS is used to design and style web pages.
HTML creates the structure of the webpage, while CSS makes it beautiful.
Think of it like this:
- HTML = Skeleton of the body
- CSS = Clothes, colors, hairstyle, beauty
Without CSS, websites look plain and boring.
Example Without CSS
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
Output:
- Black text
- White background
- Simple default style
Now with CSS:
<h1 style="color: blue;">Welcome to My Website</h1>
<p style="font-size: 20px;">This is my first webpage.</p>
Now the webpage looks attractive.
Real-Life Logic
Imagine you are building a house.
- HTML builds the walls, doors, rooms.
- CSS paints the walls, decorates rooms, changes lighting and design.
A strong building without decoration looks incomplete.
Similarly, HTML without CSS looks dull.
Why the Word “Cascading”?
The word Cascading means styles can flow from multiple places.
CSS follows priority rules.
Example:
<p style="color:red;">Hello</p>
If another CSS rule says blue, the browser decides which style has higher priority.
This system is called the Cascade.
History of CSS
Before CSS, web pages were designed only using HTML.
People used tags like:
<font color="red">Hello</font>
This created many problems:
- Code became very long
- Difficult to manage
- Repeating same design again and again
- Slow editing
So, CSS was introduced.
Timeline of CSS
CSS1 – 1996
The first version.
Features:
- Text colors
- Fonts
- Backgrounds
- Basic styling
CSS2 – 1998
Added advanced features:
- Positioning
- Borders
- Media types
- Better layouts
CSS3 – Modern CSS
CSS3 divided CSS into modules.
New features:
- Animations
- Flexbox
- Grid
- Shadows
- Rounded corners
- Responsive design
Today almost all modern websites use CSS3.
Real Example of CSS Evolution
Old websites in the 1990s looked very simple.
Modern websites like:
- YouTube
- Amazon
use advanced CSS for:
- Animations
- Responsive layouts
- Dark mode
- Hover effects
- Mobile-friendly design
Benefits of CSS
CSS gives many advantages.
1. Separates Design from Structure
HTML handles content.
CSS handles design.
Example
HTML:
<p>Hello Students</p>
CSS:
p{
color: green;
font-size: 25px;
}
This keeps code clean.
Logic
Imagine a school:
- Teachers teach subjects
- Interior designers decorate classrooms
Both have separate jobs.
Similarly:
- HTML = Content
- CSS = Presentation
2. Saves Time
One CSS file can style many pages.
Real Example
Suppose a company website has 100 pages.
Without CSS:
- You must change color manually on every page.
With CSS:
- Change only one CSS file.
Huge time saving.
3. Makes Websites Attractive
CSS allows:
- Colors
- Animations
- Layouts
- Effects
- Responsive design
Example:
button{
background-color: blue;
color: white;
border-radius: 10px;
}
Now the button looks modern.
4. Better User Experience
Good design improves readability.
Users stay longer on beautiful websites.
Real Example
Compare:
- A plain black-white webpage
- A modern styled webpage
People naturally prefer attractive designs.
5. Responsive Design
CSS helps websites work on:
- Mobile
- Tablet
- Laptop
- TV screens
Example
@media screen and (max-width:600px){
body{
background-color: lightblue;
}
}
This changes design for small screens.
6. Faster Website Maintenance
Large companies maintain thousands of pages.
CSS helps developers:
- Update quickly
- Maintain branding
- Keep consistency
How CSS Works with HTML
CSS works together with HTML.
HTML creates elements.
CSS selects those elements and styles them.
Step-by-Step Logic
Step 1 — HTML Creates Content
<h1>Welcome</h1>
Browser shows plain heading.
Step 2 — CSS Selects Element
h1{
color:red;
}
CSS selects the <h1> tag.
Step 3 — Browser Applies Style
Result:
- Heading becomes red.
Full Example
HTML File
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello Students</h1>
<p>Welcome to CSS class.</p>
</body>
</html>
CSS File
h1{
color: blue;
text-align: center;
}
p{
font-size: 20px;
color: green;
}
Final Output
- Blue centered heading
- Green paragraph
- Better appearance
Types of CSS
CSS can be added in 3 ways.
1. Inline CSS
Written inside HTML tag.
<p style="color:red;">Hello</p>
Advantage
Quick styling.
Disadvantage
Not good for large websites.
2. Internal CSS
Written inside <style> tag.
<style>
p{
color:blue;
}
</style>
Used for single-page styling.
3. External CSS
Written in separate .css file.
<link rel="stylesheet" href="style.css">
Best method for professional websites.
Real-World Example
Imagine a school uniform.
Instead of giving separate dress instructions daily, the school creates one standard uniform rule.
Similarly:
- External CSS controls styling for the entire website from one place.
How Browser Understands CSS
When browser opens webpage:
- Reads HTML
- Finds CSS
- Applies styles
- Displays final design
This process is called Rendering.
Simple Visual Understanding
HTML → Structure
CSS → Design
Browser → Final Webpage
Important CSS Terms
| Term | Meaning |
|---|---|
| Selector | Selects HTML element |
| Property | What to change |
| Value | How to change |
| Rule Set | Complete CSS rule |
Example
h1{
color: blue;
}
| Part | Meaning |
|---|---|
| h1 | Selector |
| color | Property |
| blue | Value |
Learning Outcome
After completing this topic, students will understand:
✅ What CSS is
✅ Why CSS was created
✅ Difference between HTML and CSS
✅ Benefits of CSS
✅ How CSS styles webpages
✅ Basic working process of web design
✅ Separation of structure and presentation
Final Concept Summary
Golden Rule of Web Design
HTML gives meaning.
CSS gives beauty.
Or simply:
HTML = Body
CSS = Style
A webpage without CSS is like:
- A masjid without decoration
- A book without formatting
- A garden without flowers
CSS brings life, elegance, and visual harmony to the web.
