back to course
Lesson 01 / 961%· free preview
CSS Basics1/7
CSS Introduction
What CSS is, why it matters, and the three layers of the web.
What is CSS?
CSS = Cascading Style Sheets. It controls how HTML elements look — colour, layout, spacing, typography, animation.
| Layer | Job |
|---|---|
| HTML | Structure / content (the noun) |
| CSS | Presentation / style (the adjective) |
| JavaScript | Behaviour / logic (the verb) |
CSS turns plain HTML into beautiful, responsive UIs.
Your First Styled Page
html<!DOCTYPE html> <html> <head> <style> body { font-family: sans-serif; background: #0f172a; color: white; padding: 2rem; } h1 { color: #fbbf24; } </style> </head> <body> <h1>Hello, CSS!</h1> <p>This page is styled with CSS.</p> </body> </html>
Why CSS?
- Separation of concerns — content vs presentation.
- Cacheable — one CSS file styles 100 pages.
- Responsive — same HTML adapts to phone, tablet, desktop.
- Themable — switch dark/light by changing one file.
Common Mistakes
- Inline styles everywhere —
<p style="...">ages poorly. - Mixing structure + style — keep layers separate.
- Skipping the
<link>to external CSS — page renders unstyled.
Interview Questions
Practice Exercises
- Style a heading — Make
<h1>orange + 48 px. Hint:color,font-size. - Dark page —
body { background: black; color: white; }. Hint: 2 props. - Audit — Open any site, disable CSS in DevTools. Hint: dramatic.
💡 Think Like a Programmer: HTML structures, CSS styles, JS animates. Three layers, three jobs. Mix them and your code becomes spaghetti.
AI-powered recap
Quick recap quiz?
We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.
Ready to move on?
// example library
Want more hands-on snippets in CSS3?
Browse 1 runnable example · across 1 chapter · short, copy-paste-friendly · grouped by topic
// side-by-side reference
See this in other languages
Compare the same concept across C, C++, Java, and Python — one table, zero tab-switching.
// feedback.matters()
Did this lesson help you?