Introduction

docs.scrimba.com

Juno

Welcome to the CSS handbook! I'm Juno, and this is my favourite part of the web to teach. HTML gives you the structure of a page, and CSS is where it comes to life: colour, spacing, type, the whole look of the thing.

We'll start from the very first line of CSS and build up slowly, one idea at a time. If you can write a little HTML, you are ready for everything here.

Nothing is ever too basic to ask about, so go at your own pace and we'll get there together!

Juno

Welcome to the CSS handbook. I'm Ace, and I like to keep things practical. You can already structure a page, so here we focus on turning that structure into a layout you'd actually ship.

Every chapter is the concept, then what to do with it: read it, try it, build it. Layout is where CSS stops feeling like decoration and starts feeling like engineering, and that is the fun part.

Juno

Welcome to the CSS handbook. I'm Sol, and I've been styling pages long enough to have made every mistake once. These are the docs for people who want to know how CSS actually resolves what you write, not only which property nudges which pixel.

Expect the cascade explained properly, the layout edge cases, and the performance and accessibility details most tutorials skip. CSS looks forgiving, and the gap between styles that render and styles that hold up across screens is where the real work lives. Read closely and question all of it, including me.

This handbook is for anyone who can write a bit of HTML and wants their pages to look the way they picture them. CSS, which stands for Cascading Style Sheets, is the language that describes how a page looks: its colours, fonts, spacing, and the arrangement of everything on screen. HTML says what is on the page; CSS says how it should appear. A quick word on two terms you'll see throughout: a property is one thing you can style, like color or font-size, and a selector is how you point CSS at the elements you want to style. Every concept here is written out in full, with depth, examples, and something to search whenever you need a quick answer.

You do not need any design background to start. If you can put a heading and a paragraph on a page, you have enough to begin, and everything else is introduced as it comes up. CSS is the second language almost every web developer learns, right after HTML, because a page without it is nothing but unstyled text.

The handbook works its way from the ground up. You'll learn how to attach styles to a page and target the right elements, how the box model controls spacing and size, how to work with colour and type, and then how to lay a page out with flexbox and grid and make it respond to any screen. Each idea is small on its own, and they stack into interfaces you can actually ship.

The approach here is to explain what each piece of CSS does and why, not only what to type. Anyone can paste a property from an example and watch something shift on screen. The distance between that and building layouts that adapt, stay readable, and stay cheap to change is understanding how the browser decides what your styles mean when they overlap. That understanding is what outlasts any single project.

JunoCSS rewards playing around Here's a lovely thing about CSS: you see the result the instant you change something. Tweak a colour, nudge some spacing, and the page updates in front of you. That fast feedback makes it one of the best parts of the web to learn by experimenting, so try things as you read.

JunoCSS rewards playing around CSS gives you a tight feedback loop: change a value, see it render, adjust. Lean on that. The fastest way to build a real feel for layout is to open the browser tools, change properties live, and watch what moves. Everything in this handbook is meant to be tried, not only read.

JunoCSS rewards playing around The feedback loop is CSS's best teaching tool, so use the browser's dev tools as a laboratory: inspect the box model, toggle declarations, watch the cascade pick a winner in real time. Reading about specificity is one thing; watching a rule lose to another in the styles panel is what makes it stick.

Meet your guides

This handbook is hosted by three guides, and you pick which one shows you around. The material is the same for everyone; your guide sets the voice it is told in, and on the pages that adapt, how deep each section goes.

• Juno teaches the beginner track: warm and patient, plain analogies, nothing assumed.
• Ace teaches the intermediate track: practical and build-first, straight to what you actually do.
• Sol teaches the Deep Dive: the mechanism, the trade-offs, and the production details everyone else skips.

Switch guide any time from the picker at the top of any page, or open Preferences at the bottom right to change your guide, language, or font size.

When you're set, the handbook starts in earnest. The next chapter, What is CSS, covers what CSS really is, how it pairs with HTML, and the small vocabulary of rules, selectors, and properties that the whole rest of the track is built from.

Prefer to learn by building?Scrimba's free HTML and CSS course covers the same ground through five projects and 75+ interactive challenges.→