Modern CSS

Why this stage matters

CSS in 2026 is a different language from the one most tutorials teach. Container queries, :has(), nesting, cascade layers, view transitions, and anchor positioning now ship in every major browser. Developers who know modern CSS write less JavaScript and fewer bugs.

What to learn

1. Must know

   Cascade, Specificity & the Box Model

   Mark as done

   Why a style applies (or doesn't), how boxes are sized, and units like rem, em, %, vh, and dvh.

   You're done when

   • You can predict which rule wins without opening DevTools.
   • You know why box-sizing: border-box is the default in every reset.

   Resources

   • Learn CSS In Arabic (2021, before container queries and :has())Elzero Web School · Course · Arabic
   • web.dev — Learn CSSCourse
2. Must know

   Flexbox & Grid

   Mark as done

   The two layout systems you will use every day. Flexbox for one direction, Grid for two.

   You're done when

   • You can rebuild any common layout (navbar, card grid, holy-grail page) without searching.
   • You know when to choose Grid over Flexbox and can explain why.

   Resources

   • CSS-Tricks — A Complete Guide to FlexboxArticle
   • CSS-Tricks — A Complete Guide to CSS GridArticle
   • Flexbox FroggyPractice
   • Grid GardenPractice
3. Must know

   Responsive Design & Container Queries

   Mark as done

   Mobile-first media queries, fluid sizing with clamp(), responsive images, and container queries for components that adapt to their slot.

   You're done when

   • Your layouts work from 320px to wide desktop with no horizontal scroll.
   • You can make a card component that changes layout based on its container, not the viewport.

   Resources

   • MDN — Container queriesDocs
4. Must know

   Logical Properties & RTL

   Mark as done

   margin-inline-start instead of margin-left. Essential if you build for Arabic users, and good practice everywhere.

   You're done when

   • Switching dir="rtl" on your page does not break the layout.
   • You flip directional icons (arrows) in RTL and leave the rest alone.

   Resources

   • MDN — Logical properties and valuesDocs
   • RTL Styling 101Article
5. Must know

   Modern CSS Features

   Mark as done

   Custom properties, nesting, :has(), :is()/:where(), cascade layers, and color-mix(). These are safe to use in production today.

   You're done when

   • You theme a page (light/dark) using only custom properties.
   • You can replace a JavaScript class toggle with a :has() selector.
   • You check Baseline status before using a new feature.

   Resources

   • CSS Useful FeaturesElzero Web School · Course · Arabic
   • web.dev — BaselineDocs
   • Josh W. Comeau — CSS articlesArticle
6. Learn next

   Animations, View Transitions & Anchor Positioning

   Mark as done

   Transitions and keyframes, page and state transitions with the View Transitions API, scroll-driven animations, and anchoring tooltips without JavaScript. Always respect prefers-reduced-motion.

   You're done when

   • You animate only transform and opacity when you can, and know why.
   • Your animations turn off or shrink under prefers-reduced-motion.

   Resources

   • MDN — View Transition APIDocs
   • MDN — CSS anchor positioningDocs

Common mistakes

• Jumping to Tailwind before understanding the cascade. Tailwind is CSS; if you don't know CSS you can't debug it.
• Using fixed pixel widths and magic numbers instead of letting Flexbox and Grid do the work.
• Learning from 2015-era tutorials full of floats and clearfix hacks.