« Previous
Next »
CSS HOME
Welcome to the iwantcoding.com CSS Tutorial. The sidebar walks the language top-to-bottom — from the cascade and selectors through to grid, animations, and the modern reference.
Recommended starting path
- Introduction — what CSS is and where it fits.
- Syntax — selectors, declarations, blocks.
- How To — inline / internal / external styles.
- Box Model + box-sizing.
- Flexbox & Grid — modern layout.
- Media Queries + RWD intro.
- CSS Variables + Specificity.
- Capstone — build a small site with what you learned.
What's on every lesson page
| Section | What it does |
|---|---|
| Lesson body | Explanation with figures or tables. |
| Example | A runnable snippet. Click Try it Yourself » to edit it live. |
| Exercise | Fill-in-the-blank to lock in the concept. |
| Test yourself | 3-question quiz. |
| Mark complete | Updates the sidebar progress bar. |
Tip: Follow the syllabus on a first pass. Once you've finished the foundations, the rest of the topics are useful in any order.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS HOME</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Open the runnable example by clicking the green button labelled…
Click:
The CTA on every lesson page.
Test yourself
« Previous
Next »
Discussion
Loading…