CSS Befehl#

h1 {
  color: red;
}

Selektor

Über den Selektor wird das jeweilige HTML-Element angesprochen, das gestylt werden soll. Die Angabe kann ein Element, eine Klasse, eine ID oder mehrere diese Angaben zusammen sein.
Eigenschaft

Welche Eigenschaft eines HTML-Elementes soll verändert werden - Schriftfarbe, Schriftgröße, Abstände, Position.
Eigenschafts-Wert

Der Eigenschafts-Wert gibt an, wie die Eigenschaft verändert werden soll - Wie groß soll die Schriftgröße sein, Welche Farbe soll die Schriftfarbe haben, Wieviel Abstand nach oben und unten, Wo soll sich das Element auf der Seite befinden.
Deklaration

Eigenschaft und Eigenschafts-Wert bilden zusammen die Deklaration oder die Anweisung.
Klammern, Doppelpunkt und Semikolon

Alle Anweisungen (Eigenschaft und Eigenschaftswert) werden in geschweifte Klammern geschrieben.

Die Eigenschaft und der Eigenschaftswert werden mit einem Doppelpunkt getrennt.

Jede Anweisung wird mit einem Semikolon getrennt. Der Browser weiß dann, dass die Anweisung beendet ist.

Mehrere Anweisungen zuweisen#

Es können mehrere Eigenschaften eines Elementes auf einmal verändert werden.

p {
  color: red;
  font-size: 35px;
}

Mehrere Elemente verändern#

Mehrere Elementen können die gleichen Eigenschaften zugewiesen bekommen. Dazu müssen die Selektoren nur durch ein Komma getrennt angegeben werden.

h2, p {
  color: red;
  font-size: 35px;
}

Verschachtelte Selektoren#

Eine HTML-Liste - ol oder ul - ist ein verschachteltes HTML-Element. Das Element li befindet sich innerhalb von ol oder ul. Wenn die li’s verändert werden sollen, die sich in einer ul-Liste befinden, muss der Selektor folgendermaßen gebildet werden. Erst das ul ansprechen werden und danach das li.

Bemerkung

Jedes li, dass sich in einer ul befindet wird angesprochen.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

<ol>
  <li>HTML 2</li>
  <li>CSS 2</li>
  <li>JS 2</li>
</ol>

ul li {
  color: aqua;
}

CSS einbinden#

Variante 1#

Dem HEAD wird ein Style-Element hinzugefügt, dem alle Style-Eigenschaften hinzugefügt werden.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dokumenten Titel</title>
  <!--In einem Style Element-->
  <style>
    h1 {
      color: blue;
    }
  </style>
<!-- Style Elemente Ende -->
</head>

Variante 2#

Mittels der Inline-Variante wird dem HTML-Element ein style-Attribut hinzugefügt, dass als Werte die CSS-Eigenschaften beinhaltet.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dokumenten Titel</title>
</head>

<body>
  <!-- Inline - Direkt am Element -->
  <h1 style="color: blue;">Überschrift 1</h1>
</body>

</html>

Variante 3#

Als externe Datei - im HEAD wird auf die Datei verlinkt - die mittels dem Link-Element und dem href-Attribut eingebunden wird.

Zusätzlich musss das rel-Attribut angegeben werden. Das rel-Attribut spezifiziert die Verbindung zwischen den beiden Dateien. Bei einer CSS-Datei ist der Wert des rel-Attributs immer stylesheet - es handelt sich um eine Design-Datei.

Das Link-Element ist ein selbstschließendes Element. Dies ist die bevorzugte Methode CSS in HTML einzubinden. Dadurch werden die Struktur und das Design voneinander getrennt.

<!DOCTYPE html>
<html lang="de">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dokumenten Titel</title>
  <!-- Als link zu einer CSS Datei -->
  <link href="styles.css" rel="stylesheet">
</head>

<body>

</body>

</html>