What is CSS?
CSS stands for Cascading Style Sheets.
It is used to style and design web pages.
While HTML creates the structure of the webpage, CSS makes it look beautiful — by adding colors, fonts, sizes, layouts, and much more.
💡 Without CSS, every website would look like black text on a white background!
🔧 What Can CSS Do?
With CSS, you can:
- Change text color, size, and spacing
- Add background colors or images
- Design buttons, cards, layouts
- Make your site responsive (mobile friendly)
📄 Example: Basic CSS Code
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 30px;
}
p {
color: gray;
font-family: Arial;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>This code changes the heading color to blue and the paragraph font to Arial.
3 Ways to Apply CSS
| Method | Description | Example |
|---|---|---|
| Inline CSS | Directly in the tag | <h1 style="color: red;">Hi</h1> |
| Internal CSS | Inside <style> tag in <head> | (like the code above) |
| External CSS | Linked .css file | <link rel="stylesheet" href="style.css"> |
🟢 External CSS is the best method — clean and reusable.
🖥️ Create Your First CSS File
- Open Notepad or VS Code
- Paste this code:
body {
background-color: #f0f0f0;
font-family: sans-serif;
}
h1 {
color: green;
text-align: center;
}
p {
color: #333;
}- Save it as
style.css - Link it in your HTML:
<link rel="stylesheet" href="style.css">Done! Your page will now have your own custom styles!
Common CSS Properties for Beginners
| Property | What it Does |
|---|---|
color | Text color |
font-size | Size of text |
background | Background color or image |
margin | Space outside the element |
padding | Space inside the element |
border | Adds border around an element |
text-align | Aligns text (left, center, right) |
🔄 What Does “Cascading” Mean in CSS?
“Cascading” means that if two styles target the same element, the one that is more specific or written later will apply.
For example:
h1 {
color: red;
}
h1 {
color: blue;
}Result: Heading will be blue because it was defined last.
CSS is Everywhere!
Big websites like:
- YouTube
- Amazon
…all use CSS to control their layouts and styles.
Even dark mode, animations, and modern layouts — all are done using CSS.
💬 Ask Yourself:
- Can you change the background color of your page?
- Can you center a heading with CSS?
- Try styling a simple resume page from yesterday’s HTML file.
🧠 Summary
| You Learned Today |
|---|
| ✅ What CSS is |
| ✅ How to write CSS code |
| ✅ Inline, internal, and external |
| ✅ Common properties like color, font, padding |
| ✅ Created your first styled webpage |
💬 Comment Prompt
🎨 Try changing the heading color on your own webpage.
Post a screenshot or ask for help if you’re stuck — we’ll guide you!
📥 Join our Telegram group → @LearnNewThingsHub
