Endlich hübsche Websites mit CSS
Lange genug haben wir uns schwarzen Text in Times New Roman auf weißem Hintergrund und tiefblaue Links angesehen – ab heute wird es bunt!
Wiederholung
Letzte Woche haben wir uns angesehen, welche Elemente es in HTML gibt, um eure Inhalte semantisch zu strukturieren. Wir haben uns auch damit beschäftigt, was URLs sind und wie ihr Seiten untereinander verlinken und Bilder in eure Websites einbetten könnt. Zu guter Letzt habt ihr eure Code-Editoren eingerichtet, um auch außerhalb von Quadrants arbeiten zu können.
Welche drei Struktur-Elemente sind in einer typischen Website enthalten?
Der typische Aufbau einer Website besteht aus einer Kopfzeile mit dem Logo und einem Menü, dem Hauptteil mit den Inhalten und dem abschließenden Footer mit Copyright und sekundärem Menü. In HTML verwendet man hierfür die Elemente <header>, <main> und <footer>.
Was ist der Unterschied zwischen <head> und <header>?
Das <head>-Element beinhaltet alle Metadaten einer Website, z.B. den Autor, den Titel, eine Beschreibung des Inhalts für Suchmaschinen und Anweisungen, wie der Browser die Seite darstellen soll. Diese Daten sind auf der Seite selbst nicht zu sehen.
Ein <header> wird im <body>-Element dazu verwendet, eine Kopfzeile zu deklarieren.
Wie verlinke ich auf eine andere Seite?
Ein Link zu einer anderen Seite kann mit einem <a>-Element erfolgen. Das Ziel der Seite wird hier mit einem href-Attribut gesetzt. Ein Sonderfall sind Links, die mit einem Hash (#) gefolgt von einer gültigen ID enden. In diesen Fällen versucht der Browser zum Element mit dieser ID zu scrollen. So können Sprungpunkte, z.B. in einem Inhaltsverzeichnis, umgesetzt werden.
Welche Attribute sind beim Einbetten eines Bildes wichtig?
Ein Bild wird mit Hilfe des <img>-Elements eingebettet. Die wichtigsten Attribute für dieses Element sind:
src: die URL des Bildes, das eingebettet werden sollalt: der Text, der angezeigt wird, wenn das Bild nicht geladen werden kann, bzw. der vorgelesen wird, wenn eine Person einen Screen-Reader verwendetwidth: die Breite des eingebetteten Bildes in Pixeln, wird zur Berechnung des Seitenverhältnisses benutzt, damit der Browser weiß, wie viel Platz er für das Bild reservieren mussheight: das Gegenstück zuwidthfür die Berechnung des Seitenverhältnisses
Wie starte ich mit Python einen lokalen Server und weshalb ist das wichtig?
Um das Verhalten einer veröffentlichten Website während der Entwicklung möglichst nah zu simulieren, reicht es nicht, die HTML-Datei einfach im Browser zu öffnen. Stattdessen solltet ihr einen lokalen Entwicklungsserver verwenden. Dies kann entweder über ein Plugin im Code-Editor oder manuell über die Kommandozeile und Python erfolgen.
Um einen lokalen Server mit Python zu starten, öffnet in eurem Editor ein Terminal und gebt folgenden Befehl ein: python3 -m http.server. Dabei kann es vorkommen, dass euer Betriebssystem euch bittet Python (eine andere Programmiersprache) zu installieren.
Stylesheets vs. Inline-Styling
Um die Darstellung der HTML-Elemente auf eurer Website zu beeinflussen, verwendet ihr eine zweite Programmiersprache: CSS. Diese kann auf zwei Arten auf eurer Website verwendet werden:
Als Inline-Styles direkt im HTML
Als externe Datei (ein Stylesheet), das in die Seite importiert wird
Inline-Styles
Ihr könnt jedem HTML-Element ein style-Attribut geben und als Wert in diesem Attribut CSS-Eigenschaften eintragen, die für dieses Element gelten sollen. Das ist die einfachste Art, die Darstellung eurer Website zu beeinflussen, aber leider wie immer bei Abkürzungen nicht mehr tragbar, weil ihr so jedes Element einzeln stylen müsst. Dadurch entstehen viele Wiederholungen und euer Quellcode wird unübersichtlich.
Falls ihr auf einer Website Inline-Styles entdeckt, liegt das höchstwahrscheinlich daran, dass diese via JavaScript gesetzt werden, um bestimmte Effekte zu erzielen. Für eure eigenen Websites solltet ihr auf jeden Fall ein (oder mehrere) Stylesheets verwenden.
Stylesheets
Ein Stylesheet ist eine Textdatei mit der Endung „.css“. Darin werden alle Stile für eure Website festgelegt. Ihr könnt euch diese Stile ein bisschen wie Formatvorlagen in einem Grafikprogramm vorstellen, z.B. „alle Überschriften sind blau und verwenden Helvetica als Schriftart“.
Um ein Stylesheet für ein HTML-Dokument zu aktivieren, importiert ihr es mit einem <link>-Element im <head>-Element eurer Website: <link rel="stylesheet" href="/pfad/zum/stylesheet.css">
Dadurch werden alle enthaltenen Stile auf das Dokument angewandt – aber nicht automatisch auch auf alle anderen Seiten eurer Website! Ihr müsst also das Stylesheet in jedem HTML-Dokument verlinken, auf das die Stile angewandt werden sollen.
HTML ist die Struktur, CSS die Darstellung
„CSS“ steht für „Cascading Style Sheets“ und definiert eine Liste von Gestaltungsanweisungen, die dann vom Browser auf HTML- (oder SVG-)Elemente angewendet werden.
Diese Gestaltungsanweisungen treten in der Form von Regeln auf, die immer demselben Aufbau folgen: Ein oder mehrere Elemente werden mit Selektoren ausgewählt, um eine oder mehrere Eigenschaften mit den angegebenen Werten zu verändern.
Der Selektor steht dabei in einer eigenen Zeile, die Eigenschaften werden mit geschweiften Klammern ({}, Option + 8 & 9 auf macOS) gruppiert. Jedes Paar aus Eigenschaft und Wert endet mit einem Semikolon (;).
<h1>I’m blue, dabe di dabe dei</h1>
/* das ist ein Selektor, der alle h1 auf der Seite auswählt */
h1 {
/* die Eigenschaft "Farbe" wird auf den Wert "Blau" gesetzt */
color: blue;
/* Semikolon am Zeilenende nicht vergessen! */
font-size: 30px;
}
In einem Stylesheet könnt ihr unbegrenzt viele Regeln definieren. Diese werden dann von oben nach unten interpretiert und können (müssen aber nicht) frühere Regeln überschreiben. Falls ihr mehrere Stylesheets verwendet, achtet also darauf, in welcher Reihenfolge ihr sie einbindet!
Eine Regel betrifft immer nur die Elemente, die vom Selektor ausgewählt wurden. Je spezifischer der Selektor, desto wichtiger die Regel, d.h. ein spezifischerer Selektor kann einen einfacheren Selektor überschreiben, auch wenn er weiter oben in der Datei vorkommt.
Regeln können aus unbegrenzt vielen Eigenschaft-Wert-Paaren bestehen. Eine Übersicht aller möglichen Eigenschaften findet ihr im CSS-Tricks Almanac{ "de": "Wird in einem neuen Tab geöffnet", "en": "Opens in a new tab" }.
Aber Achtung: Fehler innerhalb einer Regel können die gesamte Regel ungültig machen. Achtet also auf den korrekten Einsatz von geschweiften Klammern und Semikolons.
CSS arbeitet zudem mit einem Konzept der Vererbung, d.h. viele Eigenschaften werden von einem Elternelement an seine Kind-Elemente vererbt. Ein Kind-Element ist ein Element, das innerhalb eines anderen Elements verschachtelt ist.
Kommentare
Wie in HTML könnt ihr auch in CSS Kommentare setzen, die euch als Notizen und Erklärungen dienen können. Sie sind auch nützlich, um in langen CSS-Stylesheets den Überblick zu wahren.
Ein Kommentar in CSS begint mit /* und endet mit */. Der Text zwischen diesen beiden Zeichenfolgen wird vollständig ignoriert. Wie in HTML auch, könnt ihr mit Kommentaren in CSS eine Regel testweise deaktivieren, ohne sie aus eurem Quellcode löschen zu müssen.
Selektoren
Der wichtigste Bestandteil eurer Stylesheets sind die Selektoren, mit denen ihr die einzelnen Elemente auf eurer Website auswählt, um ihre Darstellung zu verändern. Ihr könnt sie euch wie Pfade vorstellen, mit denen ihr den Weg von der äußersten Box (dem <html>-Element) zu der spezifischen Box, die ihr verändern möchtet, beschreibt.
Es gibt verschiedene Arten von Selektoren, die sich auch noch auf verschiedene Arten kombinieren lassen. Sie in allen Nuancen zu besprechen, würde den Rahmen dieses Kurses sprengen, also fokussieren wir uns im Folgenden auf die wichtigsten.
Element-Selektoren
Ihr könnt jedes HTML-Element in CSS einzeln auswählen, indem ihr seinen Namen als Selektor verwendet. So wählt h1 beispielsweise jedes <h1>-Element aus, p jedes <p>-Element, und so weiter. Das ist sehr nützlich, um zum Beispiel bestimmte Grundregeln wie Farbe und Abstände zu definieren, die für spezifische Arten von Elementen gelten sollen.
Gemeinsam mit Kombinatoren und Verschachtelung habt ihr damit auch die Möglichkeit, zu beeinflussen, wie sich bestimmte Elemente innerhalb anderer Elemente verhalten. Der Selektor nav a wählt beispielsweise alle <a>-Elemente aus, die sich innerhalb eines <nav>-Elements befinden, während der Selektor header > img alle <img>-Elemente auswählt, die ein direktes Kind eines <header>-Elements sind.
<header>
<img src="https://picsum.photos/200/100" alt="Beispielbild" width="200" height="100">
<nav>
<ul>
<li>
<a href="#">Start</a>
</li>
<li>
<a href="#">Arbeiten</a>
</li>
<li>
<a href="#">Über mich</a>
</li>
</ul>
</nav>
<a href="#">Kontakt</a>
</header>
<main>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui beatae, in, quasi ipsam vero ad ipsa fugiat possimus harum, totam nostrum! Corrupti fugiat incidunt provident a reiciendis assumenda sint aspernatur!</p>
<ul>
<li>Listenelement</li>
<li>Listenelement mit <a href="#">link</a></li>
<li>Listenelement</li>
<li>Listenelement</li>
<li>Listenelement</li>
</ul>
<img src="https://picsum.photos/300/200" alt="Beispielbild" width="300" height="200">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur recusandae cumque eaque consectetur officiis repellat aliquam neque eius beatae quaerat praesentium, hic ipsum eum blanditiis placeat nihil debitis ex aperiam.</p>
</main>
body {
font-family: system-ui, sans-serif;
}
/* Einfacher Element-Selektor */
header {
padding: 1rem;
border: 1px solid black;
display: flex;
justify-content: space-between;
align-items: center;
}
/* Nur das Bild im <header> wird verkleinert */
header img {
width: 100px;
height: 50px;
}
/*
Nur die Liste im <header> wird horizontal
und hat keine Einrückung links
*/
header ul {
display: flex;
gap: 1rem;
list-style-type: none;
padding-left: 0;
}
/* Alle links im header sind schwarz */
header a {
color: inherit;
}
/*
Nur Links im <nav> haben einen helleren Unterstrich
mit mehr Abstand
*/
nav a {
text-decoration-color: rgb(0 0 0 / 0.25);
text-underline-offset: 4px;
}
/* Nur der Link direkt im <header> sieht aus wie ein Button */
header > a {
padding-top: 0.75rem;
padding-bottom: 1rem;
padding-inline: 1.5rem;
border-radius: 4rem;
background-color: black;
color: white;
}
IDs und Klassen
Neben einfachen Element-Selektoren sind ID- und Klassen-Selektoren die häufigsten. Ein ID-Selektor wählt ein einzelnes Element mit einem passenden ID-Attribut aus, während ein Klassen-Selektor verwendet wird, um alle Elemente mit dem passenden Class-Attribut auszuwählen.
ID-Selektor:
#+ ID, z.B.#contentKlassen-Selektor:
.+ Klassenname, z.B..fancy
<main id="content">
<header class="hero">
<h1>Hallo Welt!</h1>
</header>
<section class="fancy" id="introduction">
<h2>Lorem Titulum</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi nemo, reprehenderit culpa laboriosam harum, ipsa velit magnam debitis inventore impedit iusto molestiae, rem voluptas modi voluptates. Laborum laudantium iste dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptates fugiat nihil nulla reprehenderit! Magnam illum perferendis iste non, esse unde nemo neque architecto. Animi natus facere delectus at ipsum!</p>
</section>
<section class="fancy cool">
<h2>Lorem Titulum der 2.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quo ut eligendi blanditiis inventore enim atque saepe, quae minima doloremque alias a placeat, facere laboriosam tempora unde consequuntur quos asperiores!</p>
</section>
</main>
body {
font-family: system-ui, sans-serif;
}
/* Wählt das Element mit id="content" aus */
#content {
max-width: 40rem;
margin-inline: auto;
}
/* Wählt alle Elemente mit class="fancy" aus */
.fancy {
line-height: 1.5;
}
/* Wählt alle <h2> in allen Elementen mit class="fancy" aus */
.fancy h2 {
font-family: cursive;
}
/* Wählt alle Elemente mit class="fancy cool" aus */
.fancy.cool {
margin-bottom: 8rem;
}
Ihr werdet tendenziell häufiger Klassen als IDs verwenden, für beide gelten aber ähnliche Regeln und Konventionen. Ihr solltet beispielsweise darauf achten, dass eure IDs und Klassen möglichst spezifisch sind und das beschreiben, was sie darstellen. Verwendet also lieber die Klasse „button“ als einfach nur die Abkürzung „b“, damit man auf den ersten Blick versteht, dass es in der Regel darum geht, einen Button darzustellen.
IDs und Klassen dürfen außerdem nur mit einem Bindestrich, Unterstrich oder einem Buchstaben von A – Z beginnen, der von weiteren Buchstaben, Ziffern, Unter- oder Bindestrichen gefolgt wird. Sonder- oder Leerzeichen sind ungültig! Verwendet also wie bei Dateinamen am besten englische Begriffe, dann seid ihr auf der sicheren Seite.
Zudem werden IDs oft als camelCase geschrieben, um Leerzeichen zu vermeiden, während man bei Klassen auf kebap-case setzt. Bei camelCase wird der erste Buchstabe jedes neuen Wortes als Großbuchstabe geschrieben, bei kebap-case wird alles kleingeschrieben und die Leerzeichen werden durch Bindestriche ersetzt.
Eine ID kann immer nur einmalig in einem HTML-Dokument vorkommen, eine Klasse beliebig oft. Ein HTML-Element kann nur eine ID haben, aber innerhalb des class-Attributs könnt ihr so viele Klassen angeben wie ihr möchtet, einfach mit Leerzeichen getrennt, z.B. class="one two three".
Der universelle Selektor
Mit dem speziellen Selektor * könnt ihr alle Elemente auswählen. Dank Vererbung braucht ihr diesen aber nur wirklich selten, z.B. wenn ihr euch nicht sicher sein könnt, welche Elemente innerhalb eines anderen Elements vorkommen können, weil diese durch ein Skript hinzugefügt werden. Deshalb ist dieser Selektor eher etwas für Fortgeschrittene.
Kombinatoren und Verschachtelung
Jeder Selektor kann mit anderen Selektoren kombiniert werden. Je nachdem, wie ihr mehrere Selektoren kombiniert, macht ihr entweder einen Selektor spezifischer, damit er weniger spezifische Regeln überschreibt, oder verschachtelt den Selektor, um nur bestimmte Elemente auszuwählen, die im HTML ebenfalls verschachtelt sind.
Wenn ihr an einen Selektor ohne Leerzeichen weitere Selektoren anfügt, wird dieser spezifischer. a.fancy wählt zum Beispiel nur <a>-Elemente aus, die auch das Attribut class="fancy" haben. Ein <div class="fancy"> würde aber nicht ausgewählt werden, da es nicht beide Kriterien erfüllt.
Wenn ihr an einen Selektor mit Leerzeichen weitere Selektoren anfügt, wählt ihr Elemente innerhalb des ausgewählten Elements aus, auf die die weiteren Selektoren zutreffen. So wählt a .fancy (beachtet das Leerzeichen nach „a“) alle Elemente mit der Klasse „fancy“ innerhalb von <a>-Elementen aus.
Um den zweiten Fall etwas expliziter zu machen, könnt ihr in modernem CSS auch sogenanntes „Nesting“ verwenden, bei dem ihr die Selektoren wie HTML-Elemente verschachtelt:
<main id="content">
<header class="hero">
<h1>Hallo Welt!</h1>
</header>
<section class="fancy" id="introduction">
<h2>Lorem Titulum</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi nemo, reprehenderit culpa laboriosam harum, ipsa velit magnam debitis inventore impedit iusto molestiae, rem voluptas modi voluptates. Laborum laudantium iste dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptates fugiat nihil nulla reprehenderit! Magnam illum perferendis iste non, esse unde nemo neque architecto. Animi natus facere delectus at ipsum!</p>
</section>
<section class="fancy cool">
<h2>Lorem Titulum der 2.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quo ut eligendi blanditiis inventore enim atque saepe, quae minima doloremque alias a placeat, facere laboriosam tempora unde consequuntur quos asperiores!</p>
</section>
</main>
body {
font-family: system-ui, sans-serif;
}
#content {
section {
/*
& steht für den Elternselektor,
in diesem Fall "section", equivalent zu
section.fancy.cool ohne Nesting
*/
&.fancy.cool {
p {
color: salmon;
}
}
}
}
Falls ihr Nesting verwendet, könnt ihr mit dem &-Symbol innerhalb einer Verschachtelung den „Elternselektor“ auswählen. Das bietet sich z.B. an, um verschiedene Fälle mit verschiedenen Klassen oder Stadien abzubilden. Das werden wir noch einmal näher betrachten, wenn wir uns mit Pseudo-Klassen auseinandersetzen.
Zu guter Letzt können Selektoren auch mit Kombinatoren kombiniert werden. Verwendet ihr ein Komma (,), erstellt ihr eine Liste aus Selektoren für eine Regel. h1, h2, h3 wählt zum Beispiel alle <h1>-, <h2>- und <h3>-Elemente aus, sodass ihr keine Regeln duplizieren müsst. Außerdem könnt ihr mit einem Plus (+) direkte Nachbarn auswählen, während ihr mit > direkte Kindelemente auswählen könnt.
<main id="content">
<header class="hero">
<h1>Hallo Welt!</h1>
</header>
<section class="fancy" id="introduction">
<header>
<h2>Lorem Titulum</h2>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi nemo, reprehenderit culpa laboriosam harum, ipsa velit magnam debitis inventore impedit iusto molestiae, rem voluptas modi voluptates. Laborum laudantium iste dignissimos?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptates fugiat nihil nulla reprehenderit! Magnam illum perferendis iste non, esse unde nemo neque architecto. Animi natus facere delectus at ipsum!</p>
</section>
<section class="fancy cool">
<h2>Lorem Titulum der 2.</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error quo ut eligendi blanditiis inventore enim atque saepe, quae minima doloremque alias a placeat, facere laboriosam tempora unde consequuntur quos asperiores!</p>
</section>
</main>
body {
font-family: system-ui, sans-serif;
}
/* Alle <header> direkt in <main> */
main > header {
border: 1px solid magenta;
padding: 0 2rem;
}
/* Alle <p> direkt nach einem <p> */
p + p {
color: salmon;
}
Es gibt noch einige weitere Kombinatoren, zum Beispiel, um Elemente mit bestimmten Attributen auszuwählen, aber fürs Erste belassen wir es bei diesen. Falls ihr neugierig seid, oder mehr erfahren möchtet, könnt ihr euch im Mozilla Developer Network mehr dazu durchlesen.
Aufbau von Stylesheets
Ein CSS-Stylesheet kann flexibel aufgebaut werden, da die Reihenfolge der Selektoren nur dann eine Rolle spielt, wenn ihre Spezifität gleich ist. Trotzdem bietet es sich an, ein Stylesheet immer vom Allgemeinen ins Spezifische aufzubauen.
Fangt also am besten mit den allgemeinen Regeln für <html>, <body> und Elemente wie Überschriften, Absätze und Listen an. Danach könnt ihr die Regeln für einzelne Komponenten eurer Seite, z.B. euer Menü, euren Footer und euer <main>-Element festlegen. Dann werdet ihr spezifischer, wenn ihr auf einzelne Abschnitte eingeht und so weiter.
Es bietet sich eventuell auch an, ein Stylesheet mit sehr allgemeinen Regeln, die auf allen Unterseiten eurer Website gelten sollen, anzulegen und die spezifischen Styles für individuelle Seiten in separate Stylesheets aufzuteilen.
Gerade am Anfang solltet ihr auch viele Kommentare einbauen, damit ihr euch bei komplexeren Selektoren, oder auch den verschiedenen Abschnitten eures Stylesheets gut zurechtfinden könnt. Besonders, wenn ihr nach einer Pause wieder daran arbeitet.
Versucht auch das DRY-Konzept zu befolgen: Don‘t Repeat Yourself. Wenn ihr euch dabei ertappt, wie ihr dieselben Regeln für mehrere Selektoren schreibt, versucht sie z.B. mit einer Klasse zu bündeln. Außerdem solltet ihr Werte, die sich in eurem CSS wiederholen, stets in Variablen verpacken.
Die meisten Eigenschaften werden auch vererbt, d.h. ihr müsst sie oft nur für ein Elternelement setzen und die Kinder erben sie automatisch. Mehr dazu gleich.
* {
/* Sorgt dafür, dass width und height machen, was man erwartet */
box-sizing: border-box;
}
html {
/* Regeln für das ganze HTML-Dokument */
}
body {
/* Regeln für den <body> und alles darin */
}
h1, h2, h3 {
/* Regeln für alle Überschriften */
}
p {
/* Regeln für alle Absätze */
}
main {
/* Spezielle Regeln für das <main> Element */
}
main > section {
/* Regeln für alle <section> direkt in <main> */
}
Variablen
Mit Variablen könnt ihr Elemente eures Designs einmalig definieren und an verschiedenen Stellen verwenden, z.B. Farben, Abstände, Schriften, etc. Dadurch wird es leichter, diese Werte später noch einmal zu verändern. Es bietet sich also an, z.B. die Farbpalette eurer Website in Variablen zu verpacken, um sie z.B. für einen Dark-Mode schnell und an nur einer Stelle auswechseln zu können.
Wenn ihr eine Variable in CSS anlegen möchtet, dann macht ihr das, indem ihr innerhalb einer Regel ein --name: wert;-Paar setzt. name kann hierbei eine beliebige Folge von Buchstaben und Ziffern sein, darf aber keine Leer- und Sonderzeichen enthalten. Da --name nicht gleich --Name ist, bietet es sich außerdem an, nur Kleinbuchstaben zu verwenden.
Einsetzen könnt ihr so angelegte Variablen, indem ihr den Wert einer Eigenschaft mit var(--name) ersetzt, wobei --name der Name eurer Variable ist. So könnt ihr also z.B. statt color: salmon; auch color: var(--accent); schreiben, sofern ihr vorher --accent: salmon; deklariert habt.
Um einen Standardwert anzugeben, falls eine Variable nicht deklariert ist, könnt ihr zudem innerhalb von var() einen zweiten Wert angeben. Dieser wird dann verwendet, falls die Variable noch nicht gesetzt ist: color: var(--accent, red);
Wie viele andere Eigenschaften in CSS, werden Variablen ebenfalls vererbt und können in Selektoren mit höherer Spezifität überschrieben werden.
<header>
<nav>
<ul>
<li>
<a href="#">Start</a>
</li>
<li>
<a href="#">Über Mich</a>
</li>
<li>
<a href="#">Arbeiten</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
</ul>
</nav>
</header>
<main>
<h1>Mein Portfolio</h1>
<section>
<h2>Über mich</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum obcaecati eum aliquid labore consequuntur dicta cumque porro. Illo dignissimos aliquid exercitationem facilis, perferendis, reiciendis alias tenetur blanditiis error ut delectus.</p>
</section>
<section class="fancy">
<h2>Diese Section ist besonders!</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam asperiores nisi amet reprehenderit porro perferendis voluptatibus deleniti illo, ducimus neque tempora modi eum quis totam labore, et ipsam libero voluptatem.</p>
</section>
</main>
/*
:root ist die Wurzel des Dokuments,
ein guter Ort für globale Variablen
*/
:root {
--text: black;
--background: white;
--accent: orange;
--padding-large: 4rem;
--font-sans: system-ui, sans-serif;
}
body {
font-family: var(--font-sans);
color: var(--text);
background-color: var(--background);
padding: var(--padding-large);
}
a {
color: var(--accent);
}
.fancy {
color: var(--accent);
}
Vererbung
Vererbung ist ein zentrales Konzept in CSS. Der Begriff „Cascading“ im Namen zeigt es schon auf: CSS-Regeln sind eine Kaskade von Eigenschaften, die alle ausgewählten Elemente und ihre Kind- und Enkelkindelemente betreffen können.
Konkret bedeutet das, dass verschachtelte Elemente in den meisten Fällen die Eigenschaften ihres Elternelements „erben“. Wenn ihr z.B. eurem <body>-Element mit font-family: sans-serif; eine serifenlose Schriftart gebt, dann haben auch alle Elemente innerhalb des <body>-Elements eine serifenlose Schriftart, bis ihr diese Eigenschaft mit einer spezifischeren Regel überschreibt.
Um explizit anzugeben, dass der Wert einer Eigenschaft vom Elternelement geerbt werden soll, könnt ihr das Schlüsselwort inherit verwenden.
<header>
<nav>
<ul>
<li>
<a href="#">Start</a>
</li>
<li>
<a href="#">Über Mich</a>
</li>
<li>
<a href="#">Arbeiten</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
</ul>
</nav>
</header>
body {
color: black;
}
a {
/*
Links sind standardmäßg Blau, aber wir können
sie zwingen, die Farbe des Elternelements zu erben
*/
color: inherit;
}
Spezifität
Wie bereits beschrieben, werden CSS-Regeln von oben nach unten eingelesen und auf euer HTML angewandt, aber grundsätzlich gilt: Je spezifischer ein Selektor, desto wichtiger die Regel. Im Umkehrschluss bedeutet das, dass weniger spezifische Regeln von spezifischeren Regeln überschrieben werden, selbst wenn sie weiter unten im Stylesheet vorkommen. Nur wenn die Spezifität gleich ist, „gewinnt“ die Regel, die weiter unten in der Datei steht.
Die jeweilige Spezifität einer Regel hängt vom Selektor ab. ID-Selektoren (#) haben eine sehr hohe Spezifität, gefolgt von Klassen-Selektoren (.). Element-Selektoren sind sehr unspezifisch. Wenn ihr aber mehrere Element-Selektoren kombiniert, oder Pseudo-Klassen verwendet, steigt die Spezifität des gesamten Selektors. Kurz gesagt: Je länger der Selektor, desto wichtiger ist er auch.
Eine Ausnahme bilden Inline-Styles, sie überschreiben alle Regeln aus dem Stylesheet.
Außerdem überschreiben Regeln, die ein Element direkt ansprechen, auch immer vererbte Eigenschaften. Wenn ihr also die Textfarbe global im <body> auf grün stellt und dann sagt, dass alle <h1>-Elemente aber rot sein sollen, gilt das für <h1>-Elemente.
<h1>Ich bin nicht grün!</h1>
<p class="sans-serif">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ratione quod possimus labore optio? Magnam, temporibus delectus, neque accusamus perspiciatis dolorum cumque nihil quasi nemo consectetur tenetur iusto, ratione vitae illum!</p>
<ul>
<li>Lorem ipsum</li>
<li>Dolor sit</li>
<li>Amet consectetur</li>
</ul>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta, asperiores. Sunt tenetur, quo illum nemo placeat doloribus! Quaerat, enim, modi, magnam dolore hic ipsam magni minima in fugiat ducimus nemo!</p>
body {
color: green;
}
h1 {
/* <h1> ist rot anstatt grün */
color: red;
}
.sans-serif {
/* Klasse ist spezifischer als Element-Selektor */
font-family: sans-serif;
}
p {
font-family: cursive;
}
li:nth-child(2) {
/* Selektor mit Pseudo-Klasse ist spezifischer als Element-Selektor */
font-weight: normal;
}
li {
font-weight: bolder;
}
Zwischenpräsentation
Bitte bereitet für den 21.11. eine kleine Zwischenpräsentation eurer Website vor. In ca. 5 Minuten sollt ihr der Gruppe und mir eure Desktop- und Mobile-Designs vorstellen. Wir können dann gemeinsam Feedback geben und uns über die Machbarkeit unterhalten.
Praxis
Ihr habt Stylesheets kennengelernt. Versucht nun bitte, euer erstes Stylesheet zu erstellen und in eure Website einzubauen. Wenn ihr das geschafft habt, könnt ihr beginnen, mit CSS-Eigenschaften zu experimentieren.
Außerdem solltet ihr dem Design eurer Websites langsam den letzten Schliff geben und eure Präsentation vorbereiten.