Skip to content
Gwecode.
courses build components
sign up free log in
~ / courses / css / css-basics
Beginner · CSS

CSS for Beginners

Learn CSS from scratch and make the website you are building look great. Colors, fonts, spacing, flexbox, grid, hover effects, and responsive design, all explained in plain English for absolute beginners.

CSS is the language that turns plain HTML into a website people love to look at. In this course you will learn how CSS connects to your HTML, how to pick colors and fonts, how spacing really works with the box model, and how to arrange things on the page with flexbox and grid. You will add hover effects, make your pages look good on phones, and finish by styling a real card and a full page. Every lesson uses plain English and small, friendly examples, so you can apply each idea to the website you are building right away.

Beginner 12 lessons ~97 min css CSS
Start the course
01

Your First Styles

Meet CSS, learn how it connects to your HTML, and start choosing your own colors and sizes.

3 lessons
  1. 1 What CSS Is The language that makes your website look great 6 min →
  2. 2 Selectors: Picking What to Style Element, class, and id selectors 7 min →
  3. 3 Colors and Units How to say exactly what color and what size 7 min →
02

Text, Boxes, and Backgrounds

Make your words beautiful and readable, then learn the box model, the single most important idea in CSS.

3 lessons
  1. 4 Text and Fonts Typography that makes people want to read 7 min →
  2. 5 The Box Model Margin, border, padding: how spacing really works 9 min →
  3. 6 Backgrounds and Borders Color, rounded corners, and soft shadows 8 min →
03

Laying Things Out

Arrange elements side by side and in grids with flexbox and grid, then add life with hover effects.

3 lessons
  1. 7 Display and Flexbox Basics Putting things side by side, finally 9 min →
  2. 8 A Taste of Grid Rows and columns without the headache 7 min →
  3. 9 Hover States and Transitions Make your site respond to the visitor 8 min →
04

Make It Shine

Make your site look great on phones, then style a real card and a complete page from top to bottom.

3 lessons
  1. 10 Responsive Basics Looking great on phones with max-width and media queries 8 min →
  2. 11 Styling a Real Card Everything you know, combined into one beautiful component 10 min →
  3. 12 Styling a Simple Page From blank stylesheet to a site you are proud of 11 min →
</>
Gwecode

Free, friendly programming lessons for absolute beginners and beyond.

Courses Start here About
© 2026 Gwecode. Always free to learn.
playground
codeCtrl+Enter to run
output
Run your code to see the result.