Struktur und Gestaltung jeder Webseite
Ausführen: Datei index.html mit einem Texteditor anlegen und per Doppelklick im Browser öffnen. Änderungen mit F5 neu laden. Fast alle Beispiele hier kannst du direkt unter "Probier es selbst" ändern und ausführen.
F12 kannst du jede Seite untersuchen<h1>Hallo Welt!</h1>
<p>Das ist meine <strong>erste</strong> Webseite.</p>DOCTYPE, html lang, head (meta, title), bodybr, img, input, hr)<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mein erster Seitentitel</title>
</head>
<body>
<h1>Willkommen</h1>
<p>Hier steht der sichtbare Inhalt.</p>
</body>
</html><h1> bis <h6> gliedern; nur eine <h1>, keine Ebenen überspringen<p> für Absätze, <br> für Zeilenumbruch, <hr> als Trennlinie<strong> (wichtig) und <em> (betont) tragen Bedeutung, <b>/<i> nur Stil<code>, <pre>, <kbd>, <q>, <blockquote>, <time> für spezielle Inhalte<, >, &, <h1>Hauptüberschrift (nur eine pro Seite)</h1>
<h2>Abschnitt</h2>
<h3>Unterabschnitt</h3>
<h4>Noch kleiner</h4><a href="..."> erzeugt Links; target="_blank" mit rel="noopener" für neue Tabs#id); ../ geht eine Ebene hochmailto:, tel: und download für besondere Aktionen<nav>, mit aria-current für die aktuelle Seite<p><a href="https://example.org">Externer Link</a></p>
<p><a href="https://example.org" target="_blank" rel="noopener noreferrer">In neuem Tab öffnen</a></p>
<p><a href="#ziel">Springe zum Ziel auf dieser Seite</a></p>
<div style="height:120px">Platzhalter</div>
<h2 id="ziel">Hier ist das Ziel</h2><img src alt width height>: alt ist Pflicht (leer bei reiner Dekoration)srcset, sizes und <picture> liefern passende Bilder je Gerätloading="lazy" für Bilder außerhalb des sichtbaren Bereichs<figure> und <figcaption> beschriften Abbildungen<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23fde68a'/%3E%3Ccircle cx='100' cy='60' r='35' fill='%23f59e0b'/%3E%3C/svg%3E"
alt="Eine orange Sonne auf gelbem Hintergrund" width="200" height="120"><ul> mit <li>: ungeordnet; <ol>: geordnet; <dl> mit <dt>/<dd>: Begriff und Erklärung<li><h3>Einkaufsliste</h3>
<ul>
<li>Brot</li>
<li>Milch</li>
<li>Äpfel
<ul>
<li>Boskoop</li>
<li>Elstar</li>
</ul>
</li>
</ul>table, tr, th, td, caption, thead/tbody/tfootscope ordnet Kopfzellen zu; colspan/rowspan verbinden Zellenborder-collapse, padding, nth-child für Zebrastreifen<table>
<caption>Notenübersicht</caption>
<thead>
<tr><th scope="col">Name</th><th scope="col">Mathe</th><th scope="col">Deutsch</th></tr>
</thead>
<tbody>
<tr><th scope="row">Mia</th><td>1</td><td>2</td></tr>
<tr><th scope="row">Tom</th><td>3</td><td>1</td></tr>
</tbody>
<tfoot>
<tr><th scope="row">Schnitt</th><td>2,0</td><td>1,5</td></tr>
</tfoot>
</table>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #999; padding: 6px 12px; text-align: left; }
thead th { background: #e0e7ff; }
caption { font-weight: bold; margin-bottom: 6px; }
</style><form action method> mit Feldern, jedes mit <label for> und nametypes (email, number, date, ...) helfen bei Tastatur und Prüfungname; fieldset/legend für Gruppenrequired, pattern, min/max prüfen im Browser; der Server prüft trotzdemplaceholder ersetzt kein label<form action="/senden" method="post">
<p>
<label for="name">Name</label><br>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="mail">E-Mail</label><br>
<input type="email" id="mail" name="mail" required>
</p>
<p>
<label for="nachricht">Nachricht</label><br>
<textarea id="nachricht" name="nachricht" rows="4" cols="30"></textarea>
</p>
<button type="submit">Absenden</button>
</form>header, nav, main, article, section, aside, footer<main>; <section> braucht eine Überschrift<details>/<summary> und <dialog> bringen Funktion ohne viel JavaScriptdiv/span nur, wenn nichts Passenderes existiert<header>
<h1>Mein Blog</h1>
<nav aria-label="Hauptmenü"><a href="#">Start</a> <a href="#">Archiv</a> <a href="#">Kontakt</a></nav>
</header>
<main>
<article>
<h2>Ein toller Artikel</h2>
<p><time datetime="2025-03-08">8. März 2025</time> von Mia</p>
<section>
<h3>Einleitung</h3>
<p>Der Text beginnt hier.</p>
</section>
<section>
<h3>Fazit</h3>
<p>Und endet dort.</p>
</section>
</article>
<aside>
<h2>Das könnte dich auch interessieren</h2>
<ul><li><a href="#">Anderer Artikel</a></li></ul>
</aside>
</main>
<footer><p>© 2025 Mia. <a href="#">Impressum</a> · <a href="#">Datenschutz</a></p></footer>
<style>
header, footer { background: #e0e7ff; padding: 8px 12px; }
article { background: #f8fafc; padding: 8px 12px; border: 1px solid #cbd5e1; }
aside { background: #fef9c3; padding: 8px 12px; margin-top: 8px; }
</style><video> und <audio> mit controls; mehrere <source> für Formate<iframe> braucht title; sandbox begrenzt Fremdinhalteposter, preload, loading="lazy" sparen Ladezeit<video controls width="480" poster="vorschau.jpg" preload="metadata">
<source src="film.webm" type="video/webm">
<source src="film.mp4" type="video/mp4">
<track kind="subtitles" src="untertitel-de.vtt" srclang="de" label="Deutsch" default>
<p>Dein Browser kann das Video nicht abspielen. <a href="film.mp4">Video herunterladen</a></p>
</video><head> enthält title, meta, link, style, script, nichts Sichtbares<title> und eine description<script defer> oder type="module"id ist einmalig, class mehrfach verwendbar, data-* für eigene Daten<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pfannkuchen-Rezept | Meine Kochseite</title>
<meta name="description" content="Das beste Pfannkuchen-Rezept mit nur vier Zutaten.">
<meta name="theme-color" content="#1e3a8a">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="stil.css">
<link rel="canonical" href="https://beispiel.de/pfannkuchen">
<meta property="og:title" content="Pfannkuchen-Rezept">
<meta property="og:image" content="https://beispiel.de/bild.jpg">
<script src="app.js" defer></script>
</head><style>
a, button, input { outline-offset: 2px; }
/* Fokus sichtbar machen: nie 'outline: none' ohne Ersatz! */
:focus-visible { outline: 3px solid #1d4ed8; }
.karte { display: inline-block; padding: 10px 14px; border: 1px solid #94a3b8; margin: 4px; }
</style>
<p>Drücke Tab:</p>
<a class="karte" href="#">Link 1</a>
<button class="karte">Button</button>
<input class="karte" placeholder="Eingabe">eigenschaft: wert;)rem für Schrift und Abstände, %/fr/vw für Layoutmargin, padding, border, font fassen mehrere Werte zusammenselektor {
eigenschaft: wert;
eigenschaft: wert;
}.klasse, #id, Kombinatoren ( , >, +, ~), Attribute [x^="..."]:hover, :focus-visible, :nth-child, :not, :has) beschreiben Zustände::before, ::after, ::first-line) beschreiben Teile!important<style>
nav a { color: navy; } /* alle Links im nav */
ul > li { list-style: square; } /* nur direkte Kinder */
h2 + p { font-weight: bold; } /* erster Absatz direkt nach h2 */
h2 ~ p { color: #555; } /* alle Absätze danach */
</style>
<nav><a href="#">Link im Menü</a></nav>
<ul><li>Eins<ul><li>verschachtelt</li></ul></li><li>Zwei</li></ul>
<h2>Titel</h2>
<p>Direkt nach h2 (fett)</p>
<p>Weiterer Absatz (grau)</p>rgb(), hsl(), oklch(); Alpha für Transparenzopacity macht das ganze Element durchsichtig, rgb(... / 50%) nur die Farbebackground-size: cover und background-position: center für Bilderlinear-gradient, radial-gradient, conic-gradient<style>
.k { padding: 8px; margin: 3px 0; color: white; }
</style>
<div class="k" style="background: crimson">Name: crimson</div>
<div class="k" style="background: #1e90ff">Hex: #1e90ff</div>
<div class="k" style="background: #1e90ff80">Hex mit Transparenz: #1e90ff80</div>
<div class="k" style="background: rgb(34 139 34)">rgb(34 139 34)</div>
<div class="k" style="background: rgb(0 0 0 / 40%)">rgb mit Alpha: 40 %</div>
<div class="k" style="background: hsl(280 60% 45%)">hsl(280 60% 45%)</div>
<div class="k" style="background: oklch(60% 0.2 30)">oklch(60% 0.2 30)</div>font-family ist ein Stapel mit generischer Familie am Ende; eigene Schriften per @font-face und WOFF2rem für Größe, line-height ohne Einheit (1,5 bis 1,7)max-width: 65ch begrenzt die Zeilenlängetext-align, letter-spacing, text-transform, text-overflow: ellipsis, hyphens: autoclamp() macht Schriftgrößen flüssig; text-wrap: balance verbessert Überschriften<style>
p { font-size: 1.1rem; line-height: 1.6; }
.a { font-family: Georgia, "Times New Roman", serif; }
.b { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.c { font-family: ui-monospace, Menlo, Consolas, monospace; }
.d { font-family: cursive; }
</style>
<p class="a">Serifen: Georgia, für längere Texte (serif)</p>
<p class="b">Systemschrift: schnell und vertraut (sans-serif)</p>
<p class="c">Nichtproportional: Code und Zahlen (monospace)</p>
<p class="d">Kursive Zierschrift (cursive)</p>box-sizing: border-box für alle Elementemargin: 0 auto zentriert Blöcke mit begrenzter Breitemax-width: 100%; height: auto macht Bilder flexibel; overflow steuert Überlaufbox-shadow und border-radius brauchen keinen Platz im Layout<style>
.box {
width: 200px;
padding: 20px;
border: 5px solid #1e3a8a;
margin: 30px;
background: #dbeafe;
}
.rahmen { outline: 1px dashed crimson; } /* outline zeigt den Außenrand ohne Platz zu brauchen */
</style>
<div class="box rahmen">Ich bin eine Box mit Innenabstand, Rahmen und Außenabstand.</div>display bestimmt das Flussverhalten: block, inline, inline-block, none, flex, griddisplay: none entfernt völlig, visibility: hidden behält den Platzposition: relative + absolute platziert in einem Elternelement; fixed am Fenster; sticky klebtz-index ordnet die Überlagerung; Stapelkontexte beachtenfloat lieber Flexbox und Grid<style>
.box { background: #bfdbfe; padding: 6px; margin: 2px; border: 1px solid #1e40af; }
.b { display: block; }
.i { display: inline; width: 200px; height: 50px; } /* Größe wirkt nicht */
.ib { display: inline-block; width: 100px; height: 40px; vertical-align: top; }
.n { display: none; }
</style>
<span class="box b">block</span>
<span class="box i">inline (Größen wirken nicht)</span>
<span class="box ib">inline-block</span><span class="box ib">nebeneinander</span>
<span class="box n">unsichtbar und ohne Platz</span>display: flex am Container; flex-direction legt die Hauptachse festjustify-content verteilt entlang der Hauptachse, align-items richtet quer ausgap für Abstände, flex-wrap: wrap für Umbrücheflex: 1 macht Kinder gleich breit, flex: 0 0 120px festmargin-left: auto schiebt Elemente nach rechtsdisplay: flex; justify-content: center; align-items: center zentrierst du alles<style>
.reihe { display: flex; gap: 10px; background: #f1f5f9; padding: 10px; }
.reihe > div { background: #6366f1; color: white; padding: 14px; border-radius: 6px; }
</style>
<div class="reihe"><div>Eins</div><div>Zwei</div><div>Drei</div></div>display: grid mit grid-template-columns und -rowsfr teilt Platz in Anteile; repeat() und minmax() sparen Schreibarbeitrepeat(auto-fit, minmax(200px, 1fr)) ergibt ein responsives Raster ohne Media Queriesgrid-column/grid-row und grid-template-areas platzieren Elementeplace-items: center zentriert in allen Zellen<style>
.raster { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.raster > div { background: #8b5cf6; color: white; padding: 20px; text-align: center; border-radius: 6px; }
</style>
<div class="raster"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>max-width: 100% für Bilder@media (min-width: ...) für großauto-fit/minmax und Flexbox mit wrap reduzieren Media Queriesprefers-color-scheme und prefers-reduced-motion respektieren<meta name="viewport" content="width=device-width, initial-scale=1">--name: wert; definieren, var(--name, rückfall) benutzen; auf :root globalcalc() mischt Einheiten, min(), max(), clamp() begrenzen Wertecolor-mix(), attr(), counter() erweitern CSS um Rechnen und Zählenstyle.setProperty ändern<style>
:root {
--primaer: #4f46e5;
--akzent: #f59e0b;
--abstand: 1rem;
--radius: 10px;
}
.karte {
background: white;
border: 2px solid var(--primaer);
border-radius: var(--radius);
padding: var(--abstand);
margin: var(--abstand) 0;
}
.karte h3 { color: var(--primaer); margin-top: 0; }
.karte button { background: var(--akzent); border: 0; padding: .5em 1em; border-radius: var(--radius); }
body { background: #f1f5f9; }
</style>
<div class="karte"><h3>Karte</h3><button>Aktion</button></div>
<div class="karte"><h3>Noch eine</h3><button>Aktion</button></div>transform (verschieben, drehen, skalieren) und opacity sind die effizientesten Animationseigenschaftentransition macht Zustandswechsel weich (hover, focus, Klassenwechsel)@keyframes + animation für Abläufe, auch endlosprefers-reduced-motion<style>
.reihe { display: flex; gap: 30px; padding: 30px; }
.reihe div { width: 60px; height: 60px; background: #6366f1; color: white; display: grid; place-items: center; }
.t1 { transform: translate(20px, 10px); }
.t2 { transform: rotate(25deg); }
.t3 { transform: scale(1.4); }
.t4 { transform: skew(20deg, 0); }
.t5 { transform: rotate(45deg) scale(.8) translateX(10px); } /* Reihenfolge zählt */
</style>
<div class="reihe"><div class="t1">move</div><div class="t2">rotate</div><div class="t3">scale</div><div class="t4">skew</div><div class="t5">alle</div></div>&, Ebenen mit @layer:has() wählt Eltern, :is()/:where() gruppieren, :user-invalid meldet Eingabefehlerdvh, cqw, lh; aspect-ratio, inset, gap vereinfachen Layoutsmargin-inline) funktionieren in jeder Schreibrichtungscroll-snap, text-wrap: balance ersetzen viel JavaScript<style>
.karte {
padding: 14px; border: 2px solid #cbd5e1; border-radius: 10px; background: white;
h3 { margin: 0 0 6px; color: #1e3a8a; }
p { margin: 0; color: #475569; }
a { color: #2563eb;
&:hover { text-decoration: underline wavy; }
}
&:hover { border-color: #6366f1; }
&.wichtig { border-color: crimson; }
@media (min-width: 500px) { padding: 22px; }
}
body { background: #f1f5f9; }
</style>
<div class="karte"><h3>Verschachtelt</h3><p>Regeln stehen im Elternselektor.</p><a href="#">Link</a></div>!important, keine IDs für Stil*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.6; font-family: system-ui, sans-serif; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; line-height: 1.2; }<style>
:root {
--bg: #ffffff; --text: #0f172a; --grau: #64748b; --karte: #f1f5f9;
--primaer: #4f46e5; --primaer-dunkel: #3730a3; --akzent: #f59e0b;
--radius: 14px; --max: 960px;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #0f172a; --text: #f1f5f9; --grau: #94a3b8; --karte: #1e293b; --primaer: #818cf8; --primaer-dunkel: #a5b4fc; }
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font: 1rem/1.6 system-ui, sans-serif; background: var(--bg); color: var(--text); }
.container { width: min(100% - 2rem, var(--max)); margin-inline: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; }
/* Kopfzeile */
header { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--karte); z-index: 10; }
header .container { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }
.logo { font-weight: 900; font-size: 1.2rem; margin-right: auto; text-decoration: none; }
nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
nav a { text-decoration: none; color: var(--grau); }
nav a:hover { color: var(--text); }
@media (max-width: 560px) { nav { display: none; } }
/* Buttons */
.btn { display: inline-block; padding: .7em 1.3em; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid var(--primaer); background: var(--primaer); color: #fff; transition: transform .15s, background .15s; }
.btn:hover { background: var(--primaer-dunkel); transform: translateY(-2px); }
.btn--zweit { background: transparent; color: var(--primaer); }
/* Hero */
.hero { padding-block: clamp(2.5rem, 8vw, 5rem); text-align: center; }
.hero h1 { font-size: clamp(2rem, 1rem + 5vw, 3.6rem); line-height: 1.1; margin: 0 0 1rem; text-wrap: balance; }
.hero h1 span { background: linear-gradient(90deg, var(--primaer), var(--akzent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { max-width: 55ch; margin: 0 auto 1.5rem; color: var(--grau); font-size: 1.15rem; }
.hero .aktionen { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }
/* Funktionen */
.raster { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); padding-bottom: 3rem; }
.karte { background: var(--karte); padding: 1.3rem; border-radius: var(--radius); transition: transform .2s; }
.karte:hover { transform: translateY(-4px); }
.karte .icon { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--primaer); color: #fff; font-weight: 900; }
.karte h3 { margin: .4rem 0; }
.karte p { margin: 0; color: var(--grau); }
/* Preise */
.preise { padding-block: 2rem 3rem; }
.preise h2, .funktionen h2 { text-align: center; font-size: 1.8rem; }
.preisliste { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
.preis { border: 2px solid var(--karte); border-radius: var(--radius); padding: 1.3rem; text-align: center; }
.preis--top { border-color: var(--primaer); position: relative; }
.preis--top::before { content: "Beliebt"; position: absolute; top: -.8rem; left: 50%; translate: -50%; background: var(--akzent); color: #000; font-size: .75rem; font-weight: 800; padding: .15rem .7rem; border-radius: 999px; }
.preis .betrag { font-size: 2.4rem; font-weight: 900; }
.preis ul { list-style: none; padding: 0; margin: 1rem 0; color: var(--grau); }
.preis li::before { content: "✓ "; color: var(--primaer); font-weight: 900; }
/* FAQ */
details { border-bottom: 1px solid var(--karte); padding: .8rem 0; }
summary { cursor: pointer; font-weight: 700; }
footer { background: var(--karte); padding-block: 1.5rem; text-align: center; color: var(--grau); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
</style>
<a href="#inhalt" style="position:absolute;left:-999px">Zum Inhalt springen</a>
<header>
<div class="container">
<a class="logo" href="#">Lerni<span style="color:var(--akzent)">.</span></a>
<nav aria-label="Hauptmenü">
<ul><li><a href="#funktionen">Funktionen</a></li><li><a href="#preise">Preise</a></li><li><a href="#faq">FAQ</a></li></ul>
</nav>
<a class="btn" href="#preise">Starten</a>
</div>
</header>
<main id="inhalt">
<section class="hero container">
<h1>Lerne Programmieren, <span>Schritt für Schritt</span></h1>
<p>Kleine Lektionen, echte Beispiele und sofortiges Feedback. Direkt im Browser, ohne Installation.</p>
<div class="aktionen">
<a class="btn" href="#preise">Kostenlos starten</a>
<a class="btn btn--zweit" href="#funktionen">Mehr erfahren</a>
</div>
</section>
<section class="funktionen container" id="funktionen" aria-labelledby="f-titel">
<h2 id="f-titel">Alles, was du zum Lernen brauchst</h2>
<div class="raster">
<article class="karte"><div class="icon" aria-hidden="true">1</div><h3>Kleine Lektionen</h3><p>Zehn Minuten am Tag reichen für echten Fortschritt.</p></article>
<article class="karte"><div class="icon" aria-hidden="true">2</div><h3>Sofort ausprobieren</h3><p>Code im Browser ausführen und Ergebnisse direkt sehen.</p></article>
<article class="karte"><div class="icon" aria-hidden="true">3</div><h3>Abzeichen</h3><p>Sammle Erfolge und verfolge deine Lernserie.</p></article>
</div>
</section>
<section class="preise container" id="preise" aria-labelledby="p-titel">
<h2 id="p-titel">Faire Preise</h2>
<div class="preisliste">
<div class="preis"><h3>Free</h3><div class="betrag">0 €</div><ul><li>Alle Grundkurse</li><li>Quizze</li></ul><a class="btn btn--zweit" href="#">Wählen</a></div>
<div class="preis preis--top"><h3>Plus</h3><div class="betrag">5 €<small style="font-size:.9rem">/Monat</small></div><ul><li>Alle Kurse</li><li>Zertifikate</li><li>Keine Werbung</li></ul><a class="btn" href="#">Wählen</a></div>
<div class="preis"><h3>Team</h3><div class="betrag">20 €<small style="font-size:.9rem">/Monat</small></div><ul><li>Bis 10 Personen</li><li>Fortschrittsberichte</li></ul><a class="btn btn--zweit" href="#">Wählen</a></div>
</div>
</section>
<section class="container" id="faq" aria-labelledby="q-titel" style="padding-bottom:3rem">
<h2 id="q-titel" style="text-align:center">Häufige Fragen</h2>
<details><summary>Brauche ich Vorkenntnisse?</summary><p>Nein, die Kurse beginnen bei null.</p></details>
<details><summary>Kann ich jederzeit kündigen?</summary><p>Ja, monatlich und ohne Frist.</p></details>
<details><summary>Funktioniert es auf dem Handy?</summary><p>Ja, die Seite passt sich jeder Bildschirmgröße an.</p></details>
</section>
</main>
<footer><div class="container"><p>© 2025 Lerni. <a href="#">Impressum</a> · <a href="#">Datenschutz</a></p></div></footer>@media (min-width: 600px) { ... } /* ab 600px */
@media (prefers-color-scheme: dark) { ... }
@media (prefers-reduced-motion: reduce) { ... }
@media (hover: hover) and (pointer: fine) { ... }
@media print { ... }
@container (min-width: 400px) { ... }