CSS Tutorial for Beginners

CSS (Cascading Style Sheets) is the language that controls how HTML looks: colours, fonts, spacing, layout and even animation. HTML says "this is a heading"; CSS says "make it large, dark blue and centred".

One CSS file can style an entire website. Change a colour in one place and every page updates. That's why every website, from a small personal blog to a large online shop, uses CSS.

This tutorial starts with the basics of writing rules and choosing colours, then builds up to real layouts with Flexbox and Grid, responsive pages that work on phones, and smooth animations. Every lesson includes examples you can edit and run, followed by exercises and a short quiz.

You should know the basics of HTML before starting. When you're done, JavaScript will make your pages interactive.

A short history of CSS

In the early web, pages were styled with HTML tags and attributes such as <font> and bgcolor. Every page carried its own styling, so changing a site's colours meant editing every file by hand. In 1994 Håkon Wium Lie, working with Tim Berners-Lee at CERN, proposed Cascading Style Sheets: a separate language that would describe how documents look, while HTML described what they contain. Bert Bos joined the work, and the W3C published CSS level 1 as a recommendation in 1996.

CSS 2 followed in 1998 with positioning and media types, and the long-lived CSS 2.1 tidied up the details. Browser support was patchy for years, and early web designers relied on tables and floats to build layouts. Instead of one giant CSS3 release, the language was then split into separate modules, such as Selectors, Colours and Backgrounds, that could each move forward at their own pace.

That modular approach brought the features modern CSS is known for. Flexbox became reliable in all major browsers in the mid 2010s, and CSS Grid arrived in 2017, finally giving the web a real two-dimensional layout system. Custom properties (CSS variables), clamp(), container queries, the :has() selector and native nesting have followed, which means many tasks that once needed JavaScript or a preprocessor can now be done in plain CSS.

How the course is organised

The 49 lessons are split into three stages. Basics (13 lessons) explains how CSS works and covers selectors, colours, backgrounds, borders, text, fonts, units and sizing. Intermediate (19 lessons) teaches the box model, display, positioning, Flexbox and Grid, then applies them to links, menus, forms, tables and images, and explains specificity and inheritance. Advanced (17 lessons) covers variables, media queries, responsive design, container queries, modern selectors, nesting, dark mode, transitions and animations.

The order matters. Layout makes much more sense once you understand the box model, and responsive design builds directly on Flexbox and Grid.

How to follow this course

Keep one small HTML page and style it as you go. Each time you learn something new, apply it to that page: a new colour scheme after the colours lesson, a centred card after Flexbox, a two-column layout after Grid. By the end of the course you'll have a single page that shows off everything you know.

Use your browser's developer tools from the start. Right-click any element, choose Inspect, and you can see every rule that applies to it, which ones were overridden and why. When a style doesn't do what you expect, the developer tools almost always show you the reason in seconds.

Thinking in CSS

Most CSS frustration comes from three ideas: the cascade, the box model and layout flow. The cascade decides which rule wins when several target the same element. The box model decides how much space an element really takes up. Layout flow decides where each element sits next to its neighbours. Once these three click, CSS stops feeling unpredictable, and the course returns to them again and again so they become second nature.

Good CSS is also about restraint. A small set of colours, a consistent spacing scale and a few reusable classes keep a site easy to change. The lessons on variables, specificity and inheritance show how professional teams keep large stylesheets under control.