Miten luodaan: Tarrat

Opi, miten CSS:ää käytetään tarran tyyleihin asettamiseen。

Onnistuminen Tieto Varoitus Vaara Muu

Kokeile itse

Miten asettaa tarran tyylit

Vaihe 1 - Lisää HTML:

<span class="label success">Onnistuminen</span>
<span class="label info">Tieto</span>
<span class="label warning">Varoitus</span>
<span class="label danger">Vaara</span>
<span class="label other">Muu</span>

Vaihe 2 - Lisää CSS:

.label {
  väri: valkoinen;
  padding: 8px;
}
.success {taustaväri: #04AA6D;} /* vihreä */
.info {taustaväri: #2196F3;} /* sininen */
.warning {taustaväri: #ff9800;} /* oranssi */
.danger {taustaväri: #f44336;} /* punainen */
.other {taustaväri: #e7e7e7; väri: musta;} /* harmaa */

Kokeile itse