CSS-Lernpfad - Grundlagen

Was ist CSS?

Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elementen auf einer Internetseite das Aussehen festzulegen. Zum Beispiel benötigt man folgenden CSS-Code, um den body auszuwählen und seine Schriftfarbe blau einzufärben:

body {
  color: blue;
}

Wir müssen das CSS im HTML-Dokument verknüpfen, sonst wird die CSS-Datei von dem Browser nicht berücksichtigt.

Bei dieser vorgestellten Vorgehensweise ist es wichtig, dass das HTML-Dokument und die CSS-Datei im selben Ordner liegen.

Füge in der HTML-Datei die folgende Zeile irgendwo in den Kopf (zwischen die <head>-Tags)

<link href="style.css" rel="stylesheet" type="text/css">

Die folgende Abbildung veranschaulicht die Verknüpfung.
Wichtig ist, dass das Attribut href den korrekten Dateiname der CSS-Datei enthält.

Aufbau einer CSS-Regel

Lasst uns nun das CSS etwas genauer anschauen:



Die ganze Struktur wird Regelsatz (oder oft nur »Regel«) genannt.

Jetzt zu den der einzelnen Teilen eines Regelsatzes:

Bestandteil Erklärung
Selektor Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel p) aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern.
Deklaration Eine einzelne Regel wie color: red; gibt an, welche Eigenschaft des Elements gestaltet werden soll.
Eigenschaft Art und Weise, wie das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist color eine Eigenschaft des <p> Elements.) In CSS wählst du aus, welche Eigenschaft gesetzt wird.
Eigenschafts-Wert Rechts neben der Eigenschaft, nach dem Doppelpunkt, steht der Wert der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann.

Beachte die Syntax!

  • Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern ({}).
  • Innerhalb einer Deklaration muss man einen Doppelpunkt (:) nutzen, um Eigenschaft und Wert zu trennen.
  • Am Ende jeder Deklaration muss ein Semikolon (;) gesetzt werden.

Selektoren dienen dazu, bestimmt Elemente in einem HTML-Dokument auszuwählen. Auf diese können dann bestimmte Eigenschaften angewendet werden.

Selektor Erklärung Syntax Beispiel Erläuterung des Beispiels
Typselektor Spricht alle Elemente eines bestimmten Typs (body, p, h1, usw.) im Elementbaum an. elementname
p { font-size: 18px } 
Jeder Textabsatz der Seite erhält eine Schriftgröße von 18px.
Klassenselektor Spricht alle Elemente einer bestimmten Klasse im Elementbaum an. .elementname
.warnung { background: red } 
Alle Elemente der Klasse warnung erhalten einen roten Hintergrund.
ID-Selektor Spricht das Element einer bestimmten ID im Elementbaum an. #id
#autor { font-weight: bold }
Die Schrift des Elements mit der ID autor wird fett dargestellt.

Das div-Element ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen.
Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften. Es ist dazu gedacht, Bereiche zu erzeugen, die mit Hilfe von CSS formatiert werden können.
div bedeutet division, etwa Abteilung oder Bereich.

Beispiel

<div> 
  <h2>Listenüberschrift</h2>
  <ul>
    <li>Listenpunkt 1</li>
    <li>Listenpunkt 2</li>
    <li>Listenpunkt 3</li>
  </ul>
</div>

Das class-Attribut ordnet ein Element einer oder mehreren Klassen zu. Klassen sind ein HTML-Konzept, um gleichartige Elemente im HTML-Dokument zu kennzeichnen mit dem Ziel, diese mit einem Klassenselektor ansprechen zu können. Dabei müssen es nicht unbedingt gleichartige Elemente sein.

Beispiel
In diesem Beispiel wird ein div-Element einer Klasse (hier: element1) zugeordnet. Dieses gezeichnete div-Element wird nun mit dem Klassenselektor (hier: .element1) angesprochen.

Diese Abbildung soll die Anwendung von CSS noch einmal übersichtlich veranschaulichen.

Erkläre deinem Sitznachbarn mit Hilfe der Abbildung in eigenen Worten die Anwendung von CSS!


Eine Checkliste für die Anwendung von CSS zum stylen von HTML-Dokumenten

<todo @somebody username:none>Verknüpfung von HTML-Dokument und CSS-Datei.</todo>
<todo>HTML-Dokument und CSS-Datei befinden sich im selben Ordner (bzw. Angabe des korrekten Dateipfads).</todo>
<todo>Regelsätze in CSS korrekt (ohne Syntaxfehler) deklariert. </todo>

Optional:
<todo>Mit div-Elementen Bereiche definiert bzw. Elemente eingeschloßen. </todo>
<todo>Den Elementen Klassen zugeordnet. </todo>

id-css-grundlagen-2018
Bewerte diesen Lernpfad! Merci :) Dieser Lernpfad ist...