How to learn › Coding & Tech
Coding & Tech

How to Learn the CSS Properties

CSS styles every web page through properties — colour, spacing, layout, typography. A couple of dozen properties cover most of what you will ever write. Learn what each does and you can style anything. This deck teaches the essentials.

There are 13 cards in the deck below. You can read through them, practise them right here with the flip-card player, and then save the deck to study properly with spaced repetition — the method that makes them stick for months, not minutes.

QUESTION
Tap the card to reveal the answer

Why the essential CSS properties is hard to memorize (and the fix)

The classic confusion is margin vs padding (space outside vs inside the element) and the layout properties (display, position, flex). Anchoring each to what it visibly does fixes it.

The fix is active recall plus spaced repetition. Instead of re-reading the list (which feels productive but barely works), you test yourself — pull each answer out of memory — and you review each card on a schedule that stretches over time. Every time you successfully recall a fact, the memory gets stronger and the next review is pushed further out. That's how you go from "I saw it once" to "I just know it."

The fastest way to learn the essential CSS properties

  1. Break it into small batches. Learn the "box model" first (margin, padding, border, width), then colour/text, then layout (display, position, flex).
  2. Test, don't re-read. Look at the question, say the answer out loud before flipping the card. The little struggle to recall is what builds the memory — a smooth re-read does almost nothing.
  3. Review on a schedule. Spaced repetition shows you each card right before you'd forget it. Get one right and it comes back in a few days, then a week, then a month. Miss one and it comes back sooner.
  4. Keep sessions short and daily. Five to ten minutes a day beats a two-hour cram every time. Consistency is the whole game.
Memory trick: Margin is space OUTSIDE the box (pushing others away); padding is space INSIDE the box (around the content). "Padding is inside the padded room."

One fact per card. The box model is margin → border → padding → content, from outside in — the single most important CSS concept.

The full deck: the CSS Properties

Here's every card in the set. Practise them above, or save the deck and let spaced repetition schedule your reviews automatically.

PropertyWhat it controls
What does "color" control?The text colour
What does "background-color" control?The background colour of an element
What does "font-size" control?The size of the text
What does "margin" control?The space OUTSIDE an element
What does "padding" control?The space INSIDE an element (around content)
What does "border" control?The line around an element
What does "display" control?How an element is laid out (block, inline, flex, none)
What does "position" control?How an element is positioned (static, relative, absolute, fixed)
What does "width" control?The width of an element
What does "text-align" control?Horizontal alignment of text (left, center, right)
What does "font-weight" control?How bold the text is
What does "display: flex" enable?Flexbox — a flexible layout system for rows/columns
What is the CSS box model order (outside in)?Margin, border, padding, content

Save this deck and actually remember it

Create a free account, keep this 13-card deck, and we'll schedule every review at the perfect moment. First deck free forever — no credit card.

Study this deck free →

FAQ: learning the essential CSS properties

How long does it take to learn the essential CSS properties?

Most people can lock in the essential CSS properties within one to three weeks of short daily sessions. With spaced repetition doing 10–13 cards a day, you'll recognise them within days and recall them reliably within a couple of weeks.

What's the best way to memorize the essential CSS properties?

Active recall plus spaced repetition. Test yourself instead of re-reading, and review on a schedule that spaces the cards out over time. Flashcards are built for exactly this — which is why the deck above is the fastest path.

Is this deck free?

Yes. You can practise all 13 cards on this page for free with no account. Sign up (also free) to save the deck and let spaced repetition schedule your reviews so it sticks long-term.

More coding & tech guides

Learn the Python BasicsLearn the JavaScript Array MethodsLearn the Linux Terminal CommandsLearn the Data StructuresLearn Binary and HexadecimalLearn the Logic Gates

← All “how to learn” guides