🎨 Days 1–6 – CSS Foundations · Day 01
Day 1: What is CSS? Syntax, Linking & Basic Selectors
⏱ 70 min📶 Beginner🎯 100% self-study
Day 1 / 20
✅ Today you will learn
- What CSS does and why every website needs it
- The anatomy of a CSS rule
- Inline, internal and external CSS – and which one professionals use
- Element, class, ID, group and universal selectors
- Your first styled page for a real client
🏢 In the real world
Mr. Vikas Sharma liked the HTML website you built for Sharma Sweets, but he says: “It works, but it looks like a 1995 government notice. My competitor’s site looks like a brand.” The content is right – what is missing is design. That design layer is CSS, and over the next 20 days you will become the person who can deliver it.
HTML is the structure, CSS is the look
Without CSS
- Black Times New Roman text
- Blue underlined links
- Everything stacked top to bottom
- Same look on phone and laptop
With CSS
- Brand colours and fonts
- Buttons, cards, shadows
- Side-by-side layouts (Flexbox, Grid)
- Adapts to every screen (responsive)
HTML + CSS
<style>
.offer {
background: #fff7ed;
border: 2px solid #f59e0b;
border-radius: 12px;
padding: 16px;
max-width: 320px;
}
.offer h2 { color: #c2410c; margin: 0 0 6px; }
.offer a {
display: inline-block;
background: #e34f26;
color: white;
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
}
</style>
<div class="offer">
<h2>Diwali Special 🪔</h2>
<p>Flat 10% off on gift boxes above ₹2,000.</p>
<a href="#">Order now</a>
</div>Anatomy of a CSS rule
CSS
selector { /* WHO to style */
property: value; /* WHAT to change : HOW */
property: value; /* each line ends with ; */
}
h1 {
color: #c2410c;
font-size: 32px;
}| Part | Example | Meaning |
|---|---|---|
| Selector | h1 | Which elements the rule targets |
| Declaration block | { … } | All the styles for that selector |
| Property | color | What you want to change |
| Value | #c2410c | The new setting |
| Comment | /* … */ | Notes for humans – ignored by the browser |
⚠️ The most common beginner bug
A missing semicolon or brace silently breaks the next line. If one style “does not work”, check the line above it first. VS Code underlines such mistakes in red.
Three places to write CSS
| Method | How | Use it for |
|---|---|---|
| Inline | <p style="color:red"> | Quick tests, e-mail templates only |
| Internal | <style> … </style> in the head | Single-page demos (like the examples in this course) |
| External ⭐ | <link rel="stylesheet" href="css/style.css"> | Every real website – one file styles all pages and is cached by the browser |
Folder + HTML – linking an external stylesheet
sharma-sweets/
├── index.html
├── menu.html
└── css/
└── style.css
<!-- in the <head> of EVERY page -->
<link rel="stylesheet" href="css/style.css">💡 How this course shows examples
To keep each example in one box, we put the CSS inside <style>. In your projects, move it into css/style.css – the CSS itself is exactly the same.
The five basic selectors
HTML + CSS
<style>
p { color: #374151; } /* element: every <p> */
.price { color: #16a34a; font-weight: bold; } /* class: reusable */
#todays-special { background: #fef3c7; padding: 6px; } /* ID: one */
h3, h4 { color: #c2410c; } /* group: same style, many */
* { margin-top: 4px; } /* universal: everything */
</style>
<h3>Kaju Katli</h3>
<p>Cashew fudge with silver vark. <span class="price">₹900/kg</span></p>
<h4>Ghewar</h4>
<p id="todays-special">Today’s special – fresh malai ghewar!</p>
<p>Besan ladoo <span class="price">₹500/kg</span></p>| Selector | Syntax | Matches | Rule of thumb |
|---|---|---|---|
| Element | p | All <p> | Base styles for tags |
| Class | .price | Every element with class="price" | ⭐ Use for almost all styling |
| ID | #todays-special | The one element with that id | Rarely for styling – too strong, not reusable |
| Group | h3, h4 | Both | Avoid repeating the same rules |
| Universal | * | Everything | Only for resets (Day 4) |
HTML + CSS
<style>
.badge {
display: inline-block;
padding: 2px 10px;
border-radius: 99px;
font-size: 13px;
color: white;
background: #6b7280;
}
.badge.veg { background: #16a34a; } /* both classes */
.badge.bestseller { background: #e34f26; }
</style>
<p>Kaju Katli <span class="badge veg">Pure Veg</span> <span class="badge bestseller">Bestseller</span></p>
<p>Soan Papdi <span class="badge veg">Pure Veg</span></p>
<p>Gift Box <span class="badge">New</span></p>See and edit CSS live in DevTools
- 1Right-click any element → Inspect
- 2The Styles pane shows every rule that applies, file name and line number
- 3Click a value (e.g. a colour) and change it – the page updates instantly
- 4Crossed-out lines = overridden by another rule (Day 5 explains why)
- 5Copy your final values back into style.css – DevTools changes are lost on refresh
🏅 Job skills unlocked today
✔ Explain what CSS does and how a rule is built✔ Link an external stylesheet to every page✔ Use element, class, ID, group and universal selectors✔ Inspect and edit CSS in DevTools
Practice tasks
🏋️ Practice – do it yourself
Task 1: Style a shop notice: light yellow background, orange border, rounded corners and a dark-orange heading.
Show solution
Task 2: Create classes .veg (green) and .new (blue) badges and use both on one item.
Task 3: Open any website you like, Inspect its main heading and change its colour and font-size in DevTools. Take a screenshot.
Quick quiz
🧠 Quick Quiz – test yourself
1. CSS controls…
HTML = structure, CSS = presentation.
2. Which is the best way for a 10-page site?
One cached file for all pages.
3. Class selector syntax?
Dot for class, hash for ID.
4. How many elements should share one id?
IDs are unique.
5. A rule stopped working after you edited the line above. Likely cause?
Syntax errors break what follows.
Interview corner
💼 Interview Corner
What are the three ways to add CSS and when would you use each?
Inline (style attribute) – only for one-off tests or HTML e-mails; internal (<style>) – single-page demos or critical CSS; external (<link>) – the standard: reusable, cacheable, separates concerns.
Why prefer classes over IDs for styling?
Classes are reusable and have lower specificity, so they are easy to override and combine. IDs are unique and very specific, which leads to hard-to-override CSS.
Summary
- CSS = presentation; a rule is selector { property: value; }.
- Use an external css/style.css linked from every page.
- Classes are the workhorse; IDs are for unique things.
- DevTools → Styles lets you test CSS live.
➡️ Next
Day 2: colours (hex, rgb, hsl), units (px, rem, %, vw), backgrounds and gradients – build a festive hero banner.
Frequently Asked Questions
Do I need to know HTML first?
Yes, the basics. Our 15-day HTML course is the perfect start – this CSS course styles the website you built there.
Which editor should I use?
VS Code (free) with the Live Server extension, so the page refreshes every time you save the CSS.
