Wie man erstellt: Beschriftung

Lerne, wie man mit CSS die Stil der Beschriftung einstellt.

Erfolg Info Warnung Gefahr Andere

Selbst ausprobieren

Wie man die Stil der Beschriftung einstellt

Schritt 1 - HTML hinzufügen:

<span class="label success">Erfolg</span>
<span class="label info">Info</span>
<span class="label warning">Warnung</span>
<span class="label danger">Gefahr</span>
<span class="label other">Andere</span>

Schritt 2 - CSS hinzufügen:

.label {
  color: white;
  padding: 8px;
}
.success {background-color: #04AA6D;} /* Grün */
.info {background-color: #2196F3;} /* Blau */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Rot */
.other {background-color: #e7e7e7; color: black;} /* Grau */

Selbst ausprobieren