CSS-Lehrbuch – Lektion 3 – Die Eigenschaften background-color, font-style, font-weight, text-align, text-decoration, text-transform.

26/05/2025, by Ivan

Im Laufe der HTML-Geschichte wurden viele Tags erfunden, von denen man mit der flächendeckenden Nutzung von CSS auf einige verzichten wird müssen, darunter , , , <center>. Später werden wir weitere „verbotene“ Tags betrachten. Diese CSS-Eigenschaften helfen Ihnen auch, überflüssigen Code im HTML zu vermeiden und stattdessen in CSS-Dateien auszulagern.

In der letzten Lektion haben wir besprochen, wie man CSS-Eigenschaften hinzufügt und Farben für diese Eigenschaften auswählt. In dieser Lektion behandeln wir eine Reihe von Eigenschaften, die Ihnen beim Erlernen von HTML begegnet sein könnten, die Sie aber möglicherweise früher mit Tags umgesetzt haben. Jetzt machen wir das mit CSS, was der korrektere Weg ist.

Also, die erste Eigenschaft in dieser Lektion ist background-color.

Background-color

Diese Eigenschaft können wir nicht nur für Hintergrundfarben von Blöcken, sondern auch für normalen Text und Links verwenden. Zum Beispiel so:

span{
  background-color: yellow;
}

Oder für Links:

a{
  background-color: blue;
}

Background color

Farben können wie bei der Eigenschaft color auch mit Zahlenwerten angegeben werden, z.B. #ff0000 (was rot ist).

Font-style

Sie sind vielleicht schon auf die Tags oder (fettgedruckt), (kursiv), font (ein „böser“ Tag, der alles mit dem Text macht) gestoßen. Um nicht viele solcher Tags zu verwenden, gibt es die CSS-Eigenschaft font-style. Die gebräuchlichsten Werte dieser Eigenschaft sind:

p{
  font-style: italic; /* kursiv */
}

Damit ersetzen wir das -Tag durch die Eigenschaft font-style mit dem Wert italic.

font-style

Font-weight

Unter den veralteten Tags ist auch , das Text fett macht. Heute reicht die Verwendung der Eigenschaft font-weight:

body{
  font-weight: normal; /* normaler Schriftschnitt */
}
 
p{
 font-weight: 400; /* normaler Schriftschnitt */
}
 
span{
  font-weight: 700; /* fett */
}
 
a{
  font-weight: bold; /* fett */
}

Für font-weight sind folgende Werte möglich: 400 oder normal für normalen Schriftschnitt und 700 oder bold für fett.

CSS font-weight

Text-align

Die Eigenschaft text-align ersetzt das Tag <center> und das HTML-Attribut align. Die Nutzung sieht so aus:

body{
  text-align: left; /* linksbündig */
}
 
p{
  text-align: center; /* zentriert */
}
 
span{
  text-align: right; /* rechtsbündig */
}
 
div{
  text-align: center; /* zentriert */
}

Das ist sehr anschaulich in der folgenden Grafik dargestellt:

CSS text-align

Text-decoration

Statt der Tags <strike> (durchgestrichen), (unterstrichen) kann man jetzt die CSS-Eigenschaft text-decoration verwenden:

.underline{
  text-decoration: underline; /* unterstrichen */
}
 
.line-through{
  text-decoration: line-through; /* durchgestrichen */
}

CSS text-decoration

Text-transform

Eine weitere nützliche CSS-Eigenschaft ist text-transform. Damit kann man alle Buchstaben großschreiben oder klein schreiben lassen.

CSS text-transform

Versuchen Sie nicht, alle CSS-Eigenschaften sofort zu merken. Wenn Sie gelegentlich zu den benötigten Eigenschaften zurückkehren, werden Sie mit der Zeit die wichtigsten und häufigsten behalten, und die anderen können Sie bei Bedarf nachschlagen.

Extra Block Types (EBT) - Neue Erfahrung im Layout Builder❗

❗Extra Absatztypen (EPT) - Erfahrung mit neuen Absätzen