A working reference of the CSS properties and techniques that come up constantly when building responsive layouts — viewport setup, media queries, flexbox and grid, positioning, transforms, and the modern tools (clamp, custom properties, container queries) that are now widely supported enough to actually rely on rather than treat as bleeding-edge.
In this post: Responsive foundations · Layout · Visual styling · Selectors and interaction · Modern CSS you might not be using yet · Related reading
Responsive foundations
Viewport meta tag — set once, in the HTML head, before anything else about responsiveness matters:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Media queries — the traditional way to segregate styles by screen size:
/* Small screens (phones) */
@media only screen and (max-width: 600px) {
/* Your styles for small screens here */
}
/* Medium screens (tablets) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
/* Your styles for medium screens here */
}
/* Large screens (desktops) */
@media only screen and (min-width: 1025px) {
/* Your styles for large screens here */
}Responsive images — adapt to their container rather than overflow it:
img {
max-width: 100%;
height: auto;
}Responsive typography — adjusting font size per breakpoint the traditional way (see the Modern CSS section below for `clamp()`, which does this without a media query at all):
body {
font-size: 16px;
}
/* Adjust font size for smaller screens */
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
}Fluid containers — percentage-based widths that adapt to their parent rather than a fixed pixel size:
.wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.fluid-container {
width: 100%;
background-color: #f0f0f0;
padding: 20px;
box-sizing: border-box;
margin-bottom: 20px;
}Layout
Flexbox — for one-dimensional, flexible layouts:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1; /* Adjust as needed */
min-width: 0; /* Fixes overflow issues in some cases */
box-sizing: border-box; /* Include padding and border in the element's total width and height */
}Grid — for two-dimensional, multi-column layouts:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}Box sizing — makes padding and border count toward an element’s stated width instead of adding to it:
* {
box-sizing: border-box;
}Positioning — absolute, relative, and fixed, together so the relationship between them is clear:
/* Relative container establishes a positioning context for children */
.relative-container {
position: relative;
height: 200px;
}
/* Absolute: positioned relative to the nearest positioned ancestor */
.relative-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Fixed: positioned relative to the viewport, stays put on scroll */
.fixed-box {
position: fixed;
bottom: 20px;
right: 20px;
}Overflow — what happens when content is bigger than its container:
.overflow-hidden { overflow: hidden; } /* Clips content past the box */
.overflow-scroll { overflow: scroll; } /* Always shows a scrollbar */
.overflow-auto { overflow: auto; } /* Scrollbar only when needed */
.overflow-visible { overflow: visible; } /* Content spills out, unclipped */clamp() now has over 96% browser support and container queries are Baseline widely available — both are safe to reach for by default now, not experimental features to avoid.
Visual styling
Color and background — hex, RGB, or HSL values applied to common elements:
body { background-color: #f4f4f4; color: #333; }
header { background-color: #2c3e50; color: #ecf0f1; }
a { color: #3498db; text-decoration: none; }
a:hover { color: #2980b9; }Transitions and animation — smooth state changes instead of instant jumps:
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.animated-box {
animation: slideIn 1s ease;
}Transforms — 2D manipulation, combinable in a single declaration:
.scale-box { transform: scale(1.5); }
.rotate-box { transform: rotate(45deg); }
.translate-box { transform: translate(20px, 40px); }
.skew-box { transform: skew(30deg, 20deg); }
.combined-box { transform: rotate(30deg) scale(1.2) translate(30px, 10px); }Box shadow and border radius — depth and rounded corners:
.shadow-box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.inset-shadow-box {
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}
.rounded-box {
border-radius: 10px;
}
.circle {
border-radius: 50%; /* 50% on an equal width/height element makes a perfect circle */
}Selectors and interaction
Selectors — the ways to target elements, from broadest to most specific:
* { margin: 0; padding: 0; } /* Universal */
body { font-family: Arial, sans-serif; } /* Type */
.header { padding: 10px; } /* Class */
#main-heading { font-size: 24px; } /* ID */
nav ul { list-style: none; } /* Descendant */
nav > ul > li { display: inline-block; } /* Child */
a[href^="https://"] { color: #27ae60; } /* Attribute */
h1, h2, h3 { margin-bottom: 10px; } /* Grouping */Pseudo-classes and pseudo-elements — styling based on state or document structure, not just the element itself:
a:hover { text-decoration: underline; } /* On hover */
.button:active { background-color: #e74c3c; } /* While being clicked */
.input:focus { border: 2px solid #2ecc71; } /* Keyboard/click focus */
ul li:first-child { font-weight: bold; }
ul li:last-child { color: #e74c3c; }
.striped-list li:nth-child(odd) { background-color: #ecf0f1; }
.header::before { content: "\2022"; } /* Inserted content, before */
.first-line::first-line { font-weight: bold; } /* Targets just the first line */
.first-letter::first-letter { font-size: 24px; } /* Targets just the first letter */Modern CSS you might not be using yet
Worth adding directly, since it’s a real, current gap in most cheat sheets still built around media-query-only responsiveness: three native CSS tools are now well-supported enough to use by default rather than treat as experimental. `clamp()` sets a value that scales fluidly between a minimum and maximum, doing what the “responsive typography” media query above does, but in one line with no breakpoint at all:
h1 {
/* min 1.5rem, preferred 4vw (scales with viewport), max 3rem */
font-size: clamp(1.5rem, 4vw, 3rem);
}Custom properties (CSS variables) centralize a value — a color, a spacing unit — in one place instead of repeating it across every rule that needs it:
:root {
--brand-color: #3498db;
--spacing-unit: 20px;
}
.button {
background-color: var(--brand-color);
padding: var(--spacing-unit);
}Container queries style an element based on the size of its own containing element, not the viewport — the missing piece media queries never solved, since a component can end up in a narrow sidebar or a wide main column on the same page, and a viewport-based media query has no way to tell the difference:
.card-container {
container-type: inline-size;
}
/* Applies when .card-container itself is narrower than 400px,
regardless of how wide the viewport is */
@container (max-width: 400px) {
.card {
flex-direction: column;
}
}All three are genuinely safe to use in production now, not something to gate behind a feature check — `clamp()` has over 96% browser support, and container queries are Baseline widely available, meaning every major browser released since 2023 supports them.
Related reading
- How CSS and SCSS Work Together — when a preprocessor is worth adding on top of the raw CSS covered here.
The fundamentals in this cheat sheet haven’t changed much in years — the newer additions at the end are the part worth revisiting periodically, since browser support for tools like `clamp()` and container queries has moved from “check first” to “safe by default” faster than most reference material gets updated to reflect.
App Catalog Authentication Automation Backup Compliance Content Type CSS Flows Google Javascript Limitations List Metadata MFA Microsoft Node NodeJs O365 OneDrive Permissions PnP PnPJS Policy PowerApps Power Automate PowerAutomate PowerPlatform PowerShell React ReactJs Rest API Rest Endpoint Security Send an HTTP Request to SharePoint SharePoint SharePoint List SharePoint Modern SharePoint Online SPFX SPO Sync Tags Teams Termstore Versioning