Modern CSS Authoring
4 lessonsAbout 24 minutesAdvanced
This part of the CSS Tutorial runs from Cascade Layers through to Generated Content. There are 4 lessons here, and working through them takes about 24 minutes at a steady pace.
It follows on from CSS Responsive Design, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1Cascade LayersOrganize style origins into an explicit priority order without inflating selector specificity. You will define a layer order, place first- and third-party styles, understand unlayered rules, and see why important declarations reverse the order.
- 2Nesting & ScopeKeep related selectors together with native nesting and limit selectors to a component subtree with @scope. The lesson compares native selector nesting with @scope, shows the parent selector, nested conditions, scope limits, and scoping proximity.
- 3Logical PropertiesWrite layouts that adapt to right-to-left text and vertical writing without duplicating physical left and right rules. It replaces physical edges with inline and block intent, introduces logical sizes and insets, and explains direction and vertical writing modes.
- 4Generated ContentAdd presentational markers and automatic numbering with pseudo-elements, content, and counters. You will create decorative pseudo-element content, automatic numbering, custom marker systems, and safer list markers with ::marker.