Table of Contents
Mit Inline-CSS gestaltest du einzelne Elemente direkt im HTML einer Stage, eines Buckets oder einer E-Mail. Du schreibst die Gestaltung in das Attribut style. Für Gestaltungen, die du öfter brauchst, lohnt sich eine eigene Klasse im globalen CSS, siehe CSS-Selektoren.
Text #
<p style="color: #3C8DBC; font-size: 18px;">Blauer Text in 18 px</p>
<p style="font-weight: bold;">Fetter Text</p>
<p style="text-align: center;">Zentrierter Text</p>
<span style="background-color: yellow;">Gelb markiert</span>
Abstände, Rahmen und Hintergrund #
<div style="padding: 16px; margin-bottom: 20px;
background: #f5f5f5; border: 1px solid #ddd;
border-radius: 8px;">
Eine graue Box mit Rahmen und runden Ecken
</div>
Bilder #
<img src="https://example.com/bild.jpg" alt="Beschreibung"
style="width: 100%; max-width: 400px; border-radius: 8px;">
Links und Buttons #
<a href="https://example.com" target="_blank"
style="color: green; text-decoration: none;">Grüner Link</a>
<a href="https://example.com"
style="display: inline-block; padding: 10px 20px;
background: #3C8DBC; color: #fff; border-radius: 4px;">
Zum Programm
</a>
Listen #
<ul style="list-style-type: square;">
<li>Punkt 1</li>
<li>Punkt 2</li>
</ul>
Nebeneinander anordnen #
<div style="display: flex; gap: 16px;">
<div style="flex: 1;">Linke Spalte</div>
<div style="flex: 1;">Rechte Spalte</div>
</div>
Alternativ nutzt du die Bootstrap-Klassen row und col-md-6, die in allen Stages verfügbar sind.
Gut zu wissen #
- Mehrere Eigenschaften trennst du mit Semikolon.
- In E-Mails solltest du Inline-CSS verwenden, weil viele E-Mail-Programme
<style>-Blöcke nicht zuverlässig unterstützen. - Eine vollständige Übersicht aller CSS-Eigenschaften findest du bei SELFHTML.
Verwandt: CSS-Selektoren, Eine Stage erstellen, Ein Admin-Dashboard erstellen
