Learn CSS From Scratch: Free Beginner Course Guide

Learn CSS From Scratch is a free beginner course that teaches CSS, the language that styles web pages, one small idea at a time. It is for anyone who has started with HTML and now wants to control how a page looks: colours, fonts, spacing, borders and backgrounds, and above all how to target exactly the elements you want with selectors.

The course has 41 short videos, about 3 hours in total, on YouTube. Most videos are 2 to 9 minutes, so you can learn in small sessions. This guide explains what each part covers and gives you a simple study plan. The full video list is on the Learn CSS From Scratch course page.

Who this course is for

This is a Beginner course. It suits you if:

• You know basic HTML tags and want to make your pages look good.
• You are a student or career changer starting web development.
• You have copied CSS from the internet before but do not really understand why some rules win and others are ignored.
• You want a clear grounding in selectors before you move on to JavaScript or a framework.

If you have not learned HTML yet, take Learn HTML5 From Scratch first. CSS makes much more sense once you know the structure it is styling.

What you will learn

The 41 videos fall into six themes.

1. Getting started. How To Run, What Is CSS and Browser Default Style show how to try CSS on your own computer and why a page already has some styling before you write a single rule.

2. CSS syntax and adding styles. CSS Syntax explains how a rule is written. Ways To Add StyleSheet To HTML Document: Inline And Embedded Styling and Understanding External Stylesheet cover the three ways to attach CSS to a page, and Comments In CSS shows how to keep your code readable.

3. Targeting elements. Targeting Elements and Targeting Classes And IDS teach the basic selectors you will use every day. This is the heart of CSS: if you cannot select the right element, nothing else works.

4. How the browser decides. CSS Cascade And Conflicts, CSS Inheritance Explained and CSS Selector Specificity Demystified explain why one rule overrides another. These three videos solve the most common beginner frustration, “why is my style not applying?”

5. Advanced selectors. A long run of videos covers targeting multiple elements, descendant, child and adjacent selectors, attribute selectors, pseudo selectors, pseudo-classes such as hover, active and visited, first and last child, the universal selector, first and last of type, nth-child and combining selectors. These give you precise control without adding extra classes everywhere.

6. Text, spacing and boxes. Font size, font family, text decoration, font weight, text transform, text colour, link styling, letter spacing and line height, and paragraph spacing make text readable. Then Ultimate Guide to CSS Box Model, margin, padding, borders, block-level elements and CSS Backgrounds Explained show how every element takes up space on the page.

How the course is organised

There are 41 videos in a single playlist, in learning order:

• Videos 1 to 8: overview, setup, what CSS is, syntax, the three ways to add styles and comments.
• Videos 9 to 13: basic targeting, then the cascade, inheritance and specificity.
• Videos 14 to 26: a short update for beginners, then all the advanced selectors and pseudo-classes.
• Videos 27 to 35: fonts and text styling.
• Videos 36 to 41: the box model, margin, padding, borders, block-level elements and backgrounds.

Every video is a hands-on demonstration rather than a lecture, so you can follow along in your own editor and browser.

How to study it step by step

1. Set up first. Watch the overview and How To Run, then create one HTML file and one CSS file you will use for the whole course.
2. Type every example. After each video, write the same CSS yourself and refresh the browser. Change a value and see what happens.
3. Spend extra time on the cascade block (cascade, inheritance and specificity). Write two rules that conflict on purpose and predict which one wins before you check.
4. Make a selector cheat sheet while you watch videos 14 to 26: one line per selector with a tiny example.
5. Style a real page during the text videos: pick a simple article and set its font, size, weight, colour, line height and link styles.
6. Use the box model videos to fix spacing. Add margin, padding and borders to your page until the layout looks clean.
7. Finish with backgrounds, then rebuild your page from a blank CSS file without looking at the videos to see what you remember.

You can also watch the full YouTube playlist. When you are done, the Modern JavaScript Refresher Course is a good next step to make your pages interactive.

Frequently asked questions

Is the Learn CSS From Scratch course free?

Yes. All 41 videos are free on YouTube, and you can follow them in order from the course page or the playlist.

How long does it take to learn CSS with this course?

The videos add up to about 3 hours. If you type every example and practise on your own page, plan for one to two weeks of short daily sessions.

Do I need to know HTML first?

It helps a lot. CSS styles HTML elements, so you should know basic tags such as headings, paragraphs, links and lists before you start.

Does this course cover Flexbox or Grid?

The video list does not include separate Flexbox or Grid lessons. It focuses on syntax, selectors, the cascade, text styling, the box model, block-level elements and backgrounds, which are the foundations those layout tools build on.