Launch essay

Stop learning properties and start learning the model beneath them.

Most people who struggle with styling have not learned too little. They have learned a long list of things without the small set of ideas that holds the list together.

There is a particular feeling that arrives early when you learn to style web pages, and it is worth naming, because naming it is the first step out of it. You write something. Nothing changes. You write something else. Something changes, but not the thing you meant. You add another line, and now two things are wrong. Within an hour you are not designing anything, you are negotiating with a system whose reasoning you cannot see. Almost everyone goes through this. Very few people are told that the problem is not their memory, their talent or their patience. The problem is that they have been handed a vocabulary without a grammar.

A reference will tell you what each individual instruction does. It will not tell you why the browser chose one instruction over another, why a space appeared where you did not ask for one, or why a design that looked perfect on your screen came apart the moment someone typed a longer name into it. Those answers do not live in any single entry in the list. They live in the model: a small number of ideas about how style is chosen, how space is measured, how arrangement is described, and how a design behaves when reality pushes on it. Learn those, and the list becomes readable.

The Cascade

Your rule is not broken, it simply lost the argument.

When styling appears to be ignored, something else almost always won a contest you did not know was happening.

Specificity is the usual culprit, and it is countable.

The tie break that decides most contests is a simple measure of how precisely a rule identifies its target.

Inheritance means some things travel downwards on their own.

Certain qualities pass from a container to everything inside it, and knowing which saves enormous repetition.

The Box

Everything is a box, and every box has four rings.

Content, padding, border and margin are separate layers, and confusing them is the most common source of unexpected space.

Why width does not always mean what you expect it to.

The oldest surprise in styling is that stating a size may describe only part of the box.

Collapsing margins, the space that is not the sum of parts.

Outer space between stacked elements merges rather than adds, which is intentional and initially baffling.

Layout as Intent

Describe the relationship, do not place the pieces.

The shift from positioning things to stating how they relate is the largest single step in learning layout.

One dimension or two, and how to tell which you need.

Arrangement comes in two flavours, and choosing correctly makes most layout problems straightforward.

Alignment along the axis and alignment across it.

Two separate questions govern every arrangement, and separating them removes most of the confusion.

Surviving Contact

Your layout is finished only once bad content has been through.

A design that works with the content you invented has not been tested at all.

Text wraps, and everything you build sits on top of that.

The single most under appreciated fact in page design is that text decides its own height.

Colour that works in more than one setting.

Naming your colours once, in one place, is what makes a second theme possible at all.

About CSS Child

CSS Child is a magazine about understanding how styling actually works rather than memorising what each instruction is called. The name is borrowed from the idea of a child element, a thing that sits inside another and inherits from it, which turns out to be a fair description of how the whole subject behaves: almost nothing stands alone, and most of what confuses people comes from relationships they had not realised were there. Every article here is written for an adult who is learning this properly for the first time, or relearning it after years of copying fragments that worked without ever knowing why they worked.

There is a rule about this publication that will not be relaxed: nothing here contains any code, any names of instructions, any values or any syntax at all. That is not a gimmick, it is the entire method. Reference material is abundant, free, accurate and always more current than any magazine can be, and duplicating it would be a poor use of your time and ours. What is genuinely scarce is a clear explanation of the model underneath, the reasoning that makes the reference readable. If you understand which rule wins and why, what the four rings of a box are, when to describe a relationship rather than a position, and what bad content does to good intentions, you can open any reference and use it confidently.

The tone throughout is patient and it is not condescending, and we consider those two things compatible rather than opposed. Being told plainly how something works, from the beginning, with the surprising parts flagged as surprising rather than glossed over, is a form of respect. Being flattered that you probably already know is not. If a paragraph here explains something you find obvious, skip it; if it explains something nobody ever told you, which happens more often than people admit, then it has done its job. Read in any order. Come back when a page misbehaves. The model is small, and once it is yours it does not leave.