18 sections · 156 entries
<!DOCTYPE html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
</body>
</html>Note Always place this as the very first line. Without it, browsers fall into quirks mode and render inconsistently.
<html lang="language-code"> ... </html><html lang="en" dir="ltr">
<!-- entire document goes here -->
</html>Note The lang attribute is critical for screen readers and search engines. Use BCP 47 codes like "en", "fr", "es", "zh-Hans".
<head> ... </head><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Dashboard</title>
<link rel="stylesheet" href="styles.css">
</head>Note The head element holds metadata, links to stylesheets, and scripts. Nothing inside head renders visually on the page.
<meta charset="UTF-8"><head>
<meta charset="UTF-8">
</head>Note Must appear within the first 1024 bytes of the document. UTF-8 handles virtually all global characters and emoji.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="viewport" content="width=device-width, initial-scale=1.0">Note Without this, mobile browsers render at a desktop width and then shrink the result. Essential for every responsive site.
<body> ... </body><body>
<header>Site Header</header>
<main>Primary Content</main>
<footer>Site Footer</footer>
</body>Note Only one body element per document. All visible page content lives here.
<link rel="stylesheet" href="path/to/file.css"><link rel="stylesheet" href="/css/main.css">
<link rel="stylesheet" href="https://fonts.example.com/sans.css" crossorigin>Note Stylesheets in the head block rendering until they load. For non-critical CSS, consider loading asynchronously.
<script src="file.js" defer></script>
<script type="module" src="app.js"></script><script src="analytics.js" defer></script>
<script type="module" src="app.js"></script>Note Use defer for classic scripts so they run after HTML parsing completes. Module scripts are deferred by default. Avoid placing scripts in the head without defer or async.
<h1>Top Level</h1>
<h2>Sub Level</h2>
...
<h6>Deepest Level</h6><h1>Annual Report</h1>
<h2>Financial Summary</h2>
<h3>Revenue by Region</h3>Note Use only one h1 per page for best SEO. Never skip heading levels (e.g., jumping from h1 to h4). Headings create a document outline used by assistive technology.
<p>Text content here.</p><p>Our platform processes over two million transactions daily.</p>
<p>Each transaction is encrypted end-to-end for security.</p>Note Browsers add default top and bottom margins to paragraphs. Reset or adjust with CSS if needed.
<span class="name">inline content</span><p>Status: <span class="status-active">Active</span></p>Note A span has no semantic meaning. Use it purely for styling a portion of text when no better semantic element exists.
<strong>important</strong>
<em>emphasized</em><p><strong>Warning:</strong> This action <em>cannot</em> be undone.</p>Note strong conveys urgency or importance (renders bold). em conveys stress emphasis (renders italic). Prefer these over <b> and <i> for meaningful emphasis, since screen readers alter vocal tone for strong/em.
<blockquote cite="url">
<p>Quoted text.</p>
</blockquote><blockquote cite="https://example.com/speech">
<p>The only limit to our realization of tomorrow is our doubts of today.</p>
</blockquote>Note The cite attribute provides the source URL but is not displayed by browsers. Add visible attribution separately if needed.
<pre><code>code here</code></pre><pre><code>function greet(name) {
return `Hello, ${name}!`;
}</code></pre>
<p>Use <code>Array.map()</code> to transform items.</p>Note pre preserves all whitespace and line breaks exactly as written. Wrap code inside pre for multi-line blocks. Use code alone for inline code snippets.
<br>
<hr><p>123 Main Street<br>Suite 400<br>Springfield, IL 62704</p>
<hr>
<p>New section begins here.</p>Note br is for meaningful line breaks like addresses or poetry, not for spacing. Use CSS margins or padding for spacing. hr represents a thematic shift between content blocks.
<small>fine print</small>
<mark>highlighted</mark>
<del>removed</del>
<ins>added</ins><p>Price: <del>$49.99</del> <ins>$29.99</ins></p>
<p>Search results for <mark>flexbox</mark></p>
<small>Terms and conditions apply.</small>Note del and ins are ideal for showing edits or price changes. mark highlights search matches or key phrases. small is for side comments and legal text.
<img src="url" alt="description" width="w" height="h"><img src="/images/team-photo.jpg" alt="Our engineering team at the 2025 offsite" width="800" height="450">Note Always provide meaningful alt text for accessibility. Set explicit width and height to prevent layout shift while the image loads.
<figure>
<img src="url" alt="description">
<figcaption>Caption text</figcaption>
</figure><figure>
<img src="/charts/revenue.png" alt="Bar chart showing 40% revenue growth year over year">
<figcaption>Revenue growth from 2023 to 2025</figcaption>
</figure>Note figure is for self-contained content that could be moved to an appendix without losing meaning. The figcaption provides a visible caption, while alt describes the image content itself.
<picture>
<source media="(condition)" srcset="image-url">
<img src="fallback.jpg" alt="description">
</picture><picture>
<source media="(min-width: 1024px)" srcset="/images/hero-wide.webp" type="image/webp">
<source media="(min-width: 600px)" srcset="/images/hero-medium.webp" type="image/webp">
<img src="/images/hero-small.jpg" alt="Mountain landscape at sunrise">
</picture>Note The browser picks the first matching source. Always include the img fallback as the last child. Use picture for art direction (different crops at different sizes) or serving modern formats with fallbacks.
<img srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
src="medium.jpg" alt="description"><img
srcset="/photos/product-480.jpg 480w,
/photos/product-800.jpg 800w,
/photos/product-1200.jpg 1200w"
sizes="(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw"
src="/photos/product-800.jpg"
alt="Wireless headphones in midnight blue"
>Note The w descriptor tells the browser the intrinsic pixel width of each image. sizes tells it how wide the image will display at each breakpoint, so it can pick the best file. This is for resolution switching, not art direction.
<img src="url" alt="description" loading="lazy"><img src="/gallery/photo-42.jpg" alt="Sunset over the canyon" loading="lazy" width="600" height="400">Note loading="lazy" defers loading until the image nears the viewport. Do not lazy-load images that are visible on initial load (above the fold) since it slows their appearance. Use loading="eager" (the default) for hero images.
<video src="url" controls width="w" height="h"></video><video controls width="720" height="405" poster="/thumbs/demo.jpg">
<source src="/videos/demo.webm" type="video/webm">
<source src="/videos/demo.mp4" type="video/mp4">
Your browser does not support video playback.
</video>Note Provide multiple source formats for compatibility. The poster attribute shows a thumbnail before playback. Avoid autoplay with sound since browsers block it and users dislike it.
<audio src="url" controls></audio><audio controls>
<source src="/audio/podcast-ep12.ogg" type="audio/ogg">
<source src="/audio/podcast-ep12.mp3" type="audio/mpeg">
Audio playback is not supported in your browser.
</audio>Note Like video, provide multiple source formats. The controls attribute gives users play, pause, and volume UI. Without controls, the element is invisible.
<img src="url" alt="" role="presentation"><img src="/images/decorative-divider.svg" alt="">Note For purely decorative images that add no information, use an empty alt attribute. Screen readers will skip them entirely. Never omit the alt attribute since that causes readers to announce the file name.
<ul>
<li>Item</li>
</ul><ul>
<li>Set up development environment</li>
<li>Configure database connection</li>
<li>Deploy to staging server</li>
</ul>Note Use unordered lists when the sequence of items does not matter. The default bullet style can be changed or removed with CSS list-style-type.
<ol start="n" type="1|a|A|i|I">
<li>Item</li>
</ol><ol>
<li>Preheat oven to 375 degrees</li>
<li>Mix dry ingredients in a large bowl</li>
<li>Add wet ingredients and stir until smooth</li>
<li>Bake for 25 minutes</li>
</ol>Note Use start to begin numbering at a specific value, and reversed attribute for countdown order. The type attribute changes markers (1, a, A, i, I).
<ul>
<li>Parent
<ul>
<li>Child</li>
</ul>
</li>
</ul><ul>
<li>Frontend
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>React</li>
</ul>
</li>
<li>Backend
<ul>
<li>Node.js</li>
<li>Python</li>
</ul>
</li>
</ul>Note The nested list must be placed inside the parent li element, not after it. You can nest ul inside ol and vice versa.
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl><dl>
<dt>Latency</dt>
<dd>The time delay between a request and its response.</dd>
<dt>Throughput</dt>
<dd>The amount of data processed in a given time period.</dd>
</dl>Note Ideal for glossaries, metadata key-value pairs, and FAQ sections. A single dt can have multiple dd elements for multiple definitions.
<table>
<thead>
<tr><th>Header</th></tr>
</thead>
<tbody>
<tr><td>Data</td></tr>
</tbody>
</table><table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboard</td>
<td>$89</td>
<td>142</td>
</tr>
<tr>
<td>Mouse</td>
<td>$45</td>
<td>308</td>
</tr>
</tbody>
</table>Note Always use thead/tbody for proper structure. Use th for header cells and td for data cells. This helps screen readers navigate the table correctly.
<td colspan="n">Spans n columns</td>
<td rowspan="n">Spans n rows</td><table>
<thead>
<tr>
<th>Name</th>
<th colspan="2">Contact Info</th>
</tr>
<tr>
<th></th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Acme Corp</td>
<td>sales@acme.com</td>
<td>555-0100</td>
</tr>
<tr>
<td>support@acme.com</td>
<td>555-0101</td>
</tr>
</tbody>
</table>Note When a cell spans multiple columns or rows, omit the corresponding td elements from those positions. Miscounting causes misaligned tables.
<table>
<caption>Description</caption>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>
<tr><td>Footer data</td></tr>
</tfoot>
</table><table>
<caption>Monthly Sales Figures (USD)</caption>
<thead>
<tr><th>Month</th><th>Revenue</th></tr>
</thead>
<tbody>
<tr><td>January</td><td>$12,400</td></tr>
<tr><td>February</td><td>$15,800</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td>$28,200</td></tr>
</tfoot>
</table>Note The caption element provides an accessible name for the table. It must be the first child of the table element. tfoot contains summary rows like totals.
<form action="url" method="GET|POST">
...
</form><form action="/api/subscribe" method="POST">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>Note GET appends data to the URL (visible, cacheable, bookmarkable). POST sends data in the request body (for sensitive data and large payloads). Omitting method defaults to GET.
<input type="text|email|password|url|search|tel" name="field" id="field"><label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter username" maxlength="30" required>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="email" autocomplete="email">Note Different type values trigger different mobile keyboards and built-in validation. For example, type="email" shows an @ key on mobile and validates email format.
<input type="number" min="0" max="100" step="1">
<input type="range" min="0" max="100" value="50"><label for="quantity">Quantity (1-10):</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">Note Number inputs show spinners on desktop and numeric keyboards on mobile. The step attribute controls increment size. Use step="any" for decimal values.
<input type="date|time|datetime-local|month|week"><label for="start-date">Start Date:</label>
<input type="date" id="start-date" name="startDate" min="2026-01-01" max="2026-12-31">
<label for="meeting-time">Meeting Time:</label>
<input type="datetime-local" id="meeting-time" name="meetingTime">Note Date picker appearance varies significantly across browsers and platforms. The value format is always ISO 8601 (YYYY-MM-DD) regardless of display format. Use min and max to constrain the selectable range.
<input type="checkbox" name="field" value="val">
<input type="radio" name="group" value="val"><fieldset>
<legend>Notification Preferences</legend>
<label><input type="checkbox" name="notify" value="email"> Email</label>
<label><input type="checkbox" name="notify" value="sms"> SMS</label>
</fieldset>
<fieldset>
<legend>Priority</legend>
<label><input type="radio" name="priority" value="low"> Low</label>
<label><input type="radio" name="priority" value="high"> High</label>
</fieldset>Note Radio buttons with the same name attribute form an exclusive group where only one can be selected. Checkboxes allow multiple selections. Wrap each in a label for a clickable hit area.
<select name="field" id="field">
<option value="val">Label</option>
</select><label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select a country</option>
<optgroup label="North America">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</optgroup>
<optgroup label="Europe">
<option value="uk">United Kingdom</option>
<option value="de">Germany</option>
</optgroup>
</select>Note Use optgroup to categorize options. Add an empty first option as a placeholder. For multi-selection, add the multiple attribute, but consider checkboxes instead since multi-select is not intuitive for many users.
<textarea name="field" rows="n" cols="n"></textarea><label for="message">Your Message:</label>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Type your message here..." maxlength="500"></textarea>Note Unlike input, the textarea value goes between the opening and closing tags, not in a value attribute. Use the CSS resize property to control whether users can resize it.
<label for="input-id">Text</label>
<input id="input-id"><label for="fullname">Full Name</label>
<input type="text" id="fullname" name="fullname">
<!-- Or wrapping approach -->
<label>
Phone Number
<input type="tel" name="phone">
</label>Note Every form input must have a label for accessibility. The for attribute must match the input's id. Alternatively, wrap the input inside the label element to create an implicit association.
<input list="list-id">
<datalist id="list-id">
<option value="suggestion">
</datalist><label for="framework">Framework:</label>
<input type="text" id="framework" name="framework" list="frameworks">
<datalist id="frameworks">
<option value="React">
<option value="Vue">
<option value="Angular">
<option value="Svelte">
<option value="Solid">
</datalist>Note Unlike select, datalist allows free-text entry in addition to the suggestions. The user is not forced to pick from the list. Browser rendering of suggestions varies.
required | minlength="n" | maxlength="n" | pattern="regex" | min="n" | max="n"<input type="text" name="zipcode" required pattern="[0-9]{5}" title="Five digit zip code">
<input type="password" name="password" required minlength="8" maxlength="128">
<input type="number" name="age" min="18" max="120">Note Built-in validation runs on form submission and is bypassed by adding formnovalidate to the submit button or novalidate to the form. The title attribute provides a hint message shown when the pattern fails.
<header>...</header>
<footer>...</footer><header>
<h1>TechBlog</h1>
<nav>
<a href="/articles">Articles</a>
<a href="/about">About</a>
</nav>
</header>
<footer>
<p>© 2026 TechBlog. All rights reserved.</p>
</footer>Note header and footer can be used for the entire page or within an article/section element. A page can have multiple headers and footers in different contexts.
<main>...</main><body>
<header>...</header>
<main>
<h1>Dashboard</h1>
<section>...</section>
</main>
<footer>...</footer>
</body>Note There must be only one visible main element per page. It should not be nested inside header, footer, nav, article, or aside. Skip-navigation links typically target main.
<section>...</section>
<article>...</article><main>
<section>
<h2>Latest Articles</h2>
<article>
<h3>Understanding Flexbox</h3>
<p>A practical guide to flexible layouts...</p>
</article>
<article>
<h3>Grid Layout Patterns</h3>
<p>Common patterns for CSS Grid...</p>
</article>
</section>
</main>Note An article is a self-contained piece of content that could be independently distributed (blog post, comment, product card). A section is a thematic grouping of content. Both should generally include a heading.
<aside>...</aside><main>
<article>
<h2>Web Performance Guide</h2>
<p>Core Web Vitals measure real-world user experience...</p>
<aside>
<h3>Related Resources</h3>
<ul>
<li><a href="/caching">Caching Strategies</a></li>
<li><a href="/images">Image Optimization</a></li>
</ul>
</aside>
</article>
</main>Note aside represents content tangentially related to its parent. When used at the page level it acts as a sidebar. Inside an article, it represents a pullquote or supplementary info.
<details>
<summary>Visible title</summary>
Hidden content
</details><details>
<summary>How do I reset my password?</summary>
<p>Go to the login page and click "Forgot Password". Enter your email address and we will send you a reset link within 5 minutes.</p>
</details>
<details open>
<summary>System Requirements</summary>
<ul>
<li>64-bit operating system</li>
<li>4 GB RAM minimum</li>
</ul>
</details>Note This creates a native collapsible section with no JavaScript needed. The open attribute shows the content expanded by default. Style the summary's marker with ::marker or list-style.
<dialog id="myDialog">
Content
<button>Close</button>
</dialog><dialog id="confirmDialog">
<h2>Confirm Deletion</h2>
<p>This will permanently remove the item. Continue?</p>
<form method="dialog">
<button value="cancel">Cancel</button>
<button value="confirm">Delete</button>
</form>
</dialog>
<!-- Open with: document.getElementById('confirmDialog').showModal() -->Note Use showModal() to open with a backdrop that traps focus (accessible). Use show() for a non-modal popup. The form method="dialog" approach closes the dialog and sets its returnValue to the button's value.
<template id="tmpl">
<!-- inert markup -->
</template><template id="card-template">
<div class="card">
<h3 class="card-title"></h3>
<p class="card-body"></p>
</div>
</template>
<!-- Clone in JS:
const tmpl = document.getElementById('card-template');
const clone = tmpl.content.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
document.body.appendChild(clone);
-->Note Content inside template is not rendered, not visible, and not queried by selectors. It serves as a blueprint for JavaScript-generated elements. Clone its content with cloneNode(true).
<time datetime="YYYY-MM-DD">display text</time><p>Published on <time datetime="2026-03-15">March 15, 2026</time></p>
<p>Event starts at <time datetime="2026-04-10T09:00">9:00 AM, April 10</time></p>Note The datetime attribute provides a machine-readable format for search engines and tools, while the visible text can use any human-friendly format.
<title>Page Title - Site Name</title><head>
<title>Pricing Plans - CloudDash</title>
</head>Note The title appears in browser tabs, bookmarks, and search engine results. Keep it under 60 characters. Place the specific page name before the site name for better scannability.
<meta name="description" content="..."><meta name="description" content="Compare our Starter, Pro, and Enterprise plans. Start free and scale as your team grows.">Note Search engines display this as the page snippet. Keep it between 120-160 characters. Each page should have a unique description that summarizes its specific content.
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="..."><meta property="og:title" content="CloudDash Pricing">
<meta property="og:description" content="Plans starting at $0/month. No credit card required.">
<meta property="og:image" content="https://clouddash.example.com/images/og-pricing.png">
<meta property="og:url" content="https://clouddash.example.com/pricing">
<meta property="og:type" content="website">Note Open Graph controls how your page appears when shared on social platforms. The og:image should be at least 1200x630 pixels. Test with platform-specific debugging tools after deploying.
<link rel="canonical" href="preferred-url"><link rel="canonical" href="https://example.com/blog/flexbox-guide">Note Use canonical when the same content is accessible at multiple URLs (with/without www, query parameters, etc.). It tells search engines which URL to index and rank.
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow"><meta name="robots" content="noindex, nofollow">
<!-- Use on staging, admin, or private pages -->
<meta name="robots" content="index, follow">
<!-- Default behavior, but explicit is fine -->Note noindex prevents a page from appearing in search results. nofollow tells crawlers not to follow links on the page. For specific bots, use their name instead of robots (e.g., googlebot).
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml"><link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">Note Modern browsers support SVG favicons which scale perfectly. Include the .ico fallback for older browsers. apple-touch-icon is used when users add your site to their iOS home screen.
<script type="application/ld+json">
{ "@context": "https://schema.org", ... }
</script><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Understanding CSS Grid",
"author": {
"@type": "Person",
"name": "Jamie Chen"
},
"datePublished": "2026-03-20",
"image": "https://example.com/images/grid-article.jpg"
}
</script>Note JSON-LD structured data helps search engines understand your content and may trigger rich results (star ratings, recipe cards, event details). Place it in the head or body. Validate with search engine testing tools.
<meta name="theme-color" content="#hexcolor"><meta name="theme-color" content="#1a1a2e">
<meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1a1a2e" media="(prefers-color-scheme: dark)">Note Controls the browser toolbar color on mobile devices. Use the media attribute to set different colors for light and dark system themes.
element { }
.class { }
#id { }p {
line-height: 1.6;
}
.alert {
padding: 12px 16px;
border-radius: 6px;
}
#main-header {
position: sticky;
top: 0;
}Note Prefer classes over IDs for styling since IDs have much higher specificity and cannot be reused. IDs are fine for JavaScript hooks and anchor targets.
[attr] /* has attribute */
[attr="value"] /* exact match */
[attr^="prefix"] /* starts with */
[attr$="suffix"] /* ends with */
[attr*="part"] /* contains */a[target="_blank"]::after {
content: " \2197";
}
input[type="email"] {
padding-left: 32px;
}
a[href$=".pdf"] {
color: #c0392b;
}Note Attribute selectors are case-sensitive by default. Add i before the closing bracket for case-insensitive matching: [attr="value" i].
:hover | :focus | :active | :focus-visible | :focus-within | :disabled | :checked.button:hover {
background-color: #2563eb;
transform: translateY(-1px);
}
.button:active {
transform: translateY(0);
}
input:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}Note Use :focus-visible instead of :focus for keyboard-only focus rings. It avoids showing outlines on mouse clicks while keeping them for keyboard navigation.
:first-child | :last-child | :nth-child(n) | :nth-of-type(n) | :only-child | :emptyli:first-child {
border-top: none;
}
li:last-child {
border-bottom: none;
}
tr:nth-child(even) {
background-color: #f8f9fa;
}
.grid-item:nth-child(3n) {
margin-right: 0;
}Note nth-child counts all siblings regardless of type. nth-of-type counts only siblings of the same tag. Common patterns: odd, even, 3n, 3n+1.
::before | ::after | ::first-line | ::first-letter | ::placeholder | ::selection | ::marker.required-field::after {
content: " *";
color: #ef4444;
}
.fancy-quote::first-letter {
font-size: 3em;
float: left;
line-height: 1;
margin-right: 8px;
}
::selection {
background-color: #bfdbfe;
color: #1e3a5f;
}Note Pseudo-elements use double colons (::) by convention. ::before and ::after require the content property. They are not in the DOM so they cannot be selected by users or read reliably by all screen readers.
A B /* descendant */
A > B /* direct child */
A + B /* adjacent sibling */
A ~ B /* general sibling *//* All paragraphs inside .content */
.content p {
margin-bottom: 1em;
}
/* Only direct children */
.nav > li {
display: inline-block;
}
/* Paragraph right after an h2 */
h2 + p {
font-size: 1.125em;
}
/* All paragraphs after an h2 */
h2 ~ p {
color: #374151;
}Note The descendant selector (space) matches at any depth. The child selector (>) matches only direct children. Adjacent (+) matches only the immediately following sibling.
parent:has(child) { }/* Style a card only if it contains an image */
.card:has(img) {
padding: 0;
}
/* Style a form group with an invalid input */
.form-group:has(input:invalid) {
border-left: 3px solid #ef4444;
}
/* Style a heading followed by a subtitle */
h2:has(+ .subtitle) {
margin-bottom: 4px;
}Note :has() is often called the parent selector. It selects an element based on whether it contains or is followed by a matching element. Fully supported in modern browsers as of 2024.
:is(selector-list) { } /* takes highest specificity in list */
:where(selector-list) { } /* zero specificity */
:not(selector) { }/* Apply to h1, h2, or h3 inside .article */
.article :is(h1, h2, h3) {
color: #1e293b;
}
/* Reset styles with zero specificity (easy to override) */
:where(.prose) p {
margin-bottom: 1em;
}
/* All inputs except submit buttons */
input:not([type="submit"]) {
border: 1px solid #d1d5db;
}Note :is() and :where() take a selector list and simplify complex selectors. The key difference: :is() takes the specificity of its most specific argument, while :where() always has zero specificity. :not() can now accept complex selectors.
/* Specificity: (ID, Class, Element) */
/* #nav .item a => (1, 1, 1) */
/* .menu a => (0, 1, 1) */
/* a => (0, 0, 1) *//* Specificity (0, 0, 1) - easily overridden */
p { color: gray; }
/* Specificity (0, 1, 0) - overrides above */
.highlight { color: blue; }
/* Specificity (1, 0, 0) - overrides above */
#title { color: red; }
/* Inline styles beat all normal selectors */
/* !important overrides everything (avoid it) */Note When two rules conflict, the one with higher specificity wins. If equal, the last one in source order wins. Avoid !important except for utility classes. Use @layer to manage specificity across libraries.
box-sizing: content-box | border-box;*, *::before, *::after {
box-sizing: border-box;
}
/* With border-box: a 300px wide element stays 300px
even with padding and border added */
.card {
width: 300px;
padding: 20px;
border: 1px solid #e5e7eb;
/* Total width: still 300px */
}Note The universal border-box reset is considered best practice. Without it, padding and borders are added on top of the width, making sizing unpredictable.
margin: top right bottom left;
margin: vertical horizontal;
margin: all;.section {
margin: 40px 0;
}
.container {
margin: 0 auto; /* center horizontally */
max-width: 1200px;
}
.spaced-item {
margin-top: 16px;
margin-bottom: 16px;
}Note Vertical margins collapse: when two vertical margins touch, only the larger one applies (not their sum). Margins on flex and grid children do not collapse. Use margin: 0 auto on a block element with a set width to center it.
padding: top right bottom left;
padding: vertical horizontal;
padding: all;.button {
padding: 10px 24px;
}
.card {
padding: 24px;
}
.nav-link {
padding-block: 8px;
padding-inline: 16px;
}Note Unlike margins, padding never collapses. Padding is inside the element's border, so background colors and images extend into the padded area. Use padding-block and padding-inline for writing-mode-aware spacing.
border: width style color;
border-radius: value;.input {
border: 1px solid #d1d5db;
border-radius: 6px;
}
.avatar {
border: 3px solid #3b82f6;
border-radius: 50%; /* perfect circle */
}
.alert {
border-left: 4px solid #f59e0b;
border-radius: 0;
}Note Border styles include solid, dashed, dotted, double, groove, ridge, inset, outset, and none. Use border-radius: 50% on a square element to create a circle. Individual sides can be styled separately.
width: value; height: value;
min-width | max-width | min-height | max-height.container {
width: 100%;
max-width: 1200px;
}
.sidebar {
width: 280px;
min-height: 100vh;
}
.avatar {
width: 48px;
height: 48px;
aspect-ratio: 1;
}Note Avoid setting fixed heights on text containers since content length varies. Use min-height instead. The aspect-ratio property maintains proportions without needing both width and height.
overflow: visible | hidden | scroll | auto | clip;
overflow-x: value;
overflow-y: value;.card-body {
max-height: 200px;
overflow-y: auto;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.no-scroll {
overflow: clip;
}Note overflow: auto only shows scrollbars when content actually overflows, while scroll always shows them. overflow: clip is like hidden but does not create a scroll container, preventing programmatic scrolling. Combine overflow: hidden with text-overflow: ellipsis for truncated text.
outline: width style color;
outline-offset: value;.button:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
.card:focus-within {
outline: 2px solid #8b5cf6;
outline-offset: 0;
}Note Unlike border, outline does not take up space in the layout and does not affect element sizing. It can overlap adjacent elements. outline-offset pushes the outline away from the element edge. Never remove focus outlines without providing an alternative indicator.
display: block | inline | inline-block | none;.nav-link {
display: inline-block;
padding: 8px 16px;
}
.hidden {
display: none; /* removes from layout and accessibility tree */
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}Note block takes full width, starts on a new line, accepts all box model properties. inline only takes content width, ignores vertical margin/padding. inline-block is inline but respects all box model properties. display: none removes the element entirely. For screen-reader-only content, use the visually-hidden pattern instead.
display: flex;
flex-direction: row | column | row-reverse | column-reverse;.navbar {
display: flex;
flex-direction: row;
}
.sidebar {
display: flex;
flex-direction: column;
}Note Setting display: flex turns direct children into flex items. The default direction is row (horizontal). Items shrink to fit by default but do not wrap.
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;/* Push items to opposite ends */
.header {
display: flex;
justify-content: space-between;
}
/* Center items horizontally */
.hero {
display: flex;
justify-content: center;
}Note justify-content distributes items along the main axis (horizontal in row, vertical in column). space-between puts the first and last items at the edges. space-evenly distributes equal space around every item including edges.
align-items: stretch | flex-start | center | flex-end | baseline;/* Vertically center items in a row */
.toolbar {
display: flex;
align-items: center;
height: 64px;
}
/* Align text baselines across different font sizes */
.price-row {
display: flex;
align-items: baseline;
}Note align-items controls alignment on the cross axis (vertical in row, horizontal in column). The default is stretch, which makes items fill the container height. Use baseline to align items by their text baseline regardless of size.
flex-wrap: nowrap | wrap | wrap-reverse;.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag {
padding: 4px 12px;
background: #e5e7eb;
border-radius: 16px;
}Note By default, flex items squeeze onto one line (nowrap). With wrap, items flow to the next line when they run out of space. This is essential for responsive layouts without media queries.
gap: value;
row-gap: value;
column-gap: value;.card-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
}
.button-group {
display: flex;
gap: 8px;
}Note gap creates space between flex items without adding margins to outer edges. It works in both flexbox and grid. This eliminates the need for margin hacks on the first or last child.
flex: grow shrink basis;
flex-grow: number;
flex-shrink: number;
flex-basis: size;.sidebar {
flex: 0 0 280px; /* fixed width, no grow or shrink */
}
.main-content {
flex: 1; /* grow to fill remaining space */
}
.equal-columns > * {
flex: 1 1 0%; /* equal width columns */
}Note flex: 1 is shorthand for flex: 1 1 0%, meaning the item can grow and shrink and starts from zero base size. flex-basis sets the initial size before growing/shrinking. Using 0% basis makes items share space equally.
align-self: auto | flex-start | center | flex-end | stretch | baseline;.container {
display: flex;
align-items: flex-start;
}
.push-bottom {
align-self: flex-end;
}
.centered-item {
align-self: center;
}Note align-self overrides the container's align-items value for a single flex item. It applies on the cross axis. There is no justify-self in flexbox since the main axis is controlled by the container.
order: integer;.sidebar {
order: -1; /* moves before items with default order 0 */
}
/* Reorder on mobile */
@media (max-width: 768px) {
.hero-image { order: -1; }
.hero-text { order: 0; }
}Note The default order is 0. Lower values appear first. This changes visual order only, not tab order or screen reader order, so use sparingly to avoid accessibility confusion.
display: flex;
justify-content: center;
align-items: center;/* Center a single element both horizontally and vertically */
.page-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Shorter alternative using place properties */
.quick-center {
display: flex;
place-content: center;
place-items: center;
}Note This three-line pattern is the simplest way to center anything vertically and horizontally. Add min-height: 100vh to center within the full viewport.
margin-left: auto; /* or margin-right: auto *//* Push the last item to the far right */
.navbar {
display: flex;
align-items: center;
gap: 16px;
}
.navbar .user-menu {
margin-left: auto;
}Note Auto margins in flexbox consume all available space in that direction. This pushes elements apart without justify-content: space-between, which is useful when you need only one item pushed to the end.
display: grid;
grid-template-columns: values;
grid-template-rows: values;.layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}Note display: grid turns direct children into grid items. Unlike flexbox, grid controls both columns and rows simultaneously, making it ideal for two-dimensional layouts.
grid-template-columns: 1fr 2fr 1fr;/* Three columns: 25% / 50% / 25% */
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 24px;
}
/* Fixed sidebar + flexible main */
.page {
display: grid;
grid-template-columns: 300px 1fr;
}Note The fr unit distributes remaining free space proportionally. 1fr 2fr 1fr means the middle column gets twice the space of the side columns. Fixed sizes (px, rem) are allocated first, then fr units share what is left.
grid-template-columns: repeat(count, size);/* 4 equal columns */
.grid-4 {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
/* Pattern: 100px then 1fr, repeated 3 times */
.dashboard {
grid-template-columns: repeat(3, 100px 1fr);
}Note repeat() avoids writing the same value many times. You can repeat patterns too: repeat(3, 1fr 2fr) produces six columns alternating between 1fr and 2fr.
grid-template-columns: repeat(auto-fill, minmax(min, max));
grid-template-columns: repeat(auto-fit, minmax(min, max));/* Cards that auto-wrap, minimum 280px each */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}Note auto-fill creates as many tracks as fit, leaving empty tracks if there are fewer items. auto-fit collapses empty tracks, letting items stretch to fill the row. For most card grids, auto-fit is what you want.
minmax(minimum, maximum).layout {
display: grid;
grid-template-columns: minmax(200px, 300px) 1fr minmax(200px, 300px);
}
/* Sidebar that shrinks on small screens */
.page {
grid-template-columns: minmax(150px, 250px) 1fr;
}Note minmax() sets a size range for grid tracks. Common pattern: minmax(0, 1fr) prevents grid blowout when content is wider than the column. The default minimum for fr units is min-content, not 0.
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-area: name;.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
}
.page-header { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer { grid-area: footer; }Note Named areas provide a visual map of your layout right in the CSS. Use a period (.) for empty cells. Each area name must form a rectangle. Changing the template in a media query rearranges the entire layout.
grid-column: start / end;
grid-row: start / end;
grid-column: span n;.feature-card {
grid-column: 1 / 3; /* spans columns 1 and 2 */
}
.tall-card {
grid-row: span 2; /* spans 2 rows */
}
.full-width {
grid-column: 1 / -1; /* spans all columns */
}Note Grid lines are numbered starting at 1. Negative numbers count from the end (-1 is the last line). span n is a shorthand that avoids hardcoding line numbers.
gap: row-gap column-gap;
row-gap: value;
column-gap: value;.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.asymmetric {
row-gap: 32px;
column-gap: 16px;
}Note The gap property works identically in grid and flexbox. It replaces the older grid-gap property. Gap only creates space between items, never on the outer edges.
justify-items: start | center | end | stretch;
align-items: start | center | end | stretch;
place-items: align justify;.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center; /* center in both axes */
}
/* Individual item */
.special-item {
justify-self: end;
align-self: start;
}Note In grid, justify controls the inline (horizontal) axis and align controls the block (vertical) axis. place-items is shorthand for both. Unlike flexbox, grid supports justify-self for individual items.
grid-template-columns: subgrid;
grid-template-rows: subgrid;.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3; /* participate in 3 parent rows */
}
/* Now all card titles, bodies, and footers align across cards */Note Subgrid lets a nested grid item inherit its parent's track sizing. This is essential for aligning content across sibling cards (like matching title heights). The child must span the relevant parent tracks.
font-family: "Font Name", fallback, generic;body {
font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}
code, pre {
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}Note Always end the stack with a generic family (sans-serif, serif, monospace, cursive, system-ui). The system-ui keyword uses the operating system's default font. Quotes are required when font names contain spaces.
font-size: value; /* px, rem, em, %, clamp() */html {
font-size: 16px; /* base for rem units */
}
body {
font-size: 1rem;
}
h1 {
font-size: clamp(1.75rem, 4vw, 3rem);
}
.small-text {
font-size: 0.875rem; /* 14px at 16px base */
}Note Use rem for consistent sizing relative to the root. em is relative to the parent's font size which compounds in nested elements. clamp() creates fluid typography that scales between a minimum and maximum.
font-weight: 100-900 | normal | bold | lighter | bolder;.heading {
font-weight: 700;
}
.body-text {
font-weight: 400;
}
.light-text {
font-weight: 300;
}
.semibold {
font-weight: 600;
}Note 100=Thin, 200=ExtraLight, 300=Light, 400=Normal, 500=Medium, 600=SemiBold, 700=Bold, 800=ExtraBold, 900=Black. The font file must include the requested weight or the browser will fake bold, which looks poor.
line-height: number | length | percentage;body {
line-height: 1.6;
}
h1 {
line-height: 1.2;
}
.compact {
line-height: 1.4;
}Note Use unitless numbers (like 1.6) rather than fixed units so the line height scales proportionally with font size. Body text typically reads best between 1.5 and 1.7. Headings look better tighter at 1.1 to 1.3.
text-align: left | center | right | justify | start | end;.hero-heading {
text-align: center;
}
.article-body {
text-align: start; /* respects writing direction */
}
.price {
text-align: right;
}Note Prefer start and end over left and right for internationalization support (RTL languages). Avoid text-align: justify for body text on the web since it creates uneven word spacing without hyphenation.
text-decoration: line style color thickness;
text-underline-offset: value;a {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
a:hover {
text-decoration-color: #3b82f6;
}
.no-underline {
text-decoration: none;
}Note Use text-underline-offset to move underlines away from the text baseline for better readability. text-decoration-skip-ink: auto (the default in most browsers) makes underlines skip descenders cleanly.
text-transform: uppercase | lowercase | capitalize | none;.label {
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.75rem;
}
.name {
text-transform: capitalize;
}Note When using uppercase, add letter-spacing (0.04em to 0.1em) to improve readability. Keep actual content in normal case in the HTML since text-transform is purely visual and screen readers may spell out uppercase letters.
letter-spacing: value;
word-spacing: value;.tracking-wide {
letter-spacing: 0.05em;
}
.tracking-tight {
letter-spacing: -0.02em;
}
.spaced-words {
word-spacing: 0.1em;
}Note Use em units for letter-spacing so it scales with font size. Tight letter-spacing works well for large headings. Wide letter-spacing suits small uppercase labels.
word-break: normal | break-all | keep-all;
overflow-wrap: normal | break-word | anywhere;.comment {
overflow-wrap: break-word;
}
.data-cell {
word-break: break-all;
}
.cjk-text {
word-break: keep-all;
}Note overflow-wrap: break-word only breaks long words that would overflow their container. word-break: break-all breaks between any characters, even mid-word. Use overflow-wrap for most cases and word-break: break-all only for data like hashes or URLs.
text-wrap: balance | pretty | stable;h1, h2, h3 {
text-wrap: balance;
}
.article-body {
text-wrap: pretty;
}Note text-wrap: balance distributes text evenly across lines, preventing headings with one orphaned word on the last line. text-wrap: pretty focuses on avoiding orphans in body text. balance has a limit of a few lines for performance reasons.
@font-face {
font-family: "Name";
src: url("path.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}@font-face {
font-family: "CustomSans";
src: url("/fonts/custom-sans-regular.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "CustomSans";
src: url("/fonts/custom-sans-bold.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
body {
font-family: "CustomSans", sans-serif;
}Note Use font-display: swap to show fallback text while the font loads, preventing invisible text. WOFF2 offers the best compression. Preload critical fonts with <link rel="preload" as="font" crossorigin>.
color: #rrggbb | #rgb | rgb(r g b) | hsl(h s l) | oklch(L C H);.text-hex { color: #1e293b; }
.text-rgb { color: rgb(30 41 59); }
.text-hsl { color: hsl(215 28% 17%); }
.text-oklch { color: oklch(0.35 0.05 260); }
/* With alpha (transparency) */
.overlay { background: rgb(0 0 0 / 0.5); }
.tint { background: hsl(210 100% 50% / 0.1); }Note Modern CSS uses space-separated values with a slash for alpha: rgb(255 0 0 / 0.5). The older comma syntax still works but is being phased out. oklch provides perceptually uniform colors, so adjusting lightness produces visually consistent results across hues.
border-color: currentColor;
fill: currentColor;.icon-button {
color: #2563eb;
border: 2px solid currentColor;
}
.icon-button svg {
fill: currentColor;
}
.icon-button:hover {
color: #1d4ed8;
/* border and SVG automatically update */
}Note currentColor refers to the element's computed color value. It keeps borders, SVG fills, shadows, and other properties in sync with the text color. Change color once and everything follows.
background: linear-gradient(direction, color1, color2);
background: radial-gradient(shape, color1, color2);
background: conic-gradient(from angle, color1, color2);.hero {
background: linear-gradient(135deg, #667eea, #764ba2);
}
.spotlight {
background: radial-gradient(circle at 30% 50%, #fbbf24, transparent 70%);
}
.pie-chart {
background: conic-gradient(#3b82f6 0% 65%, #e5e7eb 65% 100%);
border-radius: 50%;
}Note Gradients are background-image values, not colors, so they cannot be used with the color property. You can layer multiple gradients separated by commas. Conic gradients are great for pie-chart-like visuals.
background-image: url("path");
background-size: cover | contain | width height;
background-position: x y;
background-repeat: no-repeat | repeat;.hero {
background-image: url("/images/hero-bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Shorthand */
.banner {
background: url("/images/pattern.svg") center / cover no-repeat;
}Note background-size: cover fills the entire container (may crop). contain fits the whole image (may leave empty space). When using the background shorthand, the size must follow position with a slash separator.
opacity: 0 to 1;.disabled-card {
opacity: 0.5;
pointer-events: none;
}
.watermark {
opacity: 0.15;
}
.fade-in {
opacity: 0;
transition: opacity 0.3s ease;
}
.fade-in.visible {
opacity: 1;
}Note opacity affects the entire element and all its children. For transparent backgrounds only, use rgba or hsla with alpha instead. An element with opacity less than 1 creates a new stacking context.
:root {
--name: value;
}
element {
property: var(--name, fallback);
}:root {
--color-primary: #2563eb;
--color-surface: #ffffff;
--radius-md: 8px;
--space-4: 16px;
}
.card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.button {
background: var(--color-primary);
}Note Custom properties cascade and inherit like any CSS property. Define theme tokens on :root for global access. They can be changed per element, making component theming straightforward. The fallback value in var() is used only if the variable is not defined.
color-mix(in colorspace, color1 percentage, color2 percentage).hover-darken {
background: var(--color-primary);
}
.hover-darken:hover {
background: color-mix(in oklch, var(--color-primary) 80%, black);
}
.tinted-surface {
background: color-mix(in srgb, var(--color-primary) 10%, white);
}Note color-mix() blends two colors in the specified color space. Use oklch for perceptually even mixing. This replaces the need for pre-computed hover shades. Specify percentages to control the blend ratio.
box-shadow: offset-x offset-y blur spread color;
box-shadow: inset offset-x offset-y blur spread color;.card {
box-shadow: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.06);
}
.card-elevated {
box-shadow: 0 10px 25px rgb(0 0 0 / 0.1);
}
.input:focus {
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
}Note Layer multiple shadows for realistic depth (soft large shadow + tight small shadow). Use box-shadow: 0 0 0 Npx color as a pseudo-border that does not affect layout. The inset keyword creates inner shadows.
position: relative;
top | right | bottom | left: value;.badge-container {
position: relative;
}
.badge {
position: absolute;
top: -8px;
right: -8px;
}Note position: relative keeps the element in the normal flow but enables offset with top/right/bottom/left. Its main use is establishing a positioning context for absolutely positioned children.
position: absolute;
top | right | bottom | left: value;.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
padding: 6px 12px;
background: #1f2937;
color: white;
border-radius: 4px;
white-space: nowrap;
}Note Absolute positioning removes the element from the document flow and positions it relative to the nearest positioned ancestor (one with position: relative, absolute, fixed, or sticky). If none exists, it positions relative to the viewport.
position: fixed;
top | right | bottom | left: value;.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: white;
box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}
.back-to-top {
position: fixed;
bottom: 24px;
right: 24px;
}Note Fixed elements are positioned relative to the viewport and stay in place during scrolling. They are removed from the document flow. A transform, filter, or perspective on any ancestor breaks fixed positioning and makes it relative to that ancestor instead.
position: sticky;
top: value;.table-header {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
.section-label {
position: sticky;
top: 64px; /* below a fixed navbar */
}Note Sticky is a hybrid: it behaves as relative until the scroll position reaches the threshold (top/bottom), then it sticks like fixed. The element must have a scrollable ancestor and the parent must have enough height for it to work. overflow: hidden on an ancestor can prevent sticking.
z-index: integer;.dropdown { z-index: 10; }
.modal-bg { z-index: 40; }
.modal { z-index: 50; }
.toast { z-index: 60; }
/* Isolate stacking context */
.component {
isolation: isolate;
}Note z-index only works on positioned elements (relative, absolute, fixed, sticky) and flex/grid children. Elements with opacity < 1, transform, or filter create new stacking contexts. Use isolation: isolate to explicitly create one without side effects.
float: left | right | none;
clear: left | right | both;/* Classic text wrapping around an image */
.article-image {
float: left;
margin: 0 16px 16px 0;
max-width: 40%;
}
/* Clear floats */
.clearfix::after {
content: "";
display: table;
clear: both;
}Note Floats were once used for page layouts but flexbox and grid have replaced that use case. Floats are still useful for wrapping text around images. Use the clearfix hack or display: flow-root on the parent to contain floated children.
/* Horizontal block centering */
margin: 0 auto;
/* Flex centering */
display: flex; justify-content: center; align-items: center;
/* Grid centering */
display: grid; place-items: center;
/* Absolute centering */
position: absolute; inset: 0; margin: auto;/* Method 1: margin auto (horizontal only) */
.container { margin: 0 auto; max-width: 800px; }
/* Method 2: flexbox (both axes) */
.flex-center { display: flex; justify-content: center; align-items: center; }
/* Method 3: grid (both axes, shortest) */
.grid-center { display: grid; place-items: center; }
/* Method 4: absolute (both axes, within parent) */
.abs-center { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; }Note For most cases, the grid place-items: center approach is the shortest and most versatile. Use margin auto for simple block-level horizontal centering. The absolute method works when you need to center within a positioned parent.
inset: top right bottom left;
inset: all;/* Fill entire parent */
.overlay {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.5);
}
/* 20px from each edge */
.inset-box {
position: absolute;
inset: 20px;
}Note inset is shorthand for top, right, bottom, and left. inset: 0 is equivalent to top: 0; right: 0; bottom: 0; left: 0. It follows the same clockwise shorthand pattern as margin and padding.
@media (condition) { ... }/* Mobile-first approach */
.grid {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}Note Mobile-first (min-width) is the recommended approach: start with small screens and add complexity at wider breakpoints. Common breakpoints: 640px (small), 768px (medium), 1024px (large), 1280px (extra large).
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }
@media (hover: hover) { }
@media (orientation: portrait) { }@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text: #e2e8f0;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
@media (hover: hover) {
.card:hover { transform: translateY(-2px); }
}Note prefers-color-scheme detects dark/light mode system preference. prefers-reduced-motion is critical for accessibility. hover: hover avoids applying hover styles on touch devices where hover is awkward.
.parent {
container-type: inline-size;
container-name: name;
}
@container name (condition) { ... }.card-wrapper {
container-type: inline-size;
}
.card {
display: grid;
grid-template-columns: 1fr;
}
@container (min-width: 400px) {
.card {
grid-template-columns: 150px 1fr;
}
}
@container (min-width: 600px) {
.card {
grid-template-columns: 200px 1fr auto;
}
}Note Container queries respond to the size of a parent container rather than the viewport. This makes components truly self-contained. Set container-type on the parent to opt in. Use container-name when you need to target a specific ancestor.
clamp(minimum, preferred, maximum).container {
width: clamp(320px, 90%, 1200px);
padding: clamp(16px, 4vw, 48px);
}
h1 {
font-size: clamp(1.5rem, 2.5vw + 1rem, 3.5rem);
}Note clamp() eliminates the need for many media queries. It sets a preferred value that flexes between a minimum and maximum. The preferred value usually includes a viewport unit so it scales fluidly. Ideal for typography and spacing.
vw | vh | vmin | vmax | dvh | svh | lvh | dvw | svw | lvw.hero {
min-height: 100dvh; /* accounts for mobile browser chrome */
}
.full-width-banner {
width: 100vw;
margin-left: calc(50% - 50vw);
}
.square {
width: min(80vw, 80vh);
height: min(80vw, 80vh);
}Note On mobile browsers, 100vh is taller than the visible area because it does not account for the URL bar. Use 100dvh (dynamic viewport height) which updates as the browser chrome appears and disappears. svh is the smallest possible viewport, lvh is the largest.
min(value1, value2, ...)
max(value1, value2, ...).container {
width: min(90%, 1200px);
/* same as: width: 90%; max-width: 1200px; */
}
.sidebar {
width: max(200px, 20%);
/* at least 200px, grows with container */
}
.padding-responsive {
padding: max(16px, 3vw);
}Note min() picks the smallest value, acting like a max-width. max() picks the largest, acting like a min-width. You can mix units freely inside these functions. They often replace media queries for simple responsive adjustments.
@media (width >= 768px) { }
@media (768px <= width <= 1024px) { }@media (width >= 768px) {
.sidebar { display: block; }
}
@media (768px <= width <= 1024px) {
.content { padding: 24px; }
}
@media (width < 640px) {
.desktop-only { display: none; }
}Note Range syntax is more readable than the traditional min-width/max-width approach. It is supported in all modern browsers. You can use <, <=, >, and >= operators. This replaces awkward constructs like (max-width: 1023.98px).
cqw | cqh | cqi | cqb | cqmin | cqmax.card-wrapper {
container-type: inline-size;
}
.card-title {
font-size: clamp(1rem, 4cqi, 1.5rem);
}
.card-image {
height: 30cqi;
}Note Container query units (cqi for inline, cqb for block) are relative to the container's dimensions, not the viewport. 1cqi equals 1% of the container's inline size. They allow truly component-relative sizing.
transition: property duration timing-function delay;
transition: all 0.3s ease;.button {
background: #2563eb;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-1px);
}
/* Transition specific properties for performance */
.card {
transition: box-shadow 0.2s ease, transform 0.3s ease;
}Note Prefer transitioning specific properties rather than using 'all' since transitioning everything can cause unexpected side effects and reduced performance. Stick to transform and opacity for the smoothest animations (they are GPU-accelerated).
@keyframes name {
from { ... }
to { ... }
}
@keyframes name {
0% { ... }
50% { ... }
100% { ... }
}@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card {
animation: fadeSlideIn 0.4s ease-out;
}Note Keyframe animations run independently from state changes unlike transitions which need a trigger. Define keyframes globally and apply them with the animation property. The animation runs once by default.
animation: name duration timing-function delay iteration-count direction fill-mode;.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.pulse {
animation: pulse 2s ease-in-out infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.05); }
}Note Key values: infinite loops forever. alternate reverses direction each cycle. forwards (fill-mode) keeps the final keyframe state after the animation ends. Combine multiple animations with commas.
transform: translate() | rotate() | scale() | skew();
translate: x y;
rotate: angle;
scale: value;.card:hover {
transform: translateY(-4px) scale(1.02);
}
.rotated {
rotate: 12deg;
}
.shifted {
translate: 10px -5px;
}
.mirror {
scale: -1 1; /* flip horizontally */
}Note Modern CSS supports individual transform properties (translate, rotate, scale) that can be animated independently. The older transform property applies all transforms at once. Transforms do not affect document flow and are GPU-accelerated.
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2);.slide-in {
transition: transform 0.3s ease-out;
}
.bounce {
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.smooth {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}Note ease-out starts fast and slows down, ideal for enter animations. ease-in starts slow and speeds up, better for exit animations. Custom cubic-bezier values give you fine control. Values beyond 0-1 on the y-axis create overshoot/bounce effects.
/* Opt elements into the transition */
.element {
view-transition-name: unique-name;
}
/* Customize the transition */
::view-transition-old(name) { ... }
::view-transition-new(name) { ... }.page-header {
view-transition-name: header;
}
.product-image {
view-transition-name: product-hero;
}
::view-transition-old(product-hero) {
animation: fadeOut 0.2s ease-out;
}
::view-transition-new(product-hero) {
animation: fadeIn 0.3s ease-in;
}
/* Trigger in JS: document.startViewTransition(() => updateDOM()) */Note View transitions animate between DOM states with a cross-fade by default. Assign view-transition-name to elements that should animate individually rather than cross-fading with the whole page. Each name must be unique on the page. Triggered via JavaScript's document.startViewTransition() API.
scroll-behavior: smooth | auto;html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Note Applies to scrolling triggered by anchor links and JavaScript scrollTo/scrollIntoView calls. Always disable smooth scrolling for users who prefer reduced motion. This does not affect user-initiated scroll (mouse wheel, trackpad).
will-change: property;
/* Remove after animation completes */.animated-card {
will-change: transform;
transition: transform 0.3s ease;
}
/* Apply will-change only when needed */
.card-container:hover .animated-card {
will-change: transform;
}
.animated-card:hover {
transform: scale(1.05);
}Note will-change hints to the browser to prepare for an animation, promoting the element to its own compositor layer. Overusing it wastes memory. Apply it only to elements that will actually animate and remove it after the animation finishes if possible.
.parent {
/* parent styles */
.child {
/* nested child styles */
}
&:hover {
/* parent hover */
}
}.card {
padding: 16px;
border-radius: 8px;
.card-title {
font-size: 1.25rem;
font-weight: 600;
}
.card-body {
margin-top: 8px;
color: #4b5563;
}
&:hover {
box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
}
@media (min-width: 768px) {
padding: 24px;
}
}Note Native CSS nesting works in all major browsers without a preprocessor. Use & for pseudo-classes and pseudo-elements. Media queries can be nested inside rules. You no longer need the & prefix for simple descendant selectors like .child.
@layer layer-name { ... }
@layer base, components, utilities;/* Declare layer order (lowest to highest priority) */
@layer reset, base, components, utilities;
@layer reset {
* { margin: 0; padding: 0; box-sizing: border-box; }
}
@layer base {
body { font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: #2563eb; }
}
@layer components {
.button { padding: 8px 16px; border-radius: 6px; }
}
@layer utilities {
.hidden { display: none; }
.mt-4 { margin-top: 16px; }
}Note Layers control the cascade order regardless of specificity or source order within each layer. Later layers in the declaration beat earlier ones. Unlayered styles beat all layered styles. This solves specificity wars with third-party CSS libraries.
@scope (.scope-root) to (.scope-limit) {
/* styles apply between root and limit */
}@scope (.card) to (.card-footer) {
p {
color: #374151;
line-height: 1.6;
}
a {
color: #2563eb;
text-decoration: underline;
}
}
/* The .card-footer and its contents are excluded */Note @scope limits where styles apply by defining both a root and an optional lower boundary. Styles only match elements between the root and the limit, not inside the limit. This provides true component scoping without build tools.
@property --name {
syntax: "<type>";
inherits: true | false;
initial-value: value;
}@property --gradient-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.gradient-box {
--gradient-angle: 0deg;
background: linear-gradient(var(--gradient-angle), #3b82f6, #8b5cf6);
transition: --gradient-angle 0.5s ease;
}
.gradient-box:hover {
--gradient-angle: 180deg;
}Note @property registers a custom property with a specific type, enabling the browser to animate it. Without registration, custom properties are strings that cannot be transitioned. Supported types include <color>, <length>, <angle>, <number>, <percentage>.
/* Form validation */
.field:has(input:invalid) { }
/* State-driven layouts */
body:has(.modal[open]) { }/* Dim page when modal is open */
body:has(dialog[open]) {
overflow: hidden;
}
/* Change grid layout based on number of children */
.grid:has(> :nth-child(4)) {
grid-template-columns: repeat(2, 1fr);
}
.grid:has(> :nth-child(7)) {
grid-template-columns: repeat(3, 1fr);
}
/* Style label when sibling input is focused */
.field:has(input:focus) label {
color: #2563eb;
}Note :has() can check for any condition: child state, sibling state, attribute presence, or even count of children. It enables previously impossible CSS-only patterns like conditional layouts and form state styling without JavaScript.
animation-timeline: scroll() | view();
animation-range: start end;/* Progress bar tied to page scroll */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: #3b82f6;
transform-origin: left;
animation: scaleProgress linear;
animation-timeline: scroll();
}
@keyframes scaleProgress {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
/* Fade in when element enters viewport */
.reveal {
animation: fadeIn linear;
animation-timeline: view();
animation-range: entry 0% entry 100%;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}Note scroll() ties animation progress to scroll position of a scroll container. view() ties it to the element's visibility in the viewport. animation-range controls which portion of the scroll/view timeline the animation occupies. No JavaScript needed for scroll-linked effects.
.anchor {
anchor-name: --name;
}
.tooltip {
position: absolute;
position-anchor: --name;
top: anchor(bottom);
left: anchor(center);
}.trigger {
anchor-name: --trigger;
}
.popover {
position: absolute;
position-anchor: --trigger;
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
margin-bottom: 8px;
/* Fallback if not enough space above */
position-try-fallbacks: flip-block;
}Note Anchor positioning lets you position elements relative to other elements anywhere in the DOM without a shared parent. position-try-fallbacks automatically repositions (flips) when the element would overflow the viewport. This replaces JavaScript-based tooltip/popover positioning libraries.
color-scheme: light dark;
color: light-dark(light-value, dark-value);:root {
color-scheme: light dark;
}
body {
background: light-dark(#ffffff, #0f172a);
color: light-dark(#1e293b, #e2e8f0);
}
.card {
background: light-dark(#f8fafc, #1e293b);
border: 1px solid light-dark(#e2e8f0, #334155);
}Note light-dark() provides dark mode support inline without media queries. It uses the color-scheme property to determine which value to use. Declare color-scheme: light dark on :root to enable it. This is much simpler than managing separate media query blocks for colors.
<button popovertarget="id">Toggle</button>
<div id="id" popover>Content</div><button popovertarget="menu">Open Menu</button>
<div id="menu" popover>
<nav>
<a href="/settings">Settings</a>
<a href="/profile">Profile</a>
<a href="/logout">Log Out</a>
</nav>
</div>
<style>
[popover] {
padding: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15);
}
[popover]::backdrop {
background: rgb(0 0 0 / 0.1);
}
</style>Note The popover attribute creates a top-layer element that dismisses on outside click or Escape key, with no JavaScript required. It handles focus trapping and accessibility automatically. Style the ::backdrop pseudo-element for the overlay behind it.
@starting-style {
.element {
/* initial state before transition */
}
}dialog[open] {
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.3s ease,
display 0.3s ease allow-discrete;
}
@starting-style {
dialog[open] {
opacity: 0;
transform: scale(0.95);
}
}
/* Exit animation */
dialog:not([open]) {
opacity: 0;
transform: scale(0.95);
}Note @starting-style defines the initial state for elements transitioning from display: none (or not yet rendered). Without it, browsers cannot animate elements that appear for the first time. Combined with allow-discrete on the display property, it enables pure CSS enter/exit animations.
text-wrap: wrap | nowrap | balance | pretty | stable;h1, h2, h3, h4 {
text-wrap: balance;
}
article p {
text-wrap: pretty;
}
.editable-field {
text-wrap: stable;
}Note balance evenly distributes text across lines (best for headings). pretty avoids orphaned words on the last line (best for paragraphs). stable prevents text from reflowing while the user is editing. These require no JavaScript and are progressive enhancements.
color: oklch(from var(--base) calc(l * factor) c h);:root {
--brand: oklch(0.6 0.15 250);
}
.button {
background: var(--brand);
}
.button:hover {
/* 20% darker, same chroma and hue */
background: oklch(from var(--brand) calc(l - 0.1) c h);
}
.button-light {
/* Much lighter variant */
background: oklch(from var(--brand) 0.95 calc(c * 0.3) h);
}Note Relative color syntax creates color variations from a base color by decomposing it into components and modifying them with calc(). This works in any color space (oklch, hsl, srgb). It is the most powerful approach for generating color palettes from a single token.