CSS-Inliner
Wofür ein CSS-Inliner wirklich da ist
E-Mail ist kein Browser-Tab. Gmail, Outlook, GMX, Web.de und die meisten ESP-Vorschauen entscheiden selbst, welches CSS sie mitspielen. Ein `<link rel="stylesheet">` auf deine Marken-CSS wird oft ignoriert. Ein `<style>`-Block im `<head>` überlebt in manchen Clients und verschwindet in anderen. Relativ zuverlässig sind schlichtes HTML und Darstellung als `style`-Attribute an den Tags, die sie brauchen. Ein CSS-Inliner lässt dich Struktur in HTML und Regeln in CSS weiter trennen — wie beim Web — und schreibt passende Deklarationen in einem Durchlauf auf die Elemente. Die Datei für Mailchimp, CleverReach, Brevo oder deine Transaktions-Pipeline bleibt HTML, hängt aber nicht mehr davon ab, dass ein Stylesheet korrekt nachgeladen wird. Diese Seite ist für den letzten Schritt vor dem Versand: links HTML und CSS in eigenen Tabs (oder .html und .css gemeinsam importieren), „CSS inline setzen“, rechts das Ergebnis prüfen. Passt es, kopieren, herunterladen oder mit „HTML-Vorschau“ auf der Startseite im Playground durchklicken, bevor du eine Testmail schickst.
Externe Stylesheets und eingebettetes CSS — nicht nur eine Quelle
Viele Online-Inliner setzen voraus, dass dein CSS schon im HTML steckt — meist ein `<style>` aus dem Design-Tool. In der Praxis liegt es aber oft getrennt vor: `template.html` plus `styles.css` aus Build, Figma-Export oder Static Site Generator. Dann heißt es manuell zusammenfügen oder ein CLI, das du vierteljährlich brauchst. Unser CSS-Inliner behandelt beides gleichwertig: Markup im HTML-Tab, Regeln im CSS-Tab, oder Import von bis zu zwei Dateien (`.html` und `.css`). CSS aus dem Tab wird zusammen mit vorhandenen `<style>`-Blöcken im HTML angewendet. Die Ausgabe ist ein HTML-String mit Inline-`style`-Attributen; die `<style>`-Tags entfallen — so erwarten es die meisten E-Mail-Workflows. Das zählt für Newsletter und Transaktionsmails: Buttons und Typo in einer gemeinsamen CSS-Datei, HTML-Fragmente von verschiedenen Leuten. Ohne externe CSS-Unterstützung bleibst du hängen, sobald das Projekt wie im Repo aufgeteilt ist.
Die Verarbeitung läuft nach dem Laden im Browser — kein Konto, kein Upload. `:hover`, `::before` und nicht auflösbare Selektoren werden übersprungen und unter „Hinweise“ gelistet. Einfache `@media`-Blöcke werden für die Inline-Umwandlung aufgelöst; responsives Verhalten in der Inbox weicht vom Web ab — teste immer in den Zielclients. Zum Gegencheck von Abständen oder Klassen: „HTML-Vorschau“ schickt das Inline-HTML in den Playground der Startseite — praktisch, bevor du in das ESP einfügst.
CSS-Inliner öffnenHTML-Tab + CSS-Tab
Struktur und Darstellung getrennt bearbeiten wie im Repo. Wenn es passt, inline setzen und die Versandversion erzeugen.
Zwei Dateien auf einmal
.html und .css gemeinsam importieren — weniger Risiko durch abgeschnittenes Einfügen.
Vorschau auf der Startseite
Inline-HTML in neuem Tab im Playground prüfen, dann ins ESP kopieren.
CSS-Inliner für E-Mail mit externen Stylesheets
Viele Tools schreiben nur CSS um, das schon im HTML eingebettet ist. Hier kommen separate .css-Dateien und <style>-Tags im Markup — in einem Lauf — und danach Kopieren, Download oder Vorschau.
Externe .css ohne vorheriges Zusammenfügen
Liegt `email.css` neben `template.html`, einfach importieren oder in beide Tabs einfügen. Selektoren werden auf Elemente gemappt und als `style` geschrieben — so erwarten Postfächer es. Du musst das Stylesheet nicht erst per Hand ins HTML mergen. `<style>`-Abschnitte im HTML laufen im selben Durchgang mit. Rechts siehst du das komplette Inline-HTML nur lesend. Kopieren über das Icon in der Ausgabeleiste, `inlined.html` aus der Toolbar, „HTML-Vorschau“ für den Playground. Alles lokal im Browser.
- Eigener CSS-Tab für echte Projektstruktur
- Externes CSS + <style> in einem Durchlauf
- Hinweise zu übersprungenen Regeln
- Lokal im Browser, kein Upload
CSS für E-Mail-Templates inline setzen
HTML und CSS einfügen
Template in den HTML-Tab. Buttons, Typo, Utilities in den CSS-Tab — oder .html und .css zusammen importieren. `<style>` im head kann bleiben, wird mit inline gesetzt.
„CSS inline setzen“ ausführen
Passende Regeln landen in style-Attributen. Unter „Hinweise“ siehst du Übersprungenes. Links weiter editierbar, rechts das Ergebnis — bei Bedarf erneut ausführen.
Prüfen und versenden
Kopieren, speichern oder HTML-Vorschau auf der Startseite. Ins ESP einfügen, Test an Gmail und Outlook, die freigegebene .html aufbewahren.
FAQ zum CSS-Inliner
Nächster Versand — CSS schon inline?
HTML einfügen, externes oder eingebettetes CSS ergänzen, inline setzen. Mit Test-Postfach abgleichen, dann speichern oder kopieren.
CSS-Inliner
- Externe .css und HTML in einem Lauf
- Eingebettete <style>-Blöcke ebenfalls
- HTML-Vorschau im Playground
- No signup; use the tool in the browser
Nach dem Inline-Setzen eine echte Testmail schicken — die Vorschau reicht nicht.
Eine HTML-Datei fürs ESP
Einmal inline, in die Kampagne einfügen, freigegebene Version ablegen.