CSS
275 bites tagged CSS — interview questions with model answers, and 60-second explainers.
CSS minmax(): Flexible Sizing for Grid Tracks
The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.
CSS Logical Properties: Layout That Speaks Every Language
Think 'start/end' not 'left/right'. CSS Logical Properties adapt your layout to the user's writing direction, from English to Arabic. Use `padding-inline-start` instead of `padding-left` for robust, internationalized sites.
CSS Grid-Template-Areas: Draw Your Layout in CSS
CSS `grid-template-areas` lets you visually "draw" your layout by naming cells in a string matrix. It's ideal for defining page structures like headers and sidebars. The biggest footgun: named areas must form a perfect rectangle, or the layout breaks.
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.
The `gap` Property: Spacing Without Margin Hacks
The `gap` property adds space *between* elements in a layout, not around them. Use it on Flexbox, Grid, or multi-column containers for clean, consistent gutters.
CSS Grid: Defining a 2D Layout Container
Turn an element into graph paper with `display: grid`, making its children items you can place in rows and columns. It's ideal for page-level layouts or complex components. The footgun: grid properties only apply to direct children, not nested elements.
CSS Flexbox: Mastering the Main and Cross Axis
Flexbox treats layout as a one-dimensional problem: either a row or a column. All alignment rules operate along a 'main axis' and a perpendicular 'cross axis'. Use it for navbars or card components.
backdrop-filter: Styling What's Behind an Element
Think of `backdrop-filter` as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.
CSS clip-path: Break Out of the Box
Use `clip-path` to create non-rectangular layouts by defining a visible region, like a cookie cutter for your elements. It's perfect for complex UI shapes like chevrons or circles without extra image files. The footgun: complex shapes have tricky syntax.
CSS Blend Modes: Photoshop Effects in the Browser
Think Photoshop layer effects, but in CSS. Blend modes define how overlapping element colors interact—multiplying or screening them for rich effects. Use them for text knockouts on images or complex background textures.
CSS Filter: Photoshop-like Effects in the Browser
The `filter` property brings Photoshop-like graphical effects directly into CSS. Use it for image adjustments like `blur()` or `contrast()`, or for complex shadows with `drop-shadow()`. The order of chained filters matters, as they are applied sequentially.
Variable Fonts: One File, Infinite Styles
Variable fonts pack an entire typeface's variations—from thin to bold, condensed to wide—into a single file. This avoids multiple HTTP requests for different font weights, giving you a continuous range of styles with CSS.
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.
border-radius: More Than Just Rounded Corners
The border-radius property rounds an element's corners, used for everything from buttons to circular avatars. The footgun is its shorthand syntax: one value is simple, but two, three, or four values follow specific clockwise rules that are easy to mix up.
CSS `background`: The All-in-One Shorthand
The CSS `background` property is a shortcut for styling an element's backdrop, combining color, image, and position in one line. Use it for most background tasks, from simple colors to complex layered images.
CSS `font`: The All-in-One Typography Shorthand
The `font` property is a single CSS declaration for setting multiple type styles at once, like size, weight, and family. Use it to define base typography for your site or components.
CSS Color Values: From Keywords to Functions
CSS offers multiple ways to define colors, from simple names like `red` to functions like `rgb()`. Use keywords for mockups, hex for design handoffs, and HSL for intuitive manipulation. The main footgun: colors can look different across uncalibrated devices.
CSS Containing Block: The Box That Defines Your Box
An element's size and position are calculated relative to its containing block, not always its direct parent. This determines how percentage widths are resolved and provides the reference for `position: absolute`.
Block Formatting Context: Taming Floats and Margins
A Block Formatting Context (BFC) is a mini-layout sandbox on your page, isolating its contents. Use it to contain child floats that would otherwise overflow their parent, or to stop adjacent elements from collapsing their margins.
CSS Stacking Contexts: The Z-Axis Explained
A CSS stacking context is like a self-contained group of layers. Elements inside only compete for z-index with siblings in that same group. They're created by properties like `position` with `z-index`, `opacity`, or `transform`.
Get CSS bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.