CSS
Modern CSS techniques for better layouts, responsive interfaces, cleaner stylesheets, and solving everyday front-end development challenges.
Browse 87 articles in this topic. View all topics.
- 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.
- 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 hr element with solid, dashed, gradient, and ornamental dividers, while keeping semantic breaks, spacing, colours, and dark mode consistent.
- 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.
- Use autocomplete=new-password for new password fields
Tell browsers that a password field is for choosing a new password rather than entering an existing one.
- Using CSS without getting in the way of accessibility
Practical CSS choices for readable text, visible focus, reduced motion, and layouts that survive zoom.
- Adding Outlook-only CSS to an HTML email
Load Outlook-specific email styles with Microsoft conditional comments.
- Using small caps with CSS font-variant
Use the CSS font-variant property to enable typographic variants such as small caps.
- A simple print style sheet for your website
Add print-specific CSS with a separate stylesheet or an @media print rule.