CSS styling essentials

What you'll learn

• How display values shape a page before flex or grid get involved
• Setting good typography defaults that the whole site inherits
• Loading custom fonts without hurting page speed
• Layering backgrounds, gradients, borders, and shadows
• Building decorative bits with ::before and ::after
• Stopping image layout shift with aspect-ratio and object-fit
• Taming overflow and styling scroll containers
• Styling form controls with appearance, accent-color, and validation pseudos

1. 01
   Display values

   block, inline, inline-block, none, contents, flow-root — the defaults that flex and grid override.
   13 min
2. 02
   Typography essentials

   Font family, weight, line height, tracking, alignment — the dials that decide how a page reads.
   17 min
3. 03
   Web fonts

   Loading custom fonts with @font-face and font-display, the perf cost, and how to keep it small.
   14 min
4. 04
   Backgrounds and gradients

   The background shorthand, layered backgrounds, and linear, radial, and conic gradients.
   16 min
5. 05
   Borders, radii, and shadows

   Rounded corners, layered box-shadows, and the difference between border and outline.
   15 min
6. 06
   Pseudo-elements

   ::before, ::after, ::selection, ::placeholder, ::marker — and the content property that makes them appear.
   15 min
7. 07
   Images and media

   aspect-ratio, object-fit, object-position — stop layout shift without writing any JavaScript.
   13 min
8. 08
   Overflow and scrolling

   Scroll containers, scroll snap, scrollbar styling, scroll-margin — and when overflow surprises you.
   16 min
9. 09
   Styling form controls

   appearance, accent-color, validation pseudos, field-sizing — the modern way to make inputs match the brand.
   16 min