CSS-Lernpfad - Grundlagen
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üpfung
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.
#1
<html> <iframe src=„https://learningapps.org/watch?app=5753615“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>
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.
#2
<html> <iframe src=„https://learningapps.org/watch?app=5753856“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>
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.
#3
<html> <iframe src=„https://learningapps.org/watch?app=5754263“ style=„border:0px;width:100%;height:500px“ webkitallowfullscreen=„true“ mozallowfullscreen=„true“></iframe> </html>
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!
Checkliste
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>
Feedback