Grundlagen [CSS]

CSS

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;
}

Verknüfpung

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 Dateinamen der CSS-Datei enthält.

Aufgabe #1

<panel type=„primary“ title=„Regelsatz“> 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.

Aufgabe #2

Selektoren

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.

div-Element

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>

class-Attribut

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.

Aufgabe #3

Veranschaulicht

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!