Introduction to CSS

Updated Jun 2026

Prerequisites

We recommend completing these modules before starting this one.

You’ve written HTML and you know how to give a page structure — headings, paragraphs, images, links. But if you’ve seen what your HTML looks like in a browser without any styling, you know it’s not much to look at.

That’s where CSS comes in.

CSS is the language that controls how everything looks. Colours, fonts, spacing, layout, size — every visual decision on a webpage is made with CSS. The same HTML can look completely plain or completely polished depending on the CSS behind it.

It’s also where web development starts to feel creative. With HTML you’re building the skeleton. With CSS you’re giving it a personality.

In this module, you’ll learn how to write CSS, how to connect it to your HTML, and how to start making pages that actually look like something. You’ll understand why certain styles apply where they do, and you’ll build enough confidence to start experimenting on your own.

By the end, your pages will look the way you want them to look — not just the way the browser decides by default.

Units in this module

  1. 1. What is CSS?
  2. 2. How to Add CSS to HTML
  3. 3. CSS Selectors
  4. 4. Colors & Backgrounds
  5. 5. Typography
  6. 6. The Box Model
  7. 7. Width, Height & Overflow
  8. 8. Display & Visibility
  9. 9. Positioning
  10. 10. Flexbox
  11. 11. CSS Grid
  12. 12. Pseudo-classes & Pseudo-elements
  13. 13. CSS Variables
  14. 14. CSS Specificity & the Cascade
  15. 15. Your First Styled Webpage
  16. 16. Transitions & Animations
  17. 17. Responsive Design & Media Queries