# Einführung in CSS
# Syntax
HTML beschreibt die Struktur einer Website und ist wie das Skelett eines Körpers. CSS beschreibt das Aussehen, den Style dieser HTML Elemente. Alleine, also ohne korrespondierendes HTML, funktioniert CSS nicht! CSS steht für “Cascading Style Sheets” und wird meistens als seperate .css-Datei mit einer HTML-Datei verknüpft.
In der Einführung HTML hast du erfahren, dass HTML-Elemente durch Tags beschrieben, z. B. <body> oder <div> etc. und durch class und id ergänzt werden können. In CSS kannst du nun mit dem Selector definieren, welche Elemente und Attribute aus HTML selektiert und gestalten werden sollen.
Für diesen Selector kannst du dann eine Stylerule (Gestaltungs-Regel) mit geschweiften Klammern definieren. Diese Regel beinhaltet verschiedene Properties (Eigenschaften), denen wiederum eine Value (Wert) zugewiesen wird.
# Beispiel
selector {
property: value;
property: value;
property: value;
}
Richtige Schreibweise
Nach einer Property muss immer ein Doppelpunkt : stehen und nach dem Wert ein Semikolon ;.
# Zusammenspiel mit HTML
Damit HTML und CSS miteinander reden können, musst du deine CSS-Datei in der HTML-Datei verknüpfen.
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
</html>
Im obigen Beispiel liegt die Datei style.css im Unterverzeichnis css. Würde sich die CSS-Datei z.B. im Hauptverzeichnis befinden, so schreibst du im href-Attribute href="style.css".
Mit dem link-Tag im head-Bereich unserer HTML-Datei kannst du jetzt anfangen mit CSS zu stylen und layouten.
# Selectors
Bild: internetingishard.com
# Tag-Selector
Du möchtest einen Textabschnitt <p> in einem HTML-Dokument einfärben und fett darstellen.
<p>
Das ist ein Beispielsatz, der mit CSS gestylt wurde.
</p>
In CSS schreibst du:
p {
color: tomato;
font-weight: bold;
}
Ergebnis
Das ist ein Beispielsatz, der mit CSS gestylt wurde.
# Class-Selector
Der Tag-Selektor kann manchmal auch sehr limiiert sein. Vielleicht möchtest du nicht, dass alle <p>-Textabschnitte in einem Stil definiert sein sollen. Hier wird eine Class (Klasse) nützlich.
<p class="hervorgehobener-text">
Das ist ein Beispielsatz, der mit CSS gestylt wurde.
</p>
Statt das sehr allgemeine p-Tag zu stylen, kannst du ausschliesslich HTML-Elemente, die eine bestimmten Class besitzen, mit meinem Style beeinflussen:
.hervorgehobener-text {
color: tomato;
font-weight: bold;
}
Richtige Schreibweise
In CSS hat eine Class immer einen Punkt . vor dem Selektor, in HTML schreibst du diesen nicht. HTML: meine-class, CSS: .meine-class
# ID-Selector
IDs sollten in HTML nur verwendet werden, wenn sie für Formulare oder sogenannte Anchors notwendig sind. So kann mit einem Klick beispielsweise zu einem bestimmten Bereich auf einer Website gescrollt werden. Meistens reichen Classes jedoch aus.
<p id="sehr-spezifischer-bereich">
Das ist ein Beispielsatz, der mit CSS gestylt wurde.
</p>
#sehr-spezifischer-bereich {
color: tomato;
font-weight: bold;
}
Richtige Schreibweise
In CSS hat eine ID immer eine Raute # vor dem Selector. In HTML schreibst du diese Raute nicht. HTML: meine-id, CSS: #meine-id
# Selectors kombinieren
# Tags mit Classes
Folgende HTML-Datei soll gestylt werden.
<p class="hervorgehoben">
Ich bin ein Textabschnitt, der hervorgehoben erscheint.
</p>
<a class="hervorgehoben" href="https://duckduckgo.com">
Ich bin ein Link, der zu einer Suchmaschine führt.
</a>
Jetzt sollen nur <a>-Links mit der Klasse hervorgehoben anders dargestellt werden.
/* Mit folgendem CSS-Selector würden <p> und <a> ausgewählt werden */
.hervorgehoben {
color: royalblue;
font-style: italic;
}
/* Mit folgendem CSS-Selector wird nur <a> mit der Class “hervorgehoben” ausgewählt */
a.hervorgehoben {
color: tomato;
}
Ergebnis
Ich bin ein Textabschnitt, der hervorgehoben erscheint.
Ich bin ein Link, der zu einer Suchmaschine führt.# Mehrere Classes
Du kannst HTML-Elemente stylen, wenn sie eine bestimmte Kombination von Classes haben.
<p class="box">
Diese Box erscheint normal.
</p>
<p class="box hervorgehoben">
Diese Box erscheint hervorgehoben.
</p>
.box {
background-color: whitesmoke;
padding: 1rem;
border-width: 10px;
border-style: solid;
border-color: royalblue;
color: black;
font-weight: normal;
}
.box.hervorgehoben {
border-color: tomato;
color: tomato;
font-weight: bold;
font-style: italic;
}
Ergebnis
Diese Box erscheint normal.
Diese Box erscheint hervorgehoben.
Richtige Schreibweise
In HTML kannst du mehrere Classes einfach mit einem Abstand trennen.
Beispiel: <p class="box hervorgehoben"></p>
In CSS muss dieser Abstand allerdings zwingend weg, da das sonst nicht das gleiche bedeutet. Schreibst du in CSS .box.hervorgehoben selektierst du ein HTML Element mit den Classes box und hervorgehoben. Dieses Prinzip nennt sich Chaining (Verkettung). Schreibst du in CSS allerdings .box .hervorgehoben bedeutet dies, dass du innerhalb des HTML Elements mit der Class box nach einem Child suchst mit der Class hervorgehoben. Dieses Prinzip nennt sich Nesting (Verschachtelung).
# Wichtige Prinzipien
CSS verfolgt drei grundlegende Konzepte. Specificity (Spezifität), Inheritance (Vererbung) und die Cascade (Kaskade)
# Specificity
Spezifität ist ein Regelwerk, mit dem Browser bestimmen, welche Eigenschaftswerte die wichtigsten sind und angewendet bzw. welche überschrieben werden.
Als Faustregel kannst du dir merken: Je genauer und spezifischer du in CSS ein HTML Element selektierst, desto wahrscheinlicher ist es, dass diese Styles auch sichtbar werden. So wird etwa in unserem Beispiel .hervorgehoben von a.hervorgehoben überschrieben, da dies spezifischer ist.
# Inheritance
Vererbung bedeutet grundsätzlich nichts anderes, als das Werte von einem übergeordneten Elternelement geerbt werden können. Im Verlauf dieses Kurses wirst du immer wieder mit diesem Prinzip arbeiten.
# Cascade
Die Kaskade in CSS bedeutet vereinfacht ausgedrückt, dass die Reihenfolge der CSS-Regeln von Bedeutung ist. Wenn zwei Regeln definiert wurden, die gleich spezifisch sind, ist diejenige, die im CSS an letzter Stelle steht, diejenige, die verwendet wird. Das gilt übrigens auch über mehrere CSS Dateien hinweg. Reihenfolge ist also wichtig!
# Box Model
Beim Verwenden von CSS und HTML entstehen auf deinem Screen ganz viele “Boxen”. In CSS kann eine solche Box eine Breite, Höhe, eine Kontur, einen Innen-, sowie einen Aussenabstand besitzen.
Bild: internetingishard.com
Stelle dir eine Box vor, die 500 Pixel breit und 500 Pixel hoch ist. Wenn du nun einen margin (Aussenabstand) von 10 Pixel hinzufügst, verändern sich die Abmessungen der Box auf 510 Pixel. Das kann zu ungewohlten Nebeneffekten im Layout führen. Mit der Property box-sizing kannst du dies jedoch regulieren.
Für einfacheres Layouten ist es hilfreich, ein einheitliches Box Model zu wählen und auf alle Elemente anzuwenden. Mit dem *-Selector kannst du das beeinflussen. Der Stern * sagt CSS “das betrifft alles”.
* {
box-sizing: border-box;
}
Obwohl die box-sizing-Property die Values content-box, padding-box, border-box und margin-box kennt, brauchst du meistens nur content-box und border-box. Viele kommen auch nur mit border-box aus.
# Unterschiede zwischen content-box und border-box
Schaue dir folgenden Code an.
.box {
width: 300px;
padding: 1rem;
margin-bottom: 1rem;
border-width: 10px;
border-style: solid;
border-color: royalblue;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}
<div class="box content-box">
Ich bin eine Box A, die mit content-box gestylt ist
</div>
<div class="box border-box">
Ich bin eine Box B, die mit border-box gestylt ist
</div>
Ergebnis
Box A und Box B unterscheiden sich in der Breite, obwohl für beide mit der Class .box eine fixe Breite von 300 Pixel festgelegt ist.
# Warum sind die Boxen unterschiedlich breit?
content-box addiert zu den 300 Pixel Breite auf den Inhalt (“Content”) die Werte der Properties padding und border-width. Dadurch dass padding: 10px; und border-width: 10px; ergeben sich 340 Pixel Breite – die Values der Properties müssen doppelt gezählt werden, weil sie auf beiden Seiten angewandt werden.
border-box berücksichtigt für seine Breite die 300 Pixel, die per CSS festgelegt sind. Die Breite des Inhalts (in dem Fall der Text) ist dann nicht wie im vorherigen Beispiel 300 Pixel plus padding und border-width, sondern 300 Pixel minus der beiden Properties. So ist die Box insgesamt 300 Pixel breit, der Inhalt jedoch nur 260 Pixel.
Bild: internetingishard.com
# Die wichtigsten Properties
# Layout
| Property | Bedeutung |
|---|---|
display | Layout-Verhalten von Elementen. Mehr: CSS Layout |
position | Positionierung von Elementen. Mehr: Positioning & Pfade |
margin | Abstand eines Block-Elements nach aussen |
padding | Abstand eines Block-Elements nach innen |
border | Kontur eines Block-Elements |
# Text und Farben
| Property | Bedeutung |
|---|---|
font-family | Schriftart |
font-size | Schriftgrösse |
color | Schriftfarbe |
background | Hintergrundfarbe / Hintergrundbild |
Mit diesen Properties kannst du mit CSS schon viel gestalten. Die Möglichkeiten sind fast unbegrenzt, sodass du am besten bei CSS Reference oder CSS Cheatsheet nachliest, was alles möglich ist. Im Verlauf dieses Kurses wirst du noch weitere Properties kennenlernen.