CSS Techniques for Better Websites

Modern CSS offers a powerful and rapidly evolving set of tools that can significantly improve your web design skills. This comprehensive guide explores the most important CSS techniques available in 2026, helping you create outstanding, user-friendly websites that perform well across all devices. Good CSS is also fundamental to mobile-first design and overall user experience.

CSS Grid: The Layout Master

CSS Grid is a two-dimensional layout system that gives precise control over both rows and columns, making complex layouts far simpler to build and maintain.

Creating Grid Layouts

To use CSS Grid, start by setting up a grid container:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

This creates a three-column grid with equal-width columns and a 20-pixel gap between items. Note: gap is now preferred over the older grid-gap shorthand.

Grid Areas

Grid areas allow you to name sections of your layout for more readable, maintainable code:

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Responsive Grid Layouts

CSS Grid excels at creating intrinsically responsive layouts that need no media queries — see also our Tailwind CSS Grid cheat sheet for utility-class equivalents:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

Columns automatically adjust based on available space — no breakpoints needed.

CSS Subgrid

Subgrid is one of the most significant recent additions to CSS Grid, now with broad browser support. It allows nested grids to inherit the parent grid’s track sizes, enabling complex aligned layouts across components:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  display: grid;
  grid-column: span 1;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

This ensures card headers, bodies, and footers align across all cards in a row — something previously impossible without JavaScript.

Alignment and Justification

CSS Grid provides powerful alignment properties:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: space-between;
}

.item {
  justify-self: end;
  align-self: start;
}

Flexbox: Flexible Layouts Made Easy

Flexbox handles one-dimensional layouts and is particularly useful for creating flexible components within a broader grid structure.

Flex Direction and Alignment

A practical example — a flexible navigation bar:

.nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.nav-item {
  margin: 0 10px;
}

Flex Item Properties

Flexbox gives fine-grained control over individual items:

.item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

• flex-grow determines how much an item grows relative to others
• flex-shrink determines how much an item shrinks relative to others
• flex-basis sets the initial size of the item before remaining space is distributed

Combining Flexbox and Grid

The most powerful layouts combine both:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

.sidebar {
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex-wrap: wrap;
}

Container Queries: Component-Level Responsiveness

Container queries are one of the most impactful additions to CSS in recent years. Unlike media queries — which respond to the viewport — container queries let a component respond to the size of its own container. This makes genuinely reusable, context-aware components possible for the first time.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

A card component can now display horizontally when it has space and stack vertically when it doesn’t — regardless of the viewport width. This is a fundamental shift in how responsive components are built.

CSS Transitions: Smooth State Changes

CSS transitions add polish by animating CSS property changes between states.

Basic Transitions

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #2980b9;
}

This creates a smooth colour shift that enhances the user experience without JavaScript.

Multiple Property Transitions

.card {
  width: 300px;
  height: 200px;
  background-color: #ecf0f1;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
}

.card:hover {
  width: 320px;
  height: 220px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Transition Timing Functions

.element {
  transition-property: opacity;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

Common timing functions:

• linear: constant speed throughout
• ease-in: slow start, accelerates
• ease-out: fast start, decelerates
• ease-in-out: slow at both ends, faster in the middle

Use cubic-bezier() for completely custom timing curves.

CSS Animations: Bringing Websites to Life

CSS animations allow complex, multi-step animations that enhance visual appeal without JavaScript.

Keyframe Animations

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.pulse-button {
  animation: pulse 2s infinite;
}

Complex Animations

@keyframes fancy-spin {
  0% { 
    transform: rotate(0deg);
    background-color: red;
    border-radius: 0%;
  }
  50% { 
    transform: rotate(180deg);
    background-color: blue;
    border-radius: 50%;
  }
  100% { 
    transform: rotate(360deg);
    background-color: red;
    border-radius: 0%;
  }
}

.fancy-element {
  width: 100px;
  height: 100px;
  animation: fancy-spin 4s ease-in-out infinite;
}

Animation Properties

• animation-name: specifies the @keyframes rule to use
• animation-duration: sets how long one cycle takes
• animation-timing-function: controls progression speed
• animation-delay: delays the start of the animation
• animation-iteration-count: sets how many times it repeats
• animation-direction: controls play direction (normal, reverse, alternate)
• animation-fill-mode: specifies how styles apply before and after execution

Media Queries and the Modern Responsive Toolkit

Media queries remain essential for responsive web design, but the modern toolkit goes well beyond simple breakpoints.

Basic Media Query Structure

@media screen and (max-width: 600px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Breakpoints and Layout Changes

/* Base styles */
.container {
  width: 1200px;
  margin: 0 auto;
}

/* Tablet */
@media screen and (max-width: 1024px) {
  .container {
    width: 90%;
  }
}

/* Mobile */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 20px;
  }
}

Fluid Typography with clamp()

A modern alternative to multiple breakpoints for type sizing — clamp() scales font size smoothly between a minimum and maximum value:

h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 3.5rem);
}

p {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
}

This eliminates the need for multiple media queries just to manage type scale — a significant reduction in code complexity.

Device-Specific Media Queries

/* High DPI screens */
@media screen and (min-resolution: 2dppx) {
  .high-res-image {
    background-image: url('image@2x.webp');
  }
}

/* Landscape orientation */
@media screen and (orientation: landscape) {
  .sidebar {
    float: left;
    width: 30%;
  }
}

CSS Variables: Dynamic Styling

CSS custom properties (variables) enable more maintainable, flexible, and theme-ready stylesheets. You can also add custom CSS in WordPress without editing theme files directly.

Defining and Using Variables

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --font-size-base: 1rem;
  --spacing-md: 1.5rem;
}

.button {
  background-color: var(--primary-color);
  color: white;
  font-size: var(--font-size-base);
  padding: var(--spacing-md);
}

Scoped Variables for Theming

.dark-theme {
  --text-color: white;
  --background-color: #1a1a1a;
}

.light-theme {
  --text-color: #1a1a1a;
  --background-color: white;
}

.themed-element {
  color: var(--text-color);
  background-color: var(--background-color);
}

Dynamic Variable Updates with JavaScript

// Change the primary colour dynamically
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

// Read the current value of a CSS variable
const currentFontSize = getComputedStyle(document.documentElement)
  .getPropertyValue('--font-size-base');

This enables dynamic theming, user customisation, and runtime adjustments based on user interaction — all without touching JavaScript-managed inline styles.

Advanced Selectors and Pseudo-Classes

Modern CSS includes a range of powerful selectors that allow precise element targeting with minimal markup.

The :has() Selector — A Game Changer

The :has() selector — now supported across all modern browsers — effectively acts as a “parent selector”, something CSS lacked for decades:

/* Style a card differently if it contains an image */
.card:has(img) {
  padding: 0;
}

/* Style a form label when its input is focused */
label:has(+ input:focus) {
  color: #3498db;
  font-weight: bold;
}

/* Style a list item that contains a nested list */
li:has(ul) {
  font-weight: bold;
}

:has() removes the need for JavaScript in many cases where you previously had to add classes dynamically to parent elements.

Attribute Selectors

/* Required form inputs */
input[required] {
  border-color: red;
}

/* Secure links */
a[href^="https"] {
  color: green;
}

/* Images with "icon" in the alt text */
img[alt*="icon"] {
  width: 20px;
  height: 20px;
}

Structural Pseudo-Classes

/* First paragraph in its parent */
p:first-child {
  font-weight: bold;
}

/* Every odd table row */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

/* Last list item */
li:last-child {
  border-bottom: none;
}

User Action Pseudo-Classes

a:hover {
  text-decoration: underline;
}

input:focus {
  outline: 2px solid blue;
}

input[type="checkbox"]:checked + label {
  color: green;
}

CSS Transforms: Manipulating Elements

CSS transforms modify the coordinate space of an element, enabling rotation, scaling, skewing, and translation without affecting document flow.

2D Transforms

.rotate { transform: rotate(45deg); }
.scale  { transform: scale(1.5); }
.skew   { transform: skew(10deg, 20deg); }
.move   { transform: translate(50px, 100px); }

/* Combining transforms */
.complex {
  transform: rotate(45deg) scale(1.5) translate(50px, 100px);
}

3D Transforms

.container {
  perspective: 1000px;
}

.box {
  transform: rotateY(45deg) translateZ(100px);
}

CSS Nesting

Native CSS nesting — long a feature of preprocessors like Sass — is now supported natively in all modern browsers. It reduces repetition and keeps related rules together:

.card {
  background: white;
  border-radius: 8px;
  padding: 1.5rem;

  & h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  & p {
    color: #666;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  & .card__footer {
    margin-top: 1rem;
    border-top: 1px solid #eee;
  }
}

This keeps component styles self-contained and eliminates the need for Sass for most projects.

Typography Enhancements

CSS provides advanced typography tools for precise text control and visual polish.

Custom Fonts

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2');
  font-display: swap;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Note the addition of font-display: swap — this prevents invisible text during font loading, improving perceived performance and Core Web Vitals scores.

Text Shadows

.shadowed-text {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

Multi-Column Layout

.article {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid #ddd;
}

Responsive Images

Modern CSS and HTML provide robust tools for serving appropriately sized images without layout shifts.

Object-Fit Property

.cover-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center top;
}

Aspect Ratio

The aspect-ratio property prevents layout shift by reserving space for images before they load:

.image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Modern Image Formats and srcset

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="Description" width="800" height="450" loading="lazy">
</picture>

Serving AVIF (for browsers that support it) and WebP (as a fallback) significantly reduces image file sizes — typically 30–50% smaller than JPEG at equivalent quality. The explicit width and height attributes prevent Cumulative Layout Shift (CLS), directly benefiting your Core Web Vitals scores — one of the key benefits of responsive web design.

Performance Optimisation

CSS has a direct impact on page performance. These techniques help the browser render your pages faster.

Will-Change Property

.animated-element {
  will-change: transform, opacity;
}

Hints to the browser that these properties will change, allowing it to optimise ahead of time. Use sparingly — applying will-change to too many elements creates unnecessary overhead.

Content Visibility

.offscreen-content {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px;
}

Tells the browser to skip rendering off-screen content until it’s needed. This can dramatically reduce initial render time on long pages.

CSS Containment

.contained-section {
  contain: content;
}

Informs the browser that the internal layout of this element is independent of the rest of the page, enabling layout and paint optimisations.

Accessibility Considerations

Well-written CSS is a fundamental part of an accessible website — not an afterthought.

Focus Styles

/* Modern focus-visible — only shows outline for keyboard navigation */
:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 3px;
}

/* Remove default outline only when focus-visible is available */
:focus:not(:focus-visible) {
  outline: none;
}

Using :focus-visible rather than :focus shows the focus indicator only for keyboard users, avoiding the aesthetic issue of visible outlines on mouse clicks while maintaining full keyboard accessibility.

Reduced Motion

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Respects the user’s operating system preference for reduced motion — essential for users with vestibular disorders or motion sensitivity.

High Contrast Mode

@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }
}

Ensures your site remains usable when Windows High Contrast Mode or similar system settings are active.

Advanced CSS Techniques

A selection of additional techniques that are increasingly useful in modern web projects.

Backdrop Filter

.frosted-glass {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

Creates the frosted glass effect widely used in modern UI design — blurring everything behind the element.

CSS Shapes

.circular-float {
  width: 300px;
  height: 300px;
  shape-outside: circle(50%);
  float: left;
}

Allows text to wrap around non-rectangular shapes for more editorial layouts.

Scroll Snap

.container {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}

.section {
  scroll-snap-align: start;
  height: 100vh;
}

Creates smooth section-to-section scrolling without JavaScript.

Cascade Layers

Cascade layers (@layer) give explicit control over the order in which CSS rules are applied — solving specificity conflicts without resorting to !important:

@layer reset, base, components, utilities;

@layer reset {
  * { box-sizing: border-box; margin: 0; }
}

@layer base {
  body { font-family: system-ui, sans-serif; }
}

@layer components {
  .button { padding: 0.5rem 1rem; border-radius: 4px; }
}

@layer utilities {
  .mt-auto { margin-top: auto; }
}

Rules in a higher-declared layer always win over rules in earlier layers, regardless of specificity. This makes large codebases significantly easier to manage.

CSS Counters

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Automatically numbers document sections without hardcoding numbers in the HTML.

Conclusion

Mastering modern CSS techniques will significantly enhance your ability to create visually compelling, responsive, and accessible websites. From two-dimensional layout systems like CSS Grid and Flexbox to component-level responsiveness with container queries, native nesting, and the transformative :has() selector — CSS in 2026 is more capable than at any point in its history.

The key to becoming proficient is deliberate practice. Incorporate these techniques into your real projects, experiment with combinations, and look for opportunities to replace JavaScript-dependent solutions with CSS equivalents.

As you develop your skills, keep these principles in mind:

1. Always prioritise accessibility. A beautiful website is of little use if it excludes users — usability testing is the best way to verify your site works for everyone.
2. Performance is a feature. Use CSS techniques to enhance your site’s speed — particularly Core Web Vitals metrics that affect search rankings.
3. CSS evolves quickly. New properties and techniques reach browser support regularly — check Can I Use before committing to any feature in production.
4. Test across browsers and devices. Ensure your CSS works consistently across different platforms and screen sizes.
5. Prefer simplicity. The best solution is usually the one that’s easiest to read, maintain, and debug six months later.

By mastering these CSS techniques, you’ll be equipped to tackle complex design challenges and build websites that are visually strong, fast, accessible, and genuinely user-friendly.

Frequently Asked Questions

What are the main advantages of using CSS Grid over traditional layout methods?

CSS Grid offers two-dimensional control — rows and columns simultaneously — which traditional methods like floats or inline-block simply can’t match. It makes complex layouts simpler to write, easier to understand, and inherently more responsive. Combined with subgrid support, it now handles even the most demanding alignment challenges across nested components.

What’s the difference between CSS Grid and container queries?

They solve different problems. CSS Grid controls how items are arranged within a defined layout. Container queries control how a component styles itself based on the size of its own parent container, rather than the viewport. Used together, they make truly portable, context-aware components possible — a major shift in how reusable UI is built.

How do CSS transitions differ from CSS animations?

Transitions handle simple state changes — triggered by a class addition, hover, or focus event — and animate between two states. Animations use @keyframes to define multiple steps and run automatically or on a trigger, with more control over looping, direction, and fill mode. Use transitions for simple interactive feedback; use animations for anything more complex or self-initiating.

Can CSS variables be updated with JavaScript?

Yes — CSS custom properties work well with JavaScript. You can read or write variable values at runtime using getComputedStyle() and style.setProperty(). This allows dynamic theming, user preference persistence, and responsive adjustments based on interaction, all with clean separation between CSS and JavaScript logic.

What is the :has() selector and why does it matter?

:has() is a relational pseudo-class that selects an element based on what it contains. It effectively acts as a parent selector — something CSS developers requested for over a decade. It’s now supported across all modern browsers and removes the need for JavaScript in many cases where you previously had to toggle classes on parent elements dynamically.

How can CSS techniques improve Core Web Vitals scores?

Several CSS techniques directly affect Core Web Vitals: setting explicit width and height on images prevents Cumulative Layout Shift (CLS); content-visibility: auto improves Largest Contentful Paint (LCP) by deferring off-screen rendering; font-display: swap prevents invisible text during font loading; and avoiding transition: all in favour of specific properties reduces unnecessary Interaction to Next Paint (INP) overhead.

Where can I find more resources to learn advanced CSS?

• CSS-Tricks
• MDN Web Docs
• W3Schools
• Smashing Magazine
• Frontend Masters

These cover everything from foundational concepts to the latest CSS features. For more on building fast sites see our guide to increasing WordPress speed., with practical examples and browser compatibility guidance.