Style by Element

Pick what you are working with. You'll get the HTML tags involved, every CSS property that meaningfully styles it, best practices, and a runnable example you can open in the Live Editor.

All HTML Elements

Grouped by purpose. "Void" elements have no closing tag and no content (e.g. <img>, <br>).

Document & Metadata

Sectioning & Semantic Structure

Grouping & Block Text

Inline Text Semantics

Images & Multimedia

Embedded Content

Tables

Forms & Input

Interactive Elements

Scripting & Templates

Global Attributes (work on almost every tag)

All CSS Properties

Grouped by what they affect. Many are shorthands (e.g. font, border, background, flex, grid, transition, animation) that set several longhand properties at once.

Typography & Text

Lists

Color, Backgrounds & Opacity

Borders & Outline

Box Model: Sizing & Spacing

Display, Positioning & Overflow

Flexbox (1-D layout)

CSS Grid (2-D layout)

Transforms, Transitions & Animation

Visual Effects & UI Behaviour

Table-specific Properties

Custom Properties & At-Rules

All JavaScript Basics

HTML is structure, CSS is presentation, and JavaScript is behaviour — it's what makes a page react to clicks, validate a form, or update itself without reloading. This covers the core language and the DOM APIs you'll use every day.

Where your JavaScript goes

Variables & data types

Operators

Conditionals

Loops

Functions

Arrays: the methods you'll actually use

Objects

Selecting elements from the page

Reading & changing content

Changing style & classes

Events

Creating & removing elements

Console & debugging

CSS Selectors & the Cascade

A property does nothing until a selector aims it at elements. This is how you say "these ones".

Basic selectors

Combinators (relationships)

Pseudo-classes (state & position)

A quick list is below. For the syntax, the nth formula, the -child vs -of-type families, and :is() / :where() / :has(), see Pseudo-Classes in Depth in the sidebar.

Pseudo-elements (style a sub-part)

Specificity & the cascade

Pseudo-Classes in Depth

A pseudo-class targets an element that is in a certain state (hovered, checked, disabled…) or position (first, last, every third…). This page covers the syntax, the cryptic nth formula, the look-alike families, and the modern :is() / :where() / :not() / :has() group.

1 · Reading the syntax

• Attach it directly to a selector, no space: button:hover. A space would mean "a descendant" — button :hover is something else entirely.
• Chain as many as you like; all must be true at once: a:hover:focus, input:not(:disabled):checked.
• Some take an argument in parentheses (functional pseudo-classes): :nth-child(2n+1), :not(.hidden), :is(h1, h2, h3), :has(> img), :lang(fr).
• It only affects the part of the selector it is glued to. In nav li:first-child > a, the :first-child applies to the li; then > a selects that li's child link.

/* the pointer is over the button */
.btn:hover { background: #1d4ed8; }

/* a link that is BOTH not .active AND being hovered */
nav a:not(.active):hover { text-decoration: underline; }

/* the <a> inside the FIRST <li> of any nav list */
nav ul li:first-child > a { font-weight: 700; }

/* every checkbox that is checked and enabled */
input[type="checkbox"]:checked:enabled { accent-color: green; }

2 · The An + B formula

:nth-child(), :nth-of-type(), :nth-last-child() and :nth-last-of-type() all take a formula An + B. To read it, plug in n = 0, 1, 2, 3, … and every result that lands on a real position matches. A is the step, B is the offset.

3 · -child vs -of-type

The whole positional family comes in two flavours. :*-child counts every sibling regardless of tag. :*-of-type counts only siblings with the same tag.

<section>
  <h2>Title</h2>
  <p>First paragraph.</p>   <!-- you want no top-margin here -->
  <p>Second paragraph.</p>
</section>

/* MISSES: the first child is the <h2>, not a <p> */
p:first-child { margin-top: 0; }

/* WORKS: the first <p> among the <p> siblings */
p:first-of-type { margin-top: 0; }

4 · Other structural pseudo-classes

5 · Link & interaction states

/* the safe link recipe, in the right order */
a:link    { color: #2563eb; }
a:visited { color: #7c3aed; }
a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
a:hover   { color: #1d4ed8; }
a:active  { color: #b91c1c; }

/* light up a whole form row while any field inside it is focused */
.field:focus-within { background: #eff6ff; }

/* highlight the section you jumped to via a #link */
:target { scroll-margin-top: 5rem; background: #fef9c3; }

6 · Form & input states

/* show the error state only once the user has left an invalid field */
input:user-invalid { border-color: #dc2626; }
input:user-invalid + .error-msg { display: block; }

/* style a checkbox's own label by targeting the next sibling */
input[type="checkbox"]:checked + label { font-weight: 700; }

/* …or the label WRAPPING the checkbox, with :has() */
label:has(input:checked) { background: #dbeafe; }

/* a "floating label" that lifts once the field has content */
.float input:not(:placeholder-shown) + label { transform: translateY(-1.2em) scale(.85); }

/* mark required fields with an asterisk, no extra markup */
label:has(+ input:required)::after { content: " *"; color: #dc2626; }

7 · The logical group: :is() :where() :not() :has()

These four take a selector list as their argument and are how you build the "pre-defined combinations" — they replace long, repetitive selectors.

/* :is() — one rule instead of three */
:is(section, article, aside) > h2 { margin-top: 0; }
/* …without :is() you'd write: */
section > h2, article > h2, aside > h2 { margin-top: 0; }

/* :where() — zero-specificity base styles, easy to override later */
:where(ul, ol) { margin: 0; padding: 0; }

/* :not() — every list item except the last gets a divider */
li:not(:last-child) { border-bottom: 1px solid #e2e8f0; }

/* :has() — style the container based on its contents */
.card:has(img)            { padding-top: 0; }        /* cards WITH an image */
article:has(> h2)          { border-left: 3px solid; } /* direct-child h2 */
h2:has(+ p)               { margin-bottom: .3em; }   /* h2 right before a p */
form:has(:invalid) button { opacity: .5; }           /* disable submit look */
.gallery:has(img:hover) img:not(:hover) { opacity: .4; } /* dim the rest */

8 · Quick reference — every pseudo-class

9 · Gotchas to remember

Units, Colors & Functions

Length units

Writing colors

Useful functions

Layout Patterns & Examples

Real markup for real pages — whole-page skeletons first, then the components that go inside them. Every block is commented. Copy one, swap the words for your own, and you have an accessible starting point.

1. The complete document

Every page starts here. The <head> is configuration the visitor never sees; the <body> is everything they do.

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Always first: character encoding -->
  <meta charset="UTF-8">
  <!-- Makes the page scale correctly on phones -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Shown in the browser tab and search results -->
  <title>Sourdough for Beginners – The Bakehouse</title>
  <!-- The grey text under the title in Google results -->
  <meta name="description" content="A step-by-step guide to your first loaf.">

  <!-- Tab icon, and social-share preview -->
  <link rel="icon" href="/favicon.svg">
  <meta property="og:title" content="Sourdough for Beginners">
  <meta property="og:image" content="https://example.com/loaf.jpg">

  <!-- Your styles. Put <script> near </body> or use defer. -->
  <link rel="stylesheet" href="/styles.css">
  <script src="/app.js" defer></script>
</head>
<body>
  <!-- Visible content lives here -->
</body>
</html>

2. A standard content page

The chrome that wraps almost every page: a skip link for keyboard users, the site header and navigation, one <main>, and a footer.

<body>
  <!-- First focusable element: lets keyboard users jump past the nav -->
  <a class="skip-link" href="#main">Skip to content</a>

  <!-- Site-wide header: appears on every page -->
  <header class="site-header">
    <a href="/" class="logo">The Bakehouse</a>

    <nav aria-label="Primary">
      <ul>
        <li><a href="/">Home</a></li>
        <!-- aria-current marks the page you're on -->
        <li><a href="/guides" aria-current="page">Guides</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <!-- The one unique block of content for THIS page -->
  <main id="main">
    <h1>Baking Guides</h1>
    <p>Choose a recipe to get started.</p>
  </main>

  <!-- Site-wide footer -->
  <footer class="site-footer">
    <nav aria-label="Footer">
      <a href="/privacy">Privacy</a>
      <a href="/contact">Contact</a>
    </nav>
    <p>&copy; 2026 The Bakehouse</p>
  </footer>
</body>

3. A blog post / article page

An <article> is content that would still make sense on its own (in a feed reader, shared on its own URL). Its <header> carries the title and byline; each <section> is a topic within it.

<main>
  <article>

    <!-- Article intro: title, author, date, hero image -->
    <header>
      <h1>How to Bake Sourdough Bread</h1>
      <p class="byline">
        By <a rel="author" href="/authors/john-doe">John Doe</a>
        <!-- machine-readable date, human-readable text -->
        <time datetime="2026-03-14">March 14, 2026</time>
      </p>
      <figure>
        <img src="/loaf.jpg" alt="A cross-section of a sourdough loaf" width="800" height="500">
        <figcaption>An open, airy crumb is the goal.</figcaption>
      </figure>
    </header>

    <!-- First topic -->
    <section>
      <h2>The Ingredients</h2>
      <p>Flour is the most important component of your bread.</p>
      <p>You will also need filtered water and salt.</p>
    </section>

    <!-- Second topic -->
    <section>
      <h2>The Instructions</h2>
      <ol>
        <li>Mix the ingredients in a large bowl.</li>
        <li>Let the dough rise for at least four hours.</li>
        <li>Bake at 450&deg;F for 40 minutes.</li>
      </ol>
    </section>

    <footer>
      <p>Filed under
        <a href="/tags/bread" rel="tag">bread</a>,
        <a href="/tags/beginner" rel="tag">beginner</a>.
      </p>
    </footer>

  </article>

  <!-- Related to the page but not part of the article itself -->
  <aside aria-label="Related recipes">
    <h2>You might also like</h2>
    <ul>
      <li><a href="/no-knead">No-knead bread</a></li>
      <li><a href="/focaccia">Rosemary focaccia</a></li>
    </ul>
  </aside>
</main>

4. A marketing / landing page

A run of full-width <section>s, each with its own heading. The hero, the value props, social proof, and a final call to action.

<main>

  <!-- Hero: the one-sentence pitch + primary action -->
  <section class="hero">
    <h1>Ship your side project this weekend</h1>
    <p>Starter kits, hosting, and a domain in one click.</p>
    <a class="btn btn-primary" href="/signup">Start free</a>
    <a class="btn btn-ghost" href="#features">See how it works</a>
  </section>

  <!-- Features: a heading + a list of cards -->
  <section id="features" aria-labelledby="features-h">
    <h2 id="features-h">Everything included</h2>
    <ul class="feature-grid">
      <li>
        <h3>One-click deploy</h3>
        <p>Push to main and we build it.</p>
      </li>
      <li>
        <h3>Free SSL</h3>
        <p>HTTPS on every domain, automatically.</p>
      </li>
      <li>
        <h3>Global CDN</h3>
        <p>Fast everywhere, no config.</p>
      </li>
    </ul>
  </section>

  <!-- Social proof -->
  <section aria-labelledby="quote-h">
    <h2 id="quote-h" class="visually-hidden">What customers say</h2>
    <figure>
      <blockquote><p>I launched in an afternoon. Genuinely.</p></blockquote>
      <figcaption>&mdash; Priya N., <cite>indie developer</cite></figcaption>
    </figure>
  </section>

  <!-- Closing call to action -->
  <section class="cta">
    <h2>Ready to build?</h2>
    <a class="btn btn-primary" href="/signup">Create your account</a>
  </section>

</main>

5. Documentation layout (sidebar + content)

Two columns: a navigation <aside> and the <main> article. CSS Grid or Flexbox places them side by side; the markup order still puts content first.

<div class="docs-layout">

  <!-- Secondary navigation for this docs area -->
  <aside class="docs-nav">
    <nav aria-label="Documentation">
      <h2>Getting started</h2>
      <ul>
        <li><a href="/docs/install">Installation</a></li>
        <li><a href="/docs/config" aria-current="page">Configuration</a></li>
        <li><a href="/docs/deploy">Deploying</a></li>
      </ul>
    </nav>
  </aside>

  <main class="docs-content">
    <article>
      <h1>Configuration</h1>
      <p>All settings live in <code>config.json</code>.</p>

      <section>
        <h2>Environment variables</h2>
        <p>Prefix custom values with <code>APP_</code>.</p>
        <pre><code>APP_PORT=3000</code></pre>
      </section>

      <section>
        <h2>Reloading</h2>
        <p>Changes apply on the next request in dev mode.</p>
      </section>

      <!-- Prev / next pager -->
      <nav class="pager" aria-label="Docs pages">
        <a rel="prev" href="/docs/install">&larr; Installation</a>
        <a rel="next" href="/docs/deploy">Deploying &rarr;</a>
      </nav>
    </article>
  </main>

</div>

6. App / dashboard shell

A fixed top bar, a persistent side nav, and a <main> work area built from <section> panels. Landmarks (header, nav, main) let power users jump straight to a region.

<body class="app">

  <header class="app-bar">
    <button aria-label="Toggle menu" aria-expanded="false">&#9776;</button>
    <span class="app-title">Analytics</span>
    <nav aria-label="Account">
      <a href="/settings">Settings</a>
      <a href="/logout">Sign out</a>
    </nav>
  </header>

  <nav class="app-side" aria-label="Sections">
    <ul>
      <li><a href="/overview" aria-current="page">Overview</a></li>
      <li><a href="/traffic">Traffic</a></li>
      <li><a href="/revenue">Revenue</a></li>
    </ul>
  </nav>

  <main class="app-main">
    <h1>Overview</h1>

    <section aria-labelledby="kpi-h">
      <h2 id="kpi-h">This week</h2>
      <ul class="kpi-row">
        <li><span class="kpi-label">Visitors</span> <strong>12,480</strong></li>
        <li><span class="kpi-label">Sign-ups</span> <strong>318</strong></li>
      </ul>
    </section>

    <section aria-labelledby="chart-h">
      <h2 id="chart-h">Traffic over time</h2>
      <figure>
        <img src="/chart.png" alt="Line chart trending up from Monday to Sunday">
        <figcaption>Sessions per day.</figcaption>
      </figure>
    </section>
  </main>

</body>

7. Navigation with a submenu & current page

A list of links is the whole pattern. aria-current="page" marks where you are; a nested <ul> is a dropdown.

<nav aria-label="Primary">
  <ul>
    <li><a href="/">Home</a></li>

    <li>
      <a href="/products" aria-current="page">Products</a>
      <!-- Submenu: a plain nested list, shown/hidden with CSS or JS -->
      <ul>
        <li><a href="/products/new">New arrivals</a></li>
        <li><a href="/products/sale">On sale</a></li>
      </ul>
    </li>

    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

8. A responsive card grid

A collection of things is a list. Each card is an <article> (it stands alone). CSS Grid with auto-fill makes it wrap without media queries.

<section aria-labelledby="team-h">
  <h2 id="team-h">Our team</h2>

  <ul class="card-grid">
    <li>
      <article class="card">
        <img src="/ada.jpg" alt="Ada Lovelace" width="200" height="200">
        <h3>Ada Lovelace</h3>
        <p>Founder & CEO</p>
        <a href="/team/ada">Read bio</a>
      </article>
    </li>
    <li>
      <article class="card">
        <img src="/grace.jpg" alt="Grace Hopper" width="200" height="200">
        <h3>Grace Hopper</h3>
        <p>Head of Engineering</p>
        <a href="/team/grace">Read bio</a>
      </article>
    </li>
    <!-- …more <li> cards… -->
  </ul>
</section>

<style>
  .card-grid {
    list-style: none;
    padding: 0;
    display: grid;
    /* as many 220px+ columns as fit, then wrap */
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
  }
  .card img { width: 100%; height: auto; border-radius: 50%; }
</style>

9. An accessible form

Every field has a real <label>. Related choices go in a <fieldset> with a <legend>. Help and error text are linked with aria-describedby so screen readers announce them.

<form action="/subscribe" method="post">

  <div class="field">
    <label for="email">Email address</label>
    <input
      type="email" id="email" name="email"
      autocomplete="email" required
      aria-describedby="email-help">
    <p id="email-help" class="help">We'll only email you the newsletter.</p>
  </div>

  <!-- A group of radio buttons: fieldset + legend is the label for the group -->
  <fieldset>
    <legend>How often?</legend>
    <label><input type="radio" name="freq" value="weekly" checked> Weekly</label>
    <label><input type="radio" name="freq" value="monthly"> Monthly</label>
  </fieldset>

  <div class="field">
    <label for="name">Name <span class="opt">(optional)</span></label>
    <input type="text" id="name" name="name" autocomplete="name">
  </div>

  <label class="check">
    <input type="checkbox" name="terms" required>
    I agree to the <a href="/terms">terms</a>.
  </label>

  <!-- A real submit button, not a <div onclick> -->
  <button type="submit">Subscribe</button>
</form>

10. A data table with a totals row

<caption> titles the table. <th scope> tells assistive tech which cells are headers for which row or column. <tfoot> holds summary rows.

<table>
  <caption>Q1 sales by region</caption>

  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Units</th>
      <th scope="col">Revenue</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">North</th>
      <td>1,204</td>
      <td>$48,160</td>
    </tr>
    <tr>
      <th scope="row">South</th>
      <td>980</td>
      <td>$39,200</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>2,184</td>
      <td>$87,360</td>
    </tr>
  </tfoot>
</table>

11. Figures & responsive media

<figure> groups a visual with its caption. <picture> serves a different image per screen size or format; the <img> inside is the always-works fallback.

<!-- Image with a caption -->
<figure>
  <img src="/diagram.png"
       alt="Data flows from the client to the API to the database"
       width="900" height="500">
  <figcaption>Figure 1. The request lifecycle.</figcaption>
</figure>

<!-- Different crop on phones, modern format when supported -->
<picture>
  <source media="(min-width: 800px)" srcset="/hero-wide.avif" type="image/avif">
  <source media="(min-width: 800px)" srcset="/hero-wide.jpg">
  <source srcset="/hero-square.jpg">
  <img src="/hero-square.jpg" alt="Chef plating a dish" width="600" height="600">
</picture>

<!-- Video with captions and a poster frame -->
<figure>
  <video controls width="640" poster="/thumb.jpg">
    <source src="/demo.webm" type="video/webm">
    <source src="/demo.mp4" type="video/mp4">
    <track kind="captions" src="/demo.en.vtt" srclang="en" label="English" default>
  </video>
  <figcaption>A two-minute product tour.</figcaption>
</figure>

12. Breadcrumbs

A trail back to the home page. It's an ordered list — the sequence matters — inside a labelled <nav>. The last item is the current page and isn't a link.

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/guides">Guides</a></li>
    <li><a href="/guides/bread">Bread</a></li>
    <!-- Current page: text only, marked with aria-current -->
    <li><span aria-current="page">Sourdough</span></li>
  </ol>
</nav>

13. An FAQ (no JavaScript)

<details> is a built-in show/hide widget. <summary> is the always-visible question; everything after it is the answer.

<section aria-labelledby="faq-h">
  <h2 id="faq-h">Frequently asked questions</h2>

  <details>
    <summary>Do I need a sourdough starter?</summary>
    <p>Yes &mdash; either make one over a week or get some from a friend.</p>
  </details>

  <details>
    <summary>Can I use all-purpose flour?</summary>
    <p>You can, but bread flour gives a better rise.</p>
  </details>

  <!-- Add the "open" attribute to have one expanded by default -->
  <details open>
    <summary>How long does it keep?</summary>
    <p>Three days at room temperature, or slice and freeze.</p>
  </details>
</section>

14. A comment thread

Each comment is its own <article> (it stands alone and has an author + date). Replies nest inside the comment they answer.

<section aria-labelledby="comments-h">
  <h2 id="comments-h">3 comments</h2>

  <article class="comment">
    <header>
      <img src="/u/sam.jpg" alt="" width="40" height="40">
      <strong>Sam</strong>
      <time datetime="2026-03-15T09:12">2 hours ago</time>
    </header>
    <p>Worked on the first try. Thank you!</p>

    <!-- A reply is a nested article -->
    <article class="comment reply">
      <header>
        <strong>John Doe</strong> <small>(author)</small>
        <time datetime="2026-03-15T10:03">1 hour ago</time>
      </header>
      <p>So glad it helped!</p>
    </article>
  </article>

  <article class="comment">
    <header>
      <strong>Priya</strong>
      <time datetime="2026-03-15T11:20">40 minutes ago</time>
    </header>
    <p>What hydration do you recommend for a beginner?</p>
  </article>
</section>

15. A testimonial / pull quote

<blockquote> is the quoted words; <figure> + <figcaption> attribute it. <cite> is the title of a work or the source, not a person's name.

<figure class="testimonial">
  <blockquote cite="https://example.com/review/42">
    <p>
      This is the guide I wish I'd had when I started. Clear,
      no fluff, and my loaf actually rose.
    </p>
  </blockquote>
  <figcaption>
    &mdash; Dana Reyes, home baker,
    reviewing <cite>Sourdough for Beginners</cite>
  </figcaption>
</figure>

Border-Image Slicer

border-image takes one picture and cuts it into 9 pieces with 4 lines: the 4 corners keep their exact size, the 4 edges stretch or repeat along each side, and the middle is dropped (or kept, with fill). Drop in a frame or button-skin image, drag the guides to where the stretchable part begins, and copy the CSS.

Drop an image here, or click to choose one.
PNG / SVG / JPG. A decorative frame, ribbon, speech bubble, or button background works best. Everything stays in your browser.

Load a sample frame Clear image

0

0

0

0

top

right

bottom

left

Slice units pixels (unitless) percent

Border width px on the box

Edges stretch repeat round space

Outset px past the edge

Keep the centre (fill)

Put the image in the code as a data URI

Live preview — drag the bottom-right corner to resize and watch the corners hold while the edges fill.

Resize me. The corners should stay sharp; the edges stretch, repeat, round, or space depending on the setting.

Copy

Live Code Editor

Type HTML and CSS in the boxes on the left; the result renders instantly on the right. Load a preset to see a pattern in full.