HTML gives a page its structure. CSS is what makes that structure look good. With CSS you change colors, spacing, fonts, sizes, layouts and much more, and you do it with short rules that you can read like sentences.
This course starts with your first rule and ends with small, complete projects. Each lesson is short, explains one idea with a small example, shows what you should see in the browser, and mentions the mistakes people usually make.
What you will learn
- How a CSS rule is written and how the browser picks which rule wins. Start with What Is CSS?.
- How to choose elements with selectors, and how to work with colors, backgrounds, borders and text.
- How every element becomes a box, in The CSS Box Model, and how to use that for spacing.
- How to lay out a page with Flexbox and Grid.
- How to make pages work on any screen with responsive design.
- How to add polish with transitions, transforms and animations.
- How to keep CSS tidy with variables, specificity and good habits.
- How to put it together in seven practical projects.
What you need to know first
You should be comfortable with basic HTML: what an element and an attribute are, and how headings, paragraphs, lists, links and div elements look in the code. If not, work through the HTML course first, or keep it open alongside this one. You do not need any programming experience.
How to use this course
- Go in order. Later lessons use earlier ones. Use the chapter list on the left (or the course button on a phone) to move around.
- Press Try it. Most examples have a Try it button. It opens the code in an editor beside a live result. Change a value, press Run and watch what happens. That is the fastest way to learn what each property does.
- Narrow the result. For responsive lessons, drag the bottom-right corner of the Result panel to make it narrower and see media queries react.
- Do the exercises. Exercises, challenges and debugging tasks are marked in the chapter list. Try them before opening the solution.
- Use the browser tools. Developer tools let you see and change the CSS of any page, and they are the best debugging tool you have.
- Come back as a reference. When you forget a property, the quick reference points you to the lesson that explains it.
lightbulb
Start here
New to CSS? Begin with What Is CSS?. Already know the basics? Skim the chapter list and jump to the chapter you need.
Frequently Asked Questions
CSS Frequently Asked Questions
Is CSS hard to learn? expand_more
The basics are not. You can style a page after your first lesson. What takes practice is layout, and knowing why one rule wins over another. Both get easier when you build small things and look at them in the browser developer tools.
Do I need to know HTML before learning CSS? expand_more
Yes, a little. CSS styles HTML elements, so you need to know what a heading, a paragraph, a list, a link and a div are. If you are new to HTML, take the HTML course first or alongside this one.
Should I learn Flexbox or Grid first? expand_more
Flexbox first. It is simpler and covers rows and columns of items, like navigation bars and card rows. Grid is for layouts with rows and columns together. This course teaches them in that order.
Where should I write my CSS? expand_more
In a separate .css file linked from your HTML. The lessons use a style element so you can see HTML and CSS side by side, but real sites use external stylesheets. The Getting Started chapter explains all three ways.
Do I need to install anything? expand_more
No. A web browser and a plain text editor are enough, and every example in the course runs in the Try it editor on the page.