Jump to section
CSS Cheatsheet
A practical CSS guide covering selectors, box model, flexbox, grid, animations, and responsive design.
Resources
Selectors
A selector tells CSS which HTML elements to style. Learning selectors well means you almost never need to add extra classes to your HTML.
the four basic selectors
CSS
/* element — targets ALL of that type */
p { color: gray; }
h1 { font-size: 2rem; }
/* class — targets elements with class="..." */
.card { border: 1px solid #ccc; }
.btn-primary { background: blue; }
/* ID — targets ONE element with id="..." */
#header { height: 60px; }
/* universal — targets EVERYTHING */
* { box-sizing: border-box; }combining selectors
CSS
/* descendant (space) — any p inside .card */
.card p { color: #555; }
/* child (>) — DIRECT children only */
nav > ul { list-style: none; }
/* adjacent sibling (+) — element immediately after */
h2 + p { margin-top: 0; }
/* general sibling (~) — all elements after */
h2 ~ p { color: gray; }
/* multiple selectors (,) — same rule to several */
h1, h2, h3 { font-family: Georgia, serif; }pseudo-classes — style based on state
CSS
/* :hover — mouse is over the element */
button:hover { background-color: darkblue; }
/* :focus — input or link is active */
input:focus { outline: 2px solid blue; }
/* :first-child / :last-child */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* :nth-child() */
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #f9f9f9; }
li:nth-child(even) { background: #fff; }
/* :not() — everything EXCEPT this */
li:not(:last-child) { border-bottom: 1px solid #eee; }
/* link states — always LVHA order */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: darkblue; }
a:active { color: red; }Remember LVHA for link states: Link, Visited, Hover, Active — always in that order.
pseudo-elements — style part of an element
CSS
/* ::before / ::after — insert content */
.card::before {
content: "NEW";
/* content is required, even if empty "" */
background: red;
color: white;
padding: 2px 6px;
}
/* ::first-letter — style just the first character */
p::first-letter {
font-size: 2em;
font-weight: bold;
float: left;
margin-right: 4px;
}
/* ::first-line */
p::first-line { font-weight: bold; }
/* ::placeholder — style placeholder text */
input::placeholder {
color: #aaa;
font-style: italic;
}
/* ::selection — style highlighted text */
::selection { background: yellow; color: black; }attribute selectors
CSS
/* has the attribute at all */
a[target] { font-weight: bold; }
/* exact attribute value */
a[target="_blank"] { color: orange; }
input[type="email"] { border-color: blue; }
/* starts with */
a[href^="https"] { /* secure links */ }
/* ends with */
a[href$=".pdf"] { /* PDF links */ }
/* contains anywhere */
a[href*="example.com"] { /* links to example.com */ }The Cascade & Specificity
When two CSS rules target the same element, the cascade decides which one wins. Understanding this stops most 'why isn't my CSS working?' moments.
how specificity works
CSS
/* specificity lowest → highest:
1. element (p, h1) → 0-0-1
2. class (.card) → 0-1-0
3. ID (#header) → 1-0-0
4. inline style="..." → always wins
5. !important → nuclear option */
p { color: black; } /* 0-0-1 */
.intro p { color: blue; } /* 0-1-1 — wins */
#main .intro p { color: green; } /* 1-1-1 — wins */Never use `!important` to fix specificity issues — it creates problems that are harder to debug later. Use classes instead.
when specificity is equal — order matters
CSS
/* both have the same specificity (0-1-0) */
.btn { background: blue; }
.btn { background: red; }
/* ↑ red wins — it comes last */
/* base styles first, overrides after */
.card { padding: 16px; border: 1px solid #eee; }
.card.featured { border-color: gold; border-width: 2px; }inheritance — children get parent styles
CSS
/* set on parent — all children inherit */
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
/* force any property to inherit from parent */
.child { border: inherit; }
/* reset to browser default */
.reset { color: initial; }The Box Model
Every HTML element is a box. The box model describes the four layers around it — understanding it explains why spacing and sizing sometimes feel surprising.
the four layers
CSS
/*
margin → space OUTSIDE
border → the visible edge
padding → space INSIDE the border
content → text, image etc.
*/
.box {
width: 200px;
height: 100px;
/* all four sides */
padding: 16px;
/* top/bottom left/right */
padding: 8px 16px;
/* top right bottom left (clockwise) */
padding: 4px 8px 12px 16px;
border: 2px solid #333;
margin: 24px;
/* 0 top/bottom, auto = centre */
margin: 0 auto;
}box-sizing: border-box
CSS
/* put this at the top of EVERY CSS file */
*, *::before, *::after {
box-sizing: border-box;
}
/* without border-box (default): */
/* 200px + 16px padding + 2px border = 236px total */
/* with border-box: */
/* 200px total — padding and border inside */
.card {
width: 300px;
padding: 24px;
border: 1px solid #eee;
/* exactly 300px wide — always */
}Put `*, *::before, *::after { box-sizing: border-box; }` at the top of EVERY CSS file — it makes sizing predictable.
margin vs padding
CSS
.card {
padding: 24px; /* inside — bg colour shows here */
margin: 16px; /* outside — always transparent */
}
/* centre a block element horizontally */
.container {
width: 800px;
margin: 0 auto;
}
/* margin collapse */
p { margin-bottom: 16px; }
p { margin-top: 24px; }
/* gap = 24px (larger), not 40px (sum) */
/* negative margin — pull elements closer */
.overlap { margin-top: -20px; }Units
CSS has many units for sizes. Choosing the right one makes your layout responsive and accessible.
absolute vs relative units
CSS
/* px — fixed, doesn't scale */
width: 200px;
/* rem — relative to ROOT font size (usually 16px) */
font-size: 1rem; /* = 16px */
font-size: 1.5rem; /* = 24px */
font-size: 0.875rem; /* = 14px */
/* em — relative to CURRENT element's font size */
/* can compound — rem is usually safer */
padding: 1em;
/* % — relative to PARENT element */
width: 50%;
/* viewport units — relative to browser window */
width: 100vw; /* 100% of viewport width */
height: 100vh; /* 100% of viewport height */px vs rem for fonts
CSS
/* ❌ px — ignores user font size preferences */
body { font-size: 16px; }
/* ✅ rem — scales with browser settings */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; } /* 40px at default */
h2 { font-size: 2rem; } /* 32px at default */
small { font-size: 0.875rem; } /* 14px at default */
/* ✅ px for things that should NOT scale */
border: 1px solid #eee;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);Use `rem` for all font sizes and spacing. Use `px` only for things that should never scale — like borders and shadows.
Colours
CSS has several ways to write colours. hsl() is easiest to reason about. hex is the most commonly seen in the wild.
colour formats
CSS
/* named colours */
color: red;
color: steelblue;
/* hex — 6 digit code */
color: #ff0000; /* red */
color: #3b82f6; /* a blue */
color: #fff; /* shorthand for #ffffff */
/* rgb */
color: rgb(255, 0, 0);
color: rgb(59, 130, 246);
/* hsl — hue (0-360°), saturation (%), lightness (%) */
color: hsl(0, 100%, 50%); /* red */
color: hsl(220, 90%, 60%); /* a blue */opacity and transparency
CSS
/* rgba / hsla — add a 4th value for opacity */
/* 0 = invisible, 1 = fully solid */
color: rgba(0, 0, 0, 0.5);
/* 50% transparent black */
color: hsla(220, 90%, 60%, 0.8);
/* 80% opaque blue */
/* opacity affects the WHOLE element */
.overlay { opacity: 0.5; }
/* ↑ text inside also becomes transparent */
/* rgba affects only THAT colour */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
color: white;
/* ↑ text stays fully solid */
}Use `rgba()` for semi-transparent backgrounds so the text inside stays fully solid and readable.
CSS custom properties (variables)
CSS
/* define on :root — available everywhere */
:root {
--color-primary: #3b82f6;
--color-secondary: #10b981;
--color-text: #1f2937;
--color-bg: #f9fafb;
}
/* use with var() */
button { background-color: var(--color-primary); }
h1 { color: var(--color-text); }
body { background: var(--color-bg); }
/* dark mode — just override the variables */
@media (prefers-color-scheme: dark) {
:root {
--color-text: #f9fafb;
--color-bg: #111827;
}
}Define all your brand colours as CSS variables on `:root` — makes dark mode and theming trivial to implement.
Typography
Good typography makes your text readable and your design feel professional. Most of what you need is just a handful of properties.
font basics
CSS
body {
/* first available font, falls back through the list */
font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
font-size: 1rem; /* base size */
font-weight: 400; /* 100–900, normal=400, bold=700 */
font-style: normal; /* normal | italic | oblique */
line-height: 1.6; /* unitless — great for body text */
}
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 2rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 600; }using Google Fonts
HTML
<!-- 1. add in your HTML <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
rel="stylesheet"
/>
<!-- 2. use in your CSS -->
<!-- body { font-family: "Inter", sans-serif; } -->text styling
CSS
p {
text-align: left; /* left|center|right|justify */
line-height: 1.6;
letter-spacing: 0.02em;
word-spacing: 0.1em;
}
h1 {
text-transform: uppercase;
letter-spacing: 0.1em;
}
a {
text-decoration: none;
text-decoration-color: blue;
}
/* truncate with ... — all three required */
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}text shadow
CSS
/* text-shadow: x y blur colour */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
/* multiple shadows — comma separated */
h1 {
text-shadow:
1px 1px 2px black,
0 0 20px blue;
}
/* readable text over a background image */
.hero h1 {
color: white;
text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}Backgrounds & Borders
Backgrounds and borders are where a lot of the visual polish in a design comes from. A few well-chosen properties go a long way.
background colour and image
CSS
/* solid colour */
.card { background-color: #f9fafb; }
/* background image */
.hero {
background-image: url("hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
/* shorthand */
background: url("hero.jpg") center/cover no-repeat;
}
/* text overlay — semi-transparent gradient */
.hero {
background-image:
linear-gradient(
rgba(0,0,0,0.4),
rgba(0,0,0,0.4)
),
url("hero.jpg");
background-size: cover;
background-position: center;
}gradients
CSS
/* linear — top to bottom by default */
background: linear-gradient(#3b82f6, #9333ea);
/* specify direction */
background: linear-gradient(to right, #3b82f6, #9333ea);
background: linear-gradient(to bottom, #3b82f6, #9333ea);
background: linear-gradient(135deg, #3b82f6, #9333ea);
/* three colours */
background: linear-gradient(
to right,
#f59e0b, #ef4444, #8b5cf6
);
/* radial — circular from centre */
background: radial-gradient(circle, #3b82f6, #1e3a8a);borders
CSS
/* shorthand: width style colour */
border: 1px solid #e2e8f0;
border: 2px dashed red;
border: 4px dotted blue;
/* individual sides */
border-top: 1px solid #eee;
border-bottom: 2px solid black;
/* style values */
/* solid | dashed | dotted | double | none */
/* remove a border */
border: none;border radius — rounded corners
CSS
/* same radius on all corners */
border-radius: 8px;
/* top-left top-right bottom-right bottom-left */
border-radius: 8px 8px 0 0;
/* only top corners — like a tab */
/* perfect circle — element must be square */
.avatar {
width: 48px;
height: 48px;
border-radius: 50%;
}
/* pill shape — any width */
.badge { border-radius: 9999px; }box shadow
CSS
/* x y blur spread colour */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* subtle */
box-shadow: 0 4px 24px rgba(0,0,0,0.15); /* prominent */
/* inset — shadow inside the element */
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
/* multiple shadows — comma separated */
box-shadow:
0 1px 2px rgba(0,0,0,0.08),
0 4px 16px rgba(0,0,0,0.12);
/* remove */
box-shadow: none;
/* coloured glow — for focus rings */
button:focus {
box-shadow: 0 0 0 3px rgba(59,130,246,0.5);
}Display & Position
display controls how an element participates in layout. position controls where it sits on the page.
display — block, inline, inline-block
CSS
/* block — full width, new line */
div { display: block; }
/* inline — flows with text */
span { display: inline; }
/* inline-block — flows with text + can set size */
.badge {
display: inline-block;
width: 24px;
height: 24px;
}
/* none — completely hidden, no space taken */
.hidden { display: none; }
/* hidden but space still taken */
.invisible { visibility: hidden; }position — how elements are placed
CSS
/* relative — offset from normal position */
.nudged { position: relative; top: 10px; left: 5px; }
/* absolute — positioned relative to nearest
position: relative ancestor */
.parent { position: relative; }
.badge {
position: absolute;
top: 8px;
right: 8px;
}
/* fixed — stays put even when scrolling */
.sticky-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
}
/* sticky — normal flow until scroll boundary */
.table-header {
position: sticky;
top: 0;
}z-index — control stacking order
CSS
/* only works on: relative, absolute, fixed, sticky */
.modal-backdrop { z-index: 100; }
.modal { z-index: 200; }
.tooltip { z-index: 300; }
/* consistent scale — define as CSS variables */
:root {
--z-base: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-overlay: 30;
--z-modal: 40;
--z-toast: 50;
}overflow — when content is too big
CSS
/* visible (default) — content spills out */
/* hidden — clips overflow */
.card { overflow: hidden; }
/* useful for border-radius on images */
/* auto — scrollbar only when needed */
.code-block { overflow: auto; }
/* control each axis separately */
.sidebar {
overflow-y: auto;
overflow-x: hidden;
}Flexbox
Flexbox makes it easy to lay out items in a row or column, control their spacing, and align them — with very little code.
turning on flexbox
CSS
/* parent (flex container) — controls the layout */
.navbar {
display: flex;
/* row (default) | column | row-reverse | column-reverse */
flex-direction: row;
/* align along MAIN axis (horizontal if row) */
justify-content: space-between;
/* align along CROSS axis (vertical if row) */
align-items: center;
/* space between items */
gap: 16px;
}justify-content and align-items
CSS
/* justify-content — main axis */
justify-content: flex-start; /* default */
justify-content: flex-end;
justify-content: center;
justify-content: space-between; /* gaps between, edges flush */
justify-content: space-around; /* equal space around each */
justify-content: space-evenly; /* equal space including edges */
/* align-items — cross axis */
align-items: stretch; /* fill container height (default) */
align-items: center; /* vertically centre */
align-items: flex-start; /* align to top */
align-items: flex-end; /* align to bottom */
/* perfect centring */
.card {
display: flex;
justify-content: center;
align-items: center;
}flex-wrap and gap
CSS
.tag-list {
display: flex;
flex-wrap: wrap; /* wrap to next line if needed */
gap: 8px; /* space between all items */
}
/* row and column gap separately */
.grid {
display: flex;
flex-wrap: wrap;
row-gap: 16px;
column-gap: 24px;
}Use `gap` instead of margin to space flex items — it only adds space between items, never on the outside edges.
flex — control how items grow and shrink
CSS
/* flex: grow shrink basis */
.sidebar { flex: 0 0 250px; } /* fixed 250px */
.main { flex: 1; } /* take all remaining space */
/* equal columns */
.col { flex: 1; }
/* double the space */
.col-wide { flex: 2; }
/* never shrink below content */
.badge { flex-shrink: 0; }align-self and order
CSS
/* align-self — overrides align-items for one child */
.parent {
display: flex;
align-items: center; /* all children centred */
}
.special {
align-self: flex-end; /* this one aligns to bottom */
}
/* align-self values */
/* auto | flex-start | flex-end | center | stretch */
/* order — change visual order */
.first { order: -1; } /* move to front */
.last { order: 1; } /* move to back */
/* default order is 0 for all items */CSS Grid
Grid is the most powerful layout tool in CSS — it lets you define rows AND columns at the same time, perfect for two-dimensional layouts.
creating a grid
CSS
/* 3 equal columns */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* fixed sidebar + flexible main */
.layout {
display: grid;
grid-template-columns: 250px 1fr;
}
/* auto-fill: as many columns as fit, min 200px */
.responsive-grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
}placing items in specific cells
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
/* grid-column: start / end */
.hero {
grid-column: 1 / 3; /* spans 2 columns */
grid-row: 1 / 2; /* first row only */
}
/* span keyword */
.wide { grid-column: span 2; } /* 2 columns */
.tall { grid-row: span 2; } /* 2 rows */
/* specific cell */
.feature {
grid-column: 2;
grid-row: 3;
}named grid areas
CSS
.page {
display: grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 60px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
/* assign each child to its named area */
header { grid-area: header; }
aside { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }grid vs flexbox
CSS
/* ✅ flexbox for 1D layouts */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* ✅ grid for 2D layouts */
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr;
}Responsive Design
Responsive design makes your page look good on any screen size — from a phone to a large monitor.
media queries
CSS
/* mobile first — base styles for small screens */
.container { padding: 16px; }
.grid { grid-template-columns: 1fr; }
/* tablet (≥ 768px) */
@media (min-width: 768px) {
.container { padding: 32px; }
.grid { grid-template-columns: repeat(2, 1fr); }
}
/* desktop (≥ 1024px) */
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
.grid { grid-template-columns: repeat(3, 1fr); }
}
/* large (≥ 1280px) */
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}Always write mobile styles first, then use `min-width` media queries to add tablet and desktop layouts on top.
common breakpoints
CSS
/* show/hide by screen size */
.mobile-only { display: block; }
.desktop-only { display: none; }
@media (min-width: 1024px) {
.mobile-only { display: none; }
.desktop-only { display: block; }
}
/* dark mode */
@media (prefers-color-scheme: dark) {
body { background: #1a1a1a; color: #f0f0f0; }
}
/* print styles */
@media print {
.sidebar, nav, footer { display: none; }
body { font-size: 12pt; }
}responsive images and containers
CSS
/* images scale within their container */
img {
max-width: 100%; /* never wider than parent */
height: auto; /* keep aspect ratio */
display: block; /* removes gap below */
}
/* fluid container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
/* responsive video (16:9) */
.video-wrapper {
position: relative;
padding-bottom: 56.25%; /* 9 ÷ 16 */
height: 0;
overflow: hidden;
}
.video-wrapper iframe,
.video-wrapper video {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
}Transitions & Animations
Transitions smooth out state changes like hover effects. Animations let elements move continuously without any user action.
transition — smooth state changes
CSS
/* transition: property duration easing */
button {
background-color: blue;
transition: background-color 0.2s ease;
}
button:hover { background-color: darkblue; }
/* multiple properties */
.card {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
/* easing values */
/* ease — starts fast, slows down (default) */
/* linear — constant speed */
/* ease-in — starts slow */
/* ease-out — ends slow */
/* ease-in-out — slow start and end */Always put the transition on the base element, not the `:hover` state — otherwise the animation only plays in one direction.
transform — move, rotate, scale
CSS
/* translate — move the element */
transform: translateX(20px);
transform: translateY(-10px);
transform: translate(20px, -10px);
/* scale — make bigger or smaller */
transform: scale(1.05); /* 5% bigger on hover */
transform: scale(0.95); /* like pressing a button */
/* rotate */
transform: rotate(45deg);
transform: rotate(-90deg);
/* combine in ONE declaration */
.card:hover {
transform: translateY(-4px) scale(1.02);
}animation — continuous or triggered motion
CSS
/* step 1: define the motion */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* step 2: apply to an element */
/* name duration easing delay iteration */
.hero { animation: fadeIn 0.6s ease-out; }
/* plays once */
.loader { animation: spin 1s linear infinite; }
/* spins forever */
.badge { animation: pulse 2s ease-in-out infinite; }
/* pulses forever */Useful Patterns
Short, copy-paste CSS snippets for problems you'll run into on almost every project.
centre anything
CSS
/* centre children with flexbox */
.centred {
display: flex;
justify-content: center;
align-items: center;
}
/* full-screen centred hero */
.hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* centre a fixed-width block horizontally */
.container {
width: 800px;
margin: 0 auto;
}`display: flex` + `justify-content: center` + `align-items: center` — memorise these three lines to centre anything.
CSS reset
CSS
/* top of EVERY CSS file */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html { font-size: 16px; }
body {
font-family: system-ui, -apple-system, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
/* form elements don't inherit font by default */
button, input, select, textarea {
font: inherit;
}Put this reset at the very top of your CSS file — before any other styles.
truncate text with ellipsis
CSS
/* single line — show ... when text overflows */
.card-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* multiple lines — show ... after N lines */
.card-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}aspect ratio
CSS
/* 16:9 — standard video ratio */
.video-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
/* square — profile photos, thumbnails */
.avatar {
width: 80px;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 50%;
}
/* object-fit on images */
img {
width: 100%;
height: 100%;
object-fit: cover; /* fill, may crop */
}
img {
object-fit: contain; /* fit inside, may gap */
}smooth scrolling
CSS
/* smooth scroll for the whole page */
html { scroll-behavior: smooth; }
/* offset for sticky headers */
.section { scroll-margin-top: 80px; }
/* custom scrollbar (WebKit only) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}visually hidden — screen reader only text
CSS
/* hides visually, readable by screen readers */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* usage */
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Close menu</span>
</button>
/* show on focus — for skip links */
.sr-only:focus {
position: static;
width: auto;
height: auto;
clip: auto;
margin: 0;
overflow: visible;
}spacing scale with CSS variables
CSS
/* define a spacing scale on :root */
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
--space-10: 64px;
--space-12: 80px;
}
/* use consistently across your CSS */
.card {
padding: var(--space-5);
gap: var(--space-3);
}
.section {
padding-block: var(--space-10);
}
.btn {
padding: var(--space-2) var(--space-4);
}Was this helpful?
No login required to share feedback
More Cheatsheets
Keep your reference handy
Explore more zero-to-hero cheatsheets for the tools you use daily.