Websites & Frontend

CSS: Style it

Colors, fonts and layout. Make it beautiful.

9 chapters · 34 lessons · free

Try a free lesson Create your free account

What you will learn

1. First Styles

Change colors and sizes, and learn how CSS handles mistakes.

Paint it Try it A CSS rule = a selector (h1) + curly braces + property: value; lines.
The stubborn heading Debug CSS ignores what it does not understand, silently. Typos are easy to miss.

2. Selectors

Pick exactly which elements to style, and find out why your style sometimes does not win.

Style only some elements Exercise A class in HTML is class="name"; in CSS it is .name. One class can style many elements.
The rule that matches nothing Debug When a style does nothing, check the selector first: dot for classes, hash for ids.
Classes and ids Exercise #id picks the one element with that id. .class picks every element with that class.
React to the mouse Exercise :hover is a pseudo-class: a rule that applies only in a certain situation. Great for buttons and links.
Why is my style ignored? Debug Specificity decides: id beats class beats tag. Prefer classes: they are easy to override.
Quick check Quiz Tag, .class, #id and :hover: four selectors that cover most of the styling you will do.

3. The Box Model

Every element is a box. Learn margin, padding and borders with an interactive diagram.

Space inside the box Exercise padding is space inside the box. The background color also covers the padding.
Space outside the box Exercise margin is space outside the box. Padding is inside, margin is outside.
A border around it Exercise border: width style color; is a shortcut for three properties at once.
Why is my box too wide? Exercise Most developers start every stylesheet with * { box-sizing: border-box; }, so widths mean what they say.
The number without a unit Debug Lengths need a unit. A property that does nothing often has an invalid value.
Quick check Quiz Content, padding, border, margin: the four layers of every box.

4. Colors, Fonts & Effects

Hex colors, Google Fonts, gradients and soft shadows.

Many ways to write a color Exercise Hex is the most common. In hsl, the first number is the hue (0 to 360), which makes it easy to pick a related shade.
Fonts and text Exercise A line-height of 1.5 to 1.7 makes paragraphs much easier to read. Web fonts (like Google Fonts) add more choices later.
A gradient background Exercise Change the angle (45deg, 180deg) to change the direction. You can add more colors, separated by commas.
Soft corners and shadows Exercise Rounded corners and soft shadows make a page feel modern. Keep shadows subtle.
Quick check Quiz A few well-chosen colors, one or two fonts and subtle shadows already look professional.

5. Layout

Line things up with Flexbox and Grid using small visual puzzles.

Side by side with Flexbox Exercise Flexbox is about a parent and its children. Turn it on with display: flex on the parent.
Puzzle: center it Exercise Centering in CSS: display: flex; justify-content: center; align-items: center;. Remember it, you will use it all the time.
Puzzle: a spread-out menu Exercise justify-content has many values: flex-start, center, flex-end, space-between, space-around. Try them all.
The layout that will not flex Debug When a layout does not respond, check the exact spelling of the value. Use the browser tools later to see ignored rules.
A grid of tiles Exercise 1fr means "one share of the free space". repeat(3, 1fr) is three equal columns. Use Flexbox for one direction, Grid for two.
Quick check Quiz Flexbox for rows or columns of things, Grid for tables of things. Together they cover almost every layout.

6. Responsive & Motion

Make pages work on phones, then make things move.

A style for small screens Exercise Media queries make one page fit every screen. Write the normal styles first, then adjust for small screens.
Smooth changes Exercise Put transition on the element itself. It then animates any change, in both directions.
Make it pulse Exercise @keyframes is the script, animation is the play button. Use motion gently: it should guide attention, not steal it.
Quick check Quiz Responsive design and gentle motion are what make a site feel finished.

7. Project: Style Your Page

Take your All About Me page from the HTML course and give it a professional look.

Stage 1: the basics Exercise Style the big parts first: the page, the header, the content column.
Stage 2: the cards Exercise Padding, radius and shadow: the recipe for a card. You will see it on nearly every website.
Stage 3: polish Exercise You used selectors, the box model, colors, layout, transitions and media queries together. That is real front-end work.

8. CSS exam

Ten questions about everything in this course. Pass with 8 right answers.

The CSS exam Exam Selectors, the box model, colors, layout, responsive design and motion: you can style anything.

9. Final project

Take a plain page and design it into a real site of your own: layout, cards, colors, hover and phones. Then send it for review.

Design a landing page Final project Layout, the box model, color, interaction and responsive design together make a professional page.

How the course works

You learn by doing: each lesson explains one idea, then you write real code in the editor and see the result right away. The first lesson is free to try without an account; sign up to save your progress and continue.

Try it
Change working code and see the result immediately.
Exercise
Complete a task. A checklist confirms each requirement as you type.
Debug
Fix code that is broken on purpose, and learn why it failed.
Quiz
Check your understanding at the end of a chapter.