CSS-Kurs / Was ist CSS und wie unterscheidet es sich von HTML?

CSS (Cascading Style Sheets) steuert das Aussehen und Layout eines HTML-Dokuments, einschließlich Farben, Schriftarten, Abstände und Platzierung von Elementen. HTML beschreibt den Inhalt und seine Struktur; CSS bestimmt, wie diese Struktur dargestellt wird.

Wie HTML und CSS Verantwortlichkeiten aufteilen

Stellen Sie sich vor, Sie erstellen eine Seite mit Garteninformationen. Die Tatsache, dass „Small Garden“ (Kleiner Garten) der wichtigste Titel auf der Seite ist, wird in HTML durch h1 dargestellt. CSS bestimmt, ob der Titel in Grün angezeigt wird und welche Schriftgröße er hat. Nur weil die Farbe grün ist, bedeutet das nicht, dass ein normaler Absatz die Bedeutung eines Titels hat.

JavaScript ist eine Programmiersprache, die Webseiten Verhalten hinzufügt. Mit CSS kann auch die Form geändert oder eine Animation angezeigt werden, wenn die Maus darüber schwebt, sodass eine Änderung des Bildschirms nicht unbedingt bedeutet, dass JavaScript verwendet wurde. Hier konzentrieren wir uns zunächst darauf, Inhalt und Erscheinungsbild zu trennen.

Warum eine Seite Styles hat, bevor Sie CSS schreiben

Browser haben Standardstile. Deshalb erscheinen Überschriften groß, es gibt Abstände zwischen Absätzen und Links sind unterstrichen, ohne dass man direkt CSS schreiben muss. Standard-Schriftarten und -Ränder können je nach Browser und Benutzereinstellungen variieren. Durch Hinzufügen von CSS können Sie das gewünschte Aussehen anpassen.

Fügen Sie den folgenden HTML-Code in einen Texteditor ein, speichern Sie ihn als index.html im UTF-8-Format und öffnen Sie ihn in Ihrem Browser. Stellen Sie sicher, dass der Dateiname nicht index.html.txt lautet. Wenn die Dateierweiterung ausgeblendet ist, überprüfen Sie die Erweiterung im Speicherformat des Editors und in den Dateieigenschaften.

<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>

Dieses Fragment ist ein Beispiel für die Struktur des Textes. Wenn Sie sofort loslegen wollen, verwenden Sie das vollständige Beispiel unten. Wenn Sie zuerst den Titel und den Anleitungstext lesen, ist es einfach zu unterscheiden, ob sich der tatsächliche Inhalt oder nur das Erscheinungsbild beim Ändern von CSS verändert hat.

Lesen Sie Selektoren, Eigenschaften und Werte

h1 {
  color: #087f5b;
}

h1 ist der Selektor, color ist die Eigenschaft und #087f5b ist ihr Wert. Eine durch einen Doppelpunkt verbundene Eigenschaft und ein Wert bilden eine Deklaration, wie z. B. color: #087f5b;. Die sechsstellige hexadezimale Farbe stellt die Rot-, Grün- und Blaukomponenten dar. Für weitere Details siehe CSS-Syntax: Selektoren, Deklarationen, Kommentare und Fehler.

Diese Regel ändert die Textfarbe des h1-Elements in HTML zu Grün. Sie übersetzt keine Sätze und fügt keine Absätze hinzu. Um nur den Anweisungstext zu unterscheiden und zu dekorieren, fügen Sie class="notice" zu HTML hinzu und wählen .notice aus CSS aus. Der Punkt ist eine Klassenselektornotation in CSS und wird im Klassennamen in HTML nicht mit einbezogen.

Eine Erklärung, dass CSS für die Darstellung von Webdokumenten verantwortlich ist, findet sich auch in der Einführung in CSS von MDN.

Führen Sie das vollständige Small Garden-Beispiel aus

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body {
      margin: 24px;
      color: #333;
      background-color: #f4f7f5;
      font-family: sans-serif;
      line-height: 1.7;
    }
    main { max-width: 640px; }
    h1 { color: #087f5b; }
    .notice {
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<main>
    <h1>Small Garden</h1>
    <p>A place to grow plants and take a break.</p>
    <p class="notice">We open at 9 a.m. every day.</p>
    <a href="#visit">Visitor Information</a>
    <h2 id="visit">What to bring</h2>
    <p>Bring a water bottle and comfortable shoes.</p>
  </main>
</body>
</html>

Wenn Sie die gespeicherte Datei öffnen, sehen Sie einen grünen Titel auf hellem Hintergrund, und die Informationen zu den Öffnungszeiten haben einen Rahmen und Abstand. Der Inhalt innerhalb des style Elements ist CSS. Die folgende Tabelle bietet eine Mindestbeschreibung zum Lesen der in den Beispielen verwendeten Eigenschaften.

Sie müssen in diesem Stadium nicht jede Eigenschaft auswendig lernen. Prüfen Sie zuerst, auf welches Element der Selektor zutrifft und welchen Teil der Darstellung die Deklaration ändert. Mit einem externen Stylesheet lässt sich dieselbe Gestaltung auf mehreren Seiten wiederverwenden. Für weitere Details siehe CSS mit Inline-, internen und externen Styles anwenden.

Ändern Sie drei Werte und vergleichen Sie die Ergebnisse

1. Ersetzen Sie color in h1 durch #1d4ed8. Nach dem Speichern und Neuladen wird nur die große Überschrift blau. Die Farben der h2-Überschriften und der allgemeinen Absätze des Besucherführers unterliegen dieser Regel nicht.
2. Ändern Sie line-height von body von 1.7 zu 2. Die Zeilenhöhe im Body wird größer sein. Sie können die Unterschiede leichter erkennen, indem Sie einen Absatz mit mehr als zwei Zeilen einfügen oder das Fenster verkleinern.
3. Ersetzen Sie background-color in .notice durch #fff4cc. Nur der Hintergrund der Öffnungszeiten-Information wird gelb. Der gesamte Seitenhintergrund wird separat im Body festgelegt, daher bleibt er gleich.

Anstatt alle drei Werte auf einmal zu ändern, speichern Sie jedes Mal und überprüfen Sie, wenn Sie einen Eintrag ändern. Wenn die Ergebnisse unterschiedlich sind, prüfen Sie, ob die geänderte Datei und die im Browser geöffnete Datei identisch sind und ob die Klammern und Doppelpunkte erhalten bleiben. Wenn Sie die Übung beendet haben, setzen Sie die drei Werte wieder in ihren ursprünglichen Zustand zurück, laden Sie die Seite neu und vergleichen Sie sie mit dem ursprünglichen Bildschirm. Während dieses Prozesses ist es wichtig, die HTML-Titel-, Absatz- und Linkstruktur beizubehalten.