Chapter 2: HTML and CSS Introduction
HTML and CSS Introduction
We’ll go slow, use very simple analogies, write real code together, and by the end you’ll have your first beautiful mini-page running in the browser.
1. What is HTML? (The skeleton of every website)
HTML = HyperText Markup Language
- It is not a programming language (no logic, no if-else, no calculations here)
- It is a markup language → you use tags to mark/label/describe what each piece of content is
Think of building a house:
- HTML = bricks, cement, pillars, rooms, doors, windows (the structure + content)
- Without HTML → no house exists
Real meaning:
- HyperText = you can jump from one page to another using links (hyperlinks)
- Markup = you put tags around normal text to give it meaning
Examples of what HTML tells the browser:
- This is the main title → <h1>
- This is normal paragraph text → <p>
- This is a clickable link → <a>
- This is a photo → <img>
- This is a list → <ul> + <li>
2. What is CSS? (The interior designer + painter)
CSS = Cascading Style Sheets
- CSS decides how everything should look
- Color, size, spacing, fonts, shadows, animations, layout (mobile vs desktop), etc.
House analogy again:
- HTML = structure of the house
- CSS = paint on walls, tiles on floor, sofa placement, curtains, lighting, garden look
Without CSS → website looks like plain black text on white background (very 1995 feeling 😅)
3. How do HTML + CSS work together?
Browser reads HTML first → understands structure & content Then reads CSS → applies styles to that structure
Three ways to add CSS (we’ll use #2 and #3 today):
- Inline CSS → directly inside HTML tag (not recommended for big projects)
- Internal CSS → inside <style> tag in <head> (good for small pages)
- External CSS → separate style.css file (best for real websites — clean & reusable)
4. Let’s write your first HTML + CSS page right now
Create two files in the same folder (use VS Code, Notepad++, or even basic Notepad):
- index.html
- style.css
index.html (copy-paste exactly)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Webliance - My First HTML & CSS Page</title> <!-- This line connects our CSS file --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- This is the visible content area --> <header> <h1>Welcome to My Learning Journey!</h1> <p class="intro">Hyderabad boy learning web development in 2026 🚀</p> </header> <main> <section class="about"> <h2>About This Page</h2> <p>This is a super simple page to understand HTML + CSS basics.</p> <ul> <li>HTML gives structure & meaning</li> <li>CSS makes it beautiful</li> <li>Both are needed for every website</li> </ul> </section> <section class="fun-fact"> <h3>Fun Fact</h3> <blockquote> "The best error message is the one that never shows up." — Some senior developer who suffered a lot 😅 </blockquote> </section> </main> <footer> <p>Created by Webliance • February 2026 • ☕ Chai powered</p> </footer> </body> </html> |
style.css (copy-paste this — modern clean look)
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
/* Reset some default browser styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; background-color: #f8fafc; color: #1e293b; line-height: 1.6; padding: 20px; } /* Header styling */ header { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; border-radius: 0 0 20px 20px; } h1 { font-size: 3rem; margin-bottom: 10px; } .intro { font-size: 1.3rem; opacity: 0.95; } /* Sections */ section { max-width: 800px; margin: 40px auto; padding: 30px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } h2 { color: #4f46e5; margin-bottom: 15px; } h3 { color: #7c3aed; } ul { list-style: none; padding-left: 0; } ul li { margin: 12px 0; padding-left: 25px; position: relative; } ul li::before { content: "➜"; position: absolute; left: 0; color: #6366f1; } /* Blockquote fun styling */ blockquote { background: #f3e8ff; border-left: 5px solid #a78bfa; padding: 20px; margin: 20px 0; font-style: italic; color: #4c1d95; } /* Footer */ footer { text-align: center; margin-top: 60px; padding: 20px; color: #64748b; font-size: 0.95rem; } |
Now do this:
- Save both files
- Double-click index.html (or drag into Chrome/Edge/Firefox)
- You should see a nice colorful page!
Refresh after any change — magic happens instantly.
Quick Cheat-sheet Table (keep this handy)
| Thing | HTML does this | CSS controls this | Example code |
|---|---|---|---|
| Main big title | <h1> … </h1> | color, size, center, shadow | h1 { color: navy; text-align: center; } |
| Normal text | <p> … </p> | font-size, line-height, color | p { font-size: 18px; } |
| Link | <a href=”…”>Google</a> | color, underline on hover | a:hover { color: red; } |
| Image | <img src=”…” alt=”…”> | size, border, rounded corners | img { border-radius: 50%; } |
| Background | — | background-color / gradient | body { background: #f0f9ff; } |
| Spacing | — | margin / padding | section { margin: 40px; padding: 30px; } |
Your 5-minute homework (do it now!)
- Change <h1>Welcome to My Learning Journey!</h1> to your real name + something funny
- Add one more <li> inside the <ul> (example: <li>Future goal: Build full website for my portfolio</li>)
- In style.css → change header gradient to linear-gradient(135deg, #10b981, #34d399) (emerald green vibe)
- Add this after the quote:
HTML
|
0 1 2 3 4 5 6 |
<img src="https://images.unsplash.com/photo-1516321310764-9f3c9619d7d7?w=800" alt="Code on laptop screen" width="380"> |
Then in CSS:
CSS
|
0 1 2 3 4 5 6 7 8 9 10 11 |
img { display: block; margin: 30px auto; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.12); } |
Refresh — boom! You just customized your first webpage.
How does it feel? This is literally how every frontend developer started — with exactly this kind of tiny beautiful page.
Next time you want:
- “teach me CSS Flexbox like I’m 12”
- “add mobile responsive design”
- “make project cards”
- “explain HTML forms”
Just say the word — we’ll keep building step-by-step.
Keep going, champ! You’re already ahead of 90% of beginners who only watch videos but never type code. Chai + code = best combo ☕💻
See you in the next lesson! 🚀
