CSS
Browse 72 articles in this topic. View all topics.
- CSS Grid or Flexbox? Choose by layout direction
A practical way to choose between CSS Grid and Flexbox based on the layout you are building.
- Set up Tailwind CSS in Hugo
Set up Tailwind CSS in a Hugo project with the Tailwind CLI or a PostCSS build step.
- CSS :has() Can Select a Parent
CSS :has() selects an element based on its children or nearby siblings, with examples and historical browser-support context.
- Let Safari Draw the Apple Pay Button
Let Safari draw the correct Apple Pay button with CSS, including button types, styles, and an older-browser fallback.
- Invert Colours With One CSS Filter
Use CSS filter invert() on an element or page, and understand why partial inversion is not simply a lighter version.
- Make an Iframe Responsive With CSS
Keep videos, maps, and other iframes responsive with an aspect-ratio wrapper and a small amount of CSS.
- Nesting Media Queries in CSS
Combine multiple conditions by nesting CSS media queries at the root of a stylesheet.
- Mixing percentages and pixels with CSS calc()
Use CSS calc() to combine percentages and fixed lengths in practical, responsive layouts.
- Dark mode images without JavaScript
Serve separate light and dark images with the picture element and prefers-color-scheme.
- Styling list markers with CSS list-style
Understand the list-style shorthand and its type, position, and image values with a small CSS example.
- Working around the 100vh problem in Mobile Safari
Why 100vh can extend behind Safari's browser controls, plus several practical workarounds available in 2020.
- Dark mode for SVG favicon
Use CSS inside an SVG favicon to give it separate colours for light and dark mode.
- A one-line CSS layout debugger
Outline every element on a page in a different colour with one line in Chrome DevTools.
- Styling the hr element with CSS
Style the HTML hr element with a gradient, dashed line, or decorative glyph.
- Adding dark mode with prefers-color-scheme
Add a dark colour scheme that follows the visitor's system preference, using CSS and custom properties.
- Selecting empty elements with CSS :empty
Use the CSS :empty selector to find elements with no child elements or text.
- Changing the text cursor with CSS caret-color
Change the colour of the text insertion cursor with the CSS caret-color property.
- CSS variables make repeated values easier to manage
Reuse values, provide fallbacks, and update themes with CSS custom properties.
- text-decoration is a useful CSS shorthand
Set a text decoration's line, style, and colour with one CSS declaration.
- Centering flexbox items
Center flexbox items horizontally, vertically, or in both directions with two CSS properties.