CSS Schnellstart – Inline Styles – style-Element und style-Attribut

Du hast nun in einem Beispiel gesehen, wie eine CSS-Regel benutzt wurde. Das ist nur ein Weg von dreien um CSS in HTML zu benutzen.

Sehen wir uns den ersten Weg an. Dazu gibt es das style-Element in HTML, welches in das head-Element deines HTML-Dokumentes eingetragen wird:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    p {
      color: blue;
    }
  </style>
</head>

 

Das ist für Anfänger der einfachste Weg CSS zu nutzen.

In manchen Fällen ist es nicht möglich an das head-Element zu kommen, z.B. wenn man einen Beitrag in WordPress schreibt. Dafür gibt es das style-Attribut:

<p style="color: red;">Ich bin rot!</p>

Wie du siehst, kannst du dort keinen Selektor angeben. Die Regel gilt dann nur für das Element selbst.

Das sind zwei Wege um CSS direkt IM HTML-Dokument zu erstellen. In der nächsten Lektion gehen wir auf einen 3. Weg ein.

Schau dir in der Übung die ersten beiden Wege an: