What’s a good way to learn CSS design from the ground up?

Try treating the design as a small system rather than styling each page from scratch. Pick a typeface, set a readable base size and line height, then define a modest scale for headings and other text. Do the same for spacing, colors, and common controls. Those choices can live in CSS variables or your framework’s theme, with component-specific styles added only when needed.

There isn’t one universally correct font weight or app width. Start with a comfortable reading measure and a layout that suits the content, then check it at narrow and wide viewport sizes. A 12-column grid and Swiss-style layouts are useful search terms for learning common composition patterns, not rules you have to follow.

For the visual side, study examples and then rebuild them. Look closely at why a page feels orderly: alignment, spacing, contrast, type hierarchy, and how much content sits in each row. Learning Grid and Flexbox through interactive exercises can make the mechanics click, but design references help with deciding what to build.

Keep the first pass simple. Use a small set of text sizes and spacing values, and avoid adding a separate rule for every element until you see a real need.

I’d start with the content, not the font. Sketch the main screens and identify what needs attention first, like a page title, league standings, or a primary action. Then choose typography and layout that make that hierarchy obvious. A font can be technically available but still be a poor fit, so check legibility and how it renders at the actual sizes you’ll use.

Make broad defaults global, such as page background, base text, and link behavior. Keep the details of a particular card or table close to that component. That gives you consistency without turning the global stylesheet into a pile of exceptions.

One practical route is to pick a couple of solid references and recreate one screen without copying its code. Then compare your spacing, type scale, and alignment against the reference. You’ll learn more from that loop than from trying to discover a perfect set of design rules before you start.

Also test the layout on a phone early. A desktop grid that looks tidy can become cramped fast when the content has to wrap.