What is the StudyGrid CSS tutorial?

The StudyGrid CSS tutorial is a full beginner track: selectors, the box model, text, layout, flex, grid, and responsive design. Each chapter has copy-and-preview examples.

Should I run css examples examples locally for better learning?

Yes. Use the browser editor on StudyGrid for a quick check, then Download the example and run it on your computer. Local runs show real errors and the real toolchain, which is one of the fastest ways to learn css examples in this CSS CSS lesson (CSS Examples).

Is the CSS editor the same as Try HTML?

No. Try CSS is a stylesheet preview at /css/try. Try HTML stays at /html/try. CSS lessons never open the HTML-only editor or the Python editor.

Do I need to install anything to learn CSS?

No. Open a chapter, click Try it in CSS, and the page preview updates in the browser.

Where should I start the CSS tutorial?

Start at CSS Intro, then Syntax, Selectors, and How To. After colors and the box model, continue to flex, grid, and media queries. Use Next at the bottom of each chapter.

Is the CSS tutorial free?

Yes. The CSS studio on StudyGrid (studygrid.in) is free: dashboard, chapters, and the live preview editor.

CSS Examples | StudyGrid

128 copy-and-run snippets. Open one in Try CSS at /css/try, change a value, and run it again. Each language has its own shelf and its own editor.

Start

First rule

<style>
  h1 { color: teal; }
</style>
<h1>Harbor studio</h1>

Selector and block

<style>
  p {
    color: #0f766e;
    font-size: 1.1rem;
  }
</style>
<p>Open 8–16 on Harbor Street.</p>

Element selector

<style>
  h2 { color: #0369a1; }
</style>
<h2>Cafe menu</h2>
<p>Espresso and tomato toast.</p>

Class selector

<style>
  .note { color: #0f766e; background: #f0fdfa; padding: 0.6rem; }
</style>
<p class="note">Sourdough is out at 11.</p>

Id selector

<style>
  #hours { color: #0369a1; font-weight: 700; }
</style>
<p id="hours">Open 8–16</p>

Inline style

<p style="color:#0f766e">Harbor studio, Lisbon.</p>

Internal stylesheet

<style>
  body { font-family: Georgia, serif; }
  .tag { color: teal; }
</style>
<p class="tag">Bakehouse</p>

Comment a rule

<style>
  /* Hours change on holidays */
  p { color: #475569; }
</style>
<p>Closed Monday.</p>

Named color

<style>
  h1 { color: teal; }
  p { color: navy; }
</style>
<h1>Studio</h1>
<p>Sky over the harbor.</p>

Hex color

<style>
  h1 { color: #0f766e; }
  p { color: #0369a1; }
</style>
<h1>Harbor Street</h1>
<p>Teal and sky.</p>

RGB color

<style>
  p { color: rgb(15, 118, 110); }
</style>
<p>RGB teal on the card.</p>

HSL color

<style>
  p { color: hsl(199, 89%, 48%); }
</style>
<p>HSL sky for the hours line.</p>

Multiple properties

<style>
  .card {
    color: #0f172a;
    background: #e0f2fe;
    padding: 0.8rem;
  }
</style>
<div class="card">Cafe window seat.</div>

Cascade last wins

<style>
  p { color: navy; }
  p { color: teal; }
</style>
<p>This paragraph is teal — the second rule wins.</p>

Grouped selectors

<style>
  h1, h2 { color: #0f766e; }
</style>
<h1>Bakehouse</h1>
<h2>Today</h2>

Box

Background color

<style>
  .panel { background: #ccfbf1; padding: 0.8rem; }
</style>
<div class="panel">Warm teal paper.</div>

Background cover

<style>
  .hero {
    background: #0369a1 url("https://picsum.photos/seed/harbor/400/120") center / cover;
    color: #fff;
    padding: 1.4rem;
  }
</style>
<div class="hero">Harbor studio</div>

Solid border

<style>
  .card { border: 2px solid #0d9488; padding: 0.7rem; }
</style>
<div class="card">Espresso 3</div>

Border per side

<style>
  .note {
    border-left: 4px solid #0ea5e9;
    padding-left: 0.7rem;
  }
</style>
<p class="note">Proof overnight.</p>

Dashed border

<style>
  .ticket { border: 2px dashed #14b8a6; padding: 0.7rem; }
</style>
<p class="ticket">Pickup token 12</p>

Margin around a card

<style>
  .card { margin: 1rem; background: #f0f9ff; padding: 0.6rem; }
</style>
<div class="card">Space outside the border.</div>

Center with auto

<style>
  .card { width: 180px; margin: 0 auto; background: #ccfbf1; padding: 0.6rem; }
</style>
<div class="card">Centered card</div>

Padding inside

<style>
  .box { padding: 1.2rem; background: #e0f2fe; }
</style>
<div class="box">Space inside, around the copy.</div>

Padding shorthand

<style>
  .box { padding: 0.4rem 1rem; background: #f0fdfa; border: 1px solid #99f6e4; }
</style>
<p class="box">Short top, wide sides.</p>

Width and height

<style>
  .tile { width: 120px; height: 80px; background: #14b8a6; color: #fff; }
</style>
<div class="tile">Rye</div>

Min height

<style>
  .panel { min-height: 90px; background: #e0f2fe; padding: 0.6rem; }
</style>
<div class="panel">A short note still fills the tile.</div>

Box model layers

<style>
  .box {
    width: 140px;
    padding: 12px;
    border: 4px solid #0f766e;
    margin: 8px;
    background: #ccfbf1;
  }
</style>
<div class="box">Content</div>

Outline on focus

<style>
  button:focus { outline: 3px solid #0ea5e9; }
</style>
<button type="button">Book a loaf</button>

Outline offset

<style>
  a { outline: 2px solid #0d9488; outline-offset: 4px; }
</style>
<p><a href="/css">CSS home</a></p>

Background no-repeat

<style>
  .mark {
    background: #f0fdfa url("https://picsum.photos/seed/loaf/48/48") no-repeat 8px center;
    padding: 0.8rem 0.8rem 0.8rem 64px;
  }
</style>
<p class="mark">Sourdough of the day</p>

Text

Text color

<style>
  p { color: #0f766e; }
</style>
<p>Harbor studio copy in teal.</p>

Centered heading

<style>
  h1 { text-align: center; color: #0369a1; }
</style>
<h1>Cafe menu</h1>

Line height

<style>
  p { line-height: 1.7; color: #334155; max-width: 28ch; }
</style>
<p>Sourdough, tomato, olive oil. Espresso until 16:00.</p>

Letter spacing

<style>
  .label { letter-spacing: 0.18em; text-transform: uppercase; color: #0369a1; }
</style>
<p class="label">Open</p>

Uppercase label

<style>
  .hours { text-transform: uppercase; color: #0f766e; }
</style>
<p class="hours">tue–sat 8–16</p>

Underline link

<style>
  a { color: #0369a1; text-decoration: underline; }
</style>
<p><a href="/css/links">Hours and menu</a></p>

Font stack

<style>
  h1 { font-family: Georgia, "Times New Roman", serif; color: #0f766e; }
</style>
<h1>Bakehouse</h1>

Font weight

<style>
  strong { font-weight: 700; color: #0f766e; }
  span { font-weight: 400; }
</style>
<p><strong>Open</strong> <span>today</span></p>

Italic note

<style>
  .whisper { font-style: italic; color: #0369a1; }
</style>
<p class="whisper">Come early for rye.</p>

Link hover color

<style>
  a { color: #0369a1; }
  a:hover { color: #0f766e; }
</style>
<p><a href="/css">Studio home</a></p>

Bare list

<style>
  ul { list-style: none; padding: 0; }
  li { color: #0f766e; }
</style>
<ul>
  <li>Espresso</li>
  <li>Still water</li>
</ul>

Collapsed table

<style>
  table { border-collapse: collapse; }
  th, td { border: 1px solid #7dd3fc; padding: 0.4rem 0.7rem; }
  th { background: #e0f2fe; color: #0369a1; }
</style>
<table>
  <tr><th>Item</th><th>Price</th></tr>
  <tr><td>Toast</td><td>6</td></tr>
</table>

Icon size

<style>
  .ico { font-size: 1.8rem; color: #0d9488; }
</style>
<p><span class="ico" aria-hidden="true">☕</span> Espresso</p>

Word spacing

<style>
  p { word-spacing: 0.35em; color: #0f766e; }
</style>
<p>Harbor Street 12 Lisbon</p>

Layout

Block stack

<style>
  .item { display: block; background: #ccfbf1; margin: 0.3rem 0; padding: 0.4rem; }
</style>
<span class="item">Menu</span>
<span class="item">Hours</span>

Hide a box

<style>
  .sold { display: none; }
</style>
<p>Rye</p>
<p class="sold">Sesame loaf</p>
<p>Tomato toast</p>

Inline chips

<style>
  .chip { display: inline; color: #0369a1; }
</style>
<p><span class="chip">Open</span> · <span class="chip">Harbor</span></p>

Max-width card

<style>
  .card { max-width: 220px; background: #f0f9ff; padding: 0.7rem; }
</style>
<div class="card">A card grows until the cap, then wraps the copy.</div>

Relative nudge

<style>
  .nudge { position: relative; top: 8px; left: 12px; color: #0f766e; }
</style>
<p class="nudge">Shifted from static.</p>

Absolute badge

<style>
  .wrap { position: relative; background: #e0f2fe; padding: 1.2rem; }
  .badge { position: absolute; top: 6px; right: 8px; color: teal; }
</style>
<div class="wrap">Cafe window<span class="badge">New</span></div>

Sticky bar

<style>
  .bar { position: sticky; top: 0; background: #0f766e; color: #fff; padding: 0.4rem; }
  .long { height: 80px; }
</style>
<div class="bar">Harbor studio</div>
<p class="long">Scroll the preview to pin the bar.</p>

Stacking order

<style>
  .a, .b { position: relative; width: 90px; height: 50px; padding: 0.4rem; }
  .a { background: #7dd3fc; z-index: 1; }
  .b { background: #14b8a6; color: #fff; margin-top: -20px; margin-left: 30px; z-index: 2; }
</style>
<div class="a">Sky</div>
<div class="b">Teal</div>

Clip overflow

<style>
  .clip { width: 160px; height: 48px; overflow: hidden; background: #f0fdfa; }
</style>
<div class="clip">Sourdough with tomato and olive oil that does not fit.</div>

Scroll a menu

<style>
  .menu { height: 64px; overflow: auto; background: #e0f2fe; }
</style>
<div class="menu">
  <p>Espresso</p><p>Rye</p><p>Tomato toast</p><p>Still water</p>
</div>

Float a photo

<style>
  img { float: left; margin: 0 0.6rem 0.4rem 0; }
</style>
<img src="https://picsum.photos/seed/loaf/64/64" alt="Loaf" width="64" height="64">
<p>Text wraps the loaf on Harbor Street.</p>

Inline-block tiles

<style>
  .tile { display: inline-block; width: 80px; background: #ccfbf1; padding: 0.5rem; }
</style>
<div class="tile">Rye</div>
<div class="tile">Toast</div>

Margin auto center

<style>
  .box { width: 160px; margin-left: auto; margin-right: auto; background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="box">Centered block</div>

Align text block

<style>
  .hero { text-align: center; background: #f0fdfa; padding: 0.8rem; }
</style>
<div class="hero"><h2>Studio</h2><p>Harbor Street</p></div>

Fixed corner note

<style>
  .pin { position: fixed; bottom: 8px; right: 8px; background: #0ea5e9; color: #fff; padding: 0.4rem 0.6rem; }
</style>
<p>Cafe copy stays put.</p>
<div class="pin">Open</div>

Selectors

Descendant pick

<style>
  article p { color: #0f766e; }
</style>
<article>
  <h2>Today</h2>
  <p>Tomato toast.</p>
</article>

Direct child

<style>
  ul > li { color: #0369a1; }
</style>
<ul>
  <li>Espresso</li>
  <li>Water</li>
</ul>

Adjacent sibling

<style>
  h2 + p { color: teal; }
</style>
<h2>Hours</h2>
<p>Open 8–16</p>
<p>Closed Monday</p>

General sibling

<style>
  h2 ~ p { color: #0369a1; }
</style>
<h2>Menu</h2>
<p>Rye</p>
<p>Sourdough</p>

Opacity fade

<style>
  .sold { opacity: 0.4; }
</style>
<p>Espresso</p>
<p class="sold">Sesame loaf</p>

Alpha channel

<style>
  .wash { background: rgba(14, 165, 233, 0.25); padding: 0.7rem; }
</style>
<p class="wash">Sky wash, text stays solid.</p>

Hover a card

<style>
  .card { background: #f0fdfa; padding: 0.6rem; }
  .card:hover { background: #ccfbf1; }
</style>
<div class="card">Hover the studio card.</div>

First child

<style>
  li:first-child { color: #0f766e; font-weight: 700; }
</style>
<ul>
  <li>Rye</li>
  <li>Toast</li>
</ul>

Zebra rows

<style>
  li:nth-child(odd) { background: #e0f2fe; }
</style>
<ul>
  <li>Espresso</li>
  <li>Water</li>
  <li>Toast</li>
</ul>

Focus ring

<style>
  a:focus { outline: 2px solid #0d9488; }
</style>
<p><a href="/css/intro">CSS intro</a></p>

Before marker

<style>
  .open::before { content: "● "; color: #14b8a6; }
</style>
<p class="open">Open today</p>

After arrow

<style>
  a::after { content: " →"; color: #0369a1; }
</style>
<p><a href="/css">Studio</a></p>

First line

<style>
  p::first-line { color: #0f766e; font-weight: 700; }
</style>
<p>Harbor studio<br>Lisbon cafe window</p>

Class beats tag

<style>
  p { color: navy; }
  .lead { color: teal; }
</style>
<p class="lead">Class wins the cascade.</p>

Attribute href

<style>
  a[href^="/css"] { color: #0f766e; }
</style>
<p><a href="/css/syntax">Syntax lesson</a></p>

Effects

Rounded card

<style>
  .card { border-radius: 12px; background: #ccfbf1; padding: 0.8rem; }
</style>
<div class="card">Harbor window</div>

Pill button

<style>
  button { border-radius: 999px; background: #0ea5e9; color: #fff; border: 0; padding: 0.4rem 1rem; }
</style>
<button type="button">Book</button>

Circle mark

<style>
  .dot { width: 40px; height: 40px; border-radius: 50%; background: #14b8a6; color: #fff; text-align: center; line-height: 40px; }
</style>
<div class="dot">H</div>

Linear wash

<style>
  .hero { background: linear-gradient(120deg, #0f766e, #0369a1); color: #fff; padding: 1rem; }
</style>
<div class="hero">Harbor studio</div>

Radial glow

<style>
  .glow { background: radial-gradient(circle at 30% 30%, #7dd3fc, #0f766e); color: #fff; padding: 1.2rem; }
</style>
<div class="glow">Cafe lamp</div>

Soft shadow

<style>
  .card { box-shadow: 0 8px 20px rgba(15, 118, 110, 0.25); padding: 0.8rem; background: #fff; }
</style>
<div class="card">Lifted menu card</div>

Letter shadow

<style>
  h1 { color: #0369a1; text-shadow: 1px 1px 0 #bae6fd; }
</style>
<h1>Studio</h1>

Translate lift

<style>
  .card { background: #e0f2fe; padding: 0.6rem; }
  .card:hover { transform: translateY(-4px); }
</style>
<div class="card">Hover to lift</div>

Rotate stamp

<style>
  .stamp { display: inline-block; transform: rotate(-8deg); color: #0f766e; border: 2px solid #0f766e; padding: 0.3rem 0.5rem; }
</style>
<p class="stamp">Open</p>

Scale hover

<style>
  .chip { display: inline-block; background: #ccfbf1; padding: 0.4rem 0.7rem; }
  .chip:hover { transform: scale(1.08); }
</style>
<span class="chip">Rye</span>

Color transition

<style>
  a { color: #0369a1; transition: color 0.3s ease; }
  a:hover { color: #0f766e; }
</style>
<p><a href="/css">Harbor home</a></p>

Pulse keyframes

<style>
  @keyframes pulse {
    from { opacity: 0.5; }
    to { opacity: 1; }
  }
  .live { animation: pulse 1.2s ease-in-out infinite alternate; color: #0d9488; }
</style>
<p class="live">● Open now</p>

Theme tokens

<style>
  :root { --brand: #0f766e; --paper: #f0fdfa; }
  .card { color: var(--brand); background: var(--paper); padding: 0.7rem; }
</style>
<div class="card">Token-colored card</div>

Important last

<style>
  p { color: navy !important; }
  .lead { color: teal; }
</style>
<p class="lead">Navy wins with !important.</p>

Skew a banner

<style>
  .banner { display: inline-block; transform: skewX(-8deg); background: #0ea5e9; color: #fff; padding: 0.4rem 0.8rem; }
</style>
<p class="banner">Today</p>

Flex and grid

Flex row

<style>
  .row { display: flex; }
  .row div { background: #ccfbf1; padding: 0.5rem; margin-right: 0.4rem; }
</style>
<div class="row"><div>Menu</div><div>Hours</div></div>

Flex gap

<style>
  .row { display: flex; gap: 0.8rem; }
  .row span { background: #e0f2fe; padding: 0.4rem 0.6rem; }
</style>
<div class="row"><span>Rye</span><span>Toast</span><span>Tea</span></div>

Space between

<style>
  .bar { display: flex; justify-content: space-between; background: #f0fdfa; padding: 0.5rem; }
</style>
<div class="bar"><span>Harbor</span><span>Open 8–16</span></div>

Align items

<style>
  .row { display: flex; align-items: center; gap: 0.6rem; }
  .mark { width: 28px; height: 28px; background: #14b8a6; }
</style>
<div class="row"><div class="mark"></div><p>Studio open</p></div>

Wrap chips

<style>
  .wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; width: 140px; }
  .wrap span { background: #e0f2fe; padding: 0.3rem 0.5rem; }
</style>
<div class="wrap"><span>Rye</span><span>Toast</span><span>Water</span><span>Tea</span></div>

Grow a column

<style>
  .row { display: flex; gap: 0.4rem; }
  .main { flex: 1; background: #ccfbf1; padding: 0.5rem; }
  .side { width: 70px; background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="row"><div class="main">Menu</div><div class="side">Tip</div></div>

Flex column

<style>
  .col { display: flex; flex-direction: column; gap: 0.4rem; }
  .col p { margin: 0; background: #f0f9ff; padding: 0.4rem; }
</style>
<div class="col"><p>Mix</p><p>Proof</p><p>Bake</p></div>

Two-column grid

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; }
  .grid div { background: #ccfbf1; padding: 0.6rem; }
</style>
<div class="grid"><div>Menu</div><div>Hours</div></div>

Grid gap

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .grid div { background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="grid"><div>Rye</div><div>Toast</div></div>

Named areas

<style>
  .page {
    display: grid;
    grid-template-areas: "head head" "main side";
    gap: 0.4rem;
  }
  header { grid-area: head; background: #0f766e; color: #fff; padding: 0.4rem; }
  main { grid-area: main; background: #ccfbf1; padding: 0.4rem; }
  aside { grid-area: side; background: #e0f2fe; padding: 0.4rem; }
</style>
<div class="page">
  <header>Harbor</header>
  <main>Menu</main>
  <aside>Hours</aside>
</div>

Auto-fit cards

<style>
  .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.4rem; }
  .grid div { background: #f0fdfa; padding: 0.5rem; }
</style>
<div class="grid"><div>Rye</div><div>Tea</div><div>Toast</div></div>

Span two columns

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .wide { grid-column: span 2; background: #0369a1; color: #fff; padding: 0.5rem; }
  .grid div { background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="grid"><div class="wide">Cafe</div><div>Open</div><div>8–16</div></div>

Place in center

<style>
  .stage { display: grid; place-items: center; height: 80px; background: #f0f9ff; }
</style>
<div class="stage"><p>Centered</p></div>

Flex nav

<style>
  nav { display: flex; gap: 0.8rem; background: #f0fdfa; padding: 0.5rem; }
  a { color: #0f766e; text-decoration: none; }
</style>
<nav>
  <a href="/css">Home</a>
  <a href="/css/flexbox">Flex</a>
</nav>

Dense grid

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .grid div { background: #ccfbf1; padding: 0.4rem; text-align: center; }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Responsive

Rem type

<style>
  h1 { font-size: 1.75rem; color: #0f766e; }
</style>
<h1>Harbor studio</h1>

Em padding

<style>
  .box { font-size: 18px; padding: 0.5em 1em; background: #e0f2fe; }
</style>
<p class="box">Padding scales with type.</p>

Percent width

<style>
  .bar { width: 70%; background: #14b8a6; color: #fff; padding: 0.4rem; }
</style>
<div class="bar">70% of the preview</div>

Viewport width

<style>
  .band { width: 80vw; max-width: 100%; background: #0369a1; color: #fff; padding: 0.5rem; }
</style>
<div class="band">80vw band</div>

Border-box

<style>
  * { box-sizing: border-box; }
  .box { width: 160px; padding: 16px; border: 4px solid #0f766e; background: #ccfbf1; }
</style>
<div class="box">Width includes padding.</div>

Min-width query

<style>
  .card { background: #ccfbf1; padding: 0.6rem; }
  @media (min-width: 480px) {
    .card { background: #e0f2fe; }
  }
</style>
<div class="card">Sky on a wider preview.</div>

Dark preference

<style>
  p { color: #0f766e; }
  @media (prefers-color-scheme: dark) {
    p { color: #5eead4; }
  }
</style>
<p>Harbor hours follow the theme.</p>

Fluid image

<style>
  img { max-width: 100%; height: auto; }
</style>
<img src="https://picsum.photos/seed/wideharbor/480/160" alt="Harbor window">

Clamp heading

<style>
  h1 { font-size: clamp(1.2rem, 4vw, 2rem); color: #0369a1; }
</style>
<h1>Cafe menu</h1>

Styled input

<style>
  input { border: 1px solid #0d9488; padding: 0.4rem 0.6rem; color: #0f172a; }
</style>
<label>Name <input name="name" placeholder="Harbor guest"></label>

Visible focus

<style>
  input:focus { outline: 2px solid teal; }
</style>
<label>Email <input type="email" name="email"></label>

Wrapping nav

<style>
  nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  a { background: #f0f9ff; color: #0369a1; padding: 0.3rem 0.6rem; text-decoration: none; }
</style>
<nav>
  <a href="/css">Home</a>
  <a href="/css/text">Text</a>
  <a href="/css/grid">Grid</a>
</nav>

Page max width

<style>
  .page { max-width: 36rem; margin: 0 auto; background: #f0fdfa; padding: 0.8rem; }
</style>
<div class="page">
  <h2>Studio</h2>
  <p>A readable measure on Harbor Street.</p>
</div>

Ch measure

<style>
  p { max-width: 32ch; color: #0f766e; }
</style>
<p>About thirty-two characters per line in the cafe note.</p>

Mobile-first stack

<style>
  .stack { display: grid; gap: 0.5rem; }
  .stack div { background: #ccfbf1; padding: 0.5rem; }
  @media (min-width: 400px) {
    .stack { grid-template-columns: 1fr 1fr; }
  }
</style>
<div class="stack"><div>Menu</div><div>Hours</div></div>

STEM

Ammeter paint

<style>
  h1 { color: #0f766e; }
  p { color: #334155; }
</style>
<h1>Ammeter</h1>
<p>I = 0.45 A</p>

Box model width

<style>
  .box { width: 140px; padding: 24px; border: 8px solid #0f766e; margin: 16px; background: #ccfbf1; }
</style>
<div class="box">painted = 140+48+16</div>

pH indicator colours

<style>
  .acid { color: #b91c1c; }
  .neutral { color: #166534; }
</style>
<p class="acid">pH 1</p>
<p class="neutral">pH 7</p>

Fever callout

<style>
  .fever { border-left: 4px solid #9f1239; padding-left: 0.7rem; }
</style>
<p class="fever">38.4 °C oral — fever</p>

Marks grid

<style>
  .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .grid div { background: #e0f2fe; padding: 0.5rem; }
</style>
<div class="grid"><div>Ada 72</div><div>Ben 81</div></div>

Lab toolbar

<style>
  .bar { display: flex; justify-content: space-between; background: #f0fdfa; padding: 0.5rem; }
</style>
<div class="bar"><span>Harbor lab</span><span>ok · 12 mT</span></div>

3-4-5 chips

<style>
  .row { display: flex; gap: 0.5rem; }
  .row span { background: #e0e7ff; padding: 0.4rem 0.6rem; }
</style>
<div class="row"><span>3</span><span>4</span><span>5</span></div>

border-box tile

<style>
  * { box-sizing: border-box; }
  .box { width: 160px; padding: 16px; border: 4px solid #0f766e; background: #ccfbf1; }
</style>
<div class="box">160 px includes padding</div>