Intermediate everything in CSS & Design Systems, page 8
CSS Grid: Placing Items on the Grid
Think of CSS Grid as a coordinate system for your layout. You can explicitly place items using line numbers or named areas, or let the browser auto-place them. This is key for page scaffolds and galleries. Footgun: Grid lines are numbered from 1, not 0.
Stacking Multiple Backgrounds in CSS
Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.
CSS text-shadow: Adding Depth and Legibility to Text
The text-shadow property adds depth to text, like casting a shadow from a light source. Use it for subtle emphasis, letterpress effects, or to make text readable on busy backgrounds. The footgun: not setting a color, as browser defaults vary widely.
CSS box-shadow: Creating Depth and Elevation
box-shadow fakes depth by casting a shadow from an element's frame. It's used to elevate UI like cards and modals or create inner shadows for pressed states. The footgun: omitting the color causes it to inherit the parent's text color, not black.
CSS Gradients: Dynamic Images from Code
Think of CSS gradients as dynamic images generated by the browser, creating color transitions without a separate file. Use them for backgrounds and buttons. The default direction is top-to-bottom, but a 0deg angle is counterintuitively bottom-to-top.
@font-face: Ship Custom Fonts with Your CSS
@font-face lets you use fonts not installed on a user's machine by telling the browser where to download them. It's how you get custom brand fonts on a website, but be wary of the performance hit from downloading large font files.
CSS Margin Collapsing: The Largest Margin Wins
Instead of adding up, vertical margins on adjacent block elements 'collapse' into one, taking the size of the largest margin. This explains why two paragraphs with margin: 1rem don't have 2rem of space between them. The footgun is assuming it's a bug.
CSS Positioning: Taking Elements Out of Normal Flow
CSS position lets you override the default document flow. Think of it as telling an element to ignore its neighbors and listen to top/left coordinates instead. Use it for overlays, modals, and sticky headers.
CSS Pseudo-classes: Style Elements Based on State
CSS pseudo-classes style elements based on their state, not just their HTML structure. Use them for interactive states like :hover, form validation like :invalid, or structural position like :first-child.
CSS box-sizing: Predictable Element Sizing
The box-sizing property controls if padding and borders are added outside an element's width or carved out from inside. Using border-box makes layouts predictable, ensuring a width: 100px box is exactly 100px wide.
CSS 'display': How Elements Occupy Space
The CSS display property defines an element's layout role: does it demand its own line (block) or share space (inline)? It's essential for everything from text flow to complex layouts with flex and grid.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles