Introduction to CSS

CSS — Cascading Style Sheets — is the language that controls how web pages look: colours, fonts, spacing, layout, animation, and how a design adapts from phones to wide monitors. HTML says what the content is; CSS says how it should be presented.

Before and after

Here's the same HTML with and without CSS. Edit the CSS on the left and watch the result update:

Try it yourself
Result

Delete all the CSS and you'll see plain black text on white — the browser's default styles. Every visual decision you see on the web, from a button's colour to a page's grid, is CSS.

What CSS does

  • Visual style — colours, fonts, borders, shadows, backgrounds.
  • Spacing — margins, padding, line height.
  • Layout — arranging elements in rows, columns and grids with Flexbox and Grid.
  • Responsiveness — adapting the design to every screen size.
  • Motion — transitions and animations.
  • States — how things look when hovered, focused, checked or invalid.

Why keep style separate from HTML

In the early web, appearance was mixed into HTML with tags like <font>. Separating it into CSS means:

  • One stylesheet can restyle every page of a site — change a colour once, and it changes everywhere.
  • The same HTML can be presented differently on screens, in print, or in dark mode.
  • HTML stays clean and meaningful, which helps accessibility and search engines.

The "cascading" in CSS

Many rules can apply to the same element — from the browser's defaults, from your stylesheets, from the user's settings. The cascade is the set of rules that decides which one wins. Understanding it (lesson 07) is the key to CSS that behaves predictably.

Modern CSS is powerful

CSS has grown enormously. Things that once needed JavaScript or image tricks are now a few lines of CSS: layout grids, variables, smooth scrolling, dark mode, container-aware components, parent selectors (:has()), nesting and scroll-driven animation. This course covers the modern language — the techniques used in real projects today.

How this course works

  • Each Try it yourself editor has CSS you can edit and a live result below it.
  • Every example has been checked with a CSS linter and an HTML validator.
  • You'll finish by building a complete, responsive landing page in lesson 50.

You should know basic HTML before starting. If not, take the HTML course first.

Try it yourself

Change the colours, the font size or the border radius:

Try it yourself
Result
PreviousCourse Home