Webtechnologien I
Web Publishing Basics: CSS
Prof. Dr. Raphael Roßmann
MKD, WS 25/26
Stand: 27.11.2025
2
CSS im “Frontend-Stack”
3
Hypertext Markup Language
Damit strukturieren wir den Inhalt/Text und integrieren Bilder, Audio, Video. Außerdem setzen wir Links auf andere Dokumente und Inhalte im WWW (Hypertext = verlinkter Text)
Cascading Style Sheets
Damit kontrollieren wir die visuelle Ausgabe des HTML-Markups �im Browser: Schriften, Farben, Layout, Animationen ...
JavaScript
Die Interaktionsmöglichkeiten von HTML sind beschränkt. �JavaScript erlaubt es uns, auf unterschiedlichste Ereignisse und Nutzereingaben zu reagieren und ermöglicht im Browser fast �beliebig komplexe Applikationen.
✔
✔
Cascading Style Sheets (CSS)
4
Cascading Style Sheets (CSS)
5
Beispiel für ein Inline-Stylesheet mit einer CSS-Regel:
<style>
h1 {
font-size: 35px;
color: red;
}
</style>
Keine Panik!
Das sieht komplizierter aus als es ist …
Cascading Style Sheets (CSS): Syntax
6
<style>
h1 {
font-size: 35px;
color: red;
}
</style>
CSS-Regel
Selektor
Eigenschaft
Wert
Deklaration
Cascading Style Sheets (CSS): Syntax
7
h1 {
font-size: 35px;
}
h2 {
...
Geschweifte Klammern�umschließen Regel
Doppelpunkt trennt
Eigenschaft und Wert
Semikolon beendet
Deklaration/Zeile
8
OK, so funktioniert CSS also …
Jetzt müssen wir nur noch die möglichen Eigenschaften lernen!
CSS: Text formatieren
9
Eigenschaft | CSS-Eigenschaft | Wert(e) | Beispieldeklaration |
Schriftart | font-family | Schriftname(n), durch Komma getrennte Kaskade | font-family: Arial, Verdana, sans-serif; |
Schriftgröße | font-size | Pixel (px), Punkt (pt), Prozent (%), em | font-size: 15px; |
Schriftstärke | font-weight | normal (=400), bold (=700), 100 bis 900 | font-weight: bold; |
Schriftlage | font-style | normal, italic, ... | font-style: italic; |
Schriftfarbe | color | Farbnamen, RGB- oder HSL-Angaben (s.u.) | color: white; color: #ffffff; |
Großschreibung | text-transform | uppercase, lowercase,none | text-transform: uppercase; |
Unterstreichung | text-decoration | underline, line-through, none | text-decoration: underline; |
Ausrichtung | text-align | left, right, center | text-align: center; |
Zeilenhöhe | line-height | Pixel, Prozent, mehrfach (dezimal) | line-height: 1.4; |
Try it!
Demo
Tabelle soll nicht abschrecken!
Übung: Überschrift per CSS stylen
10
Gestalten Sie die Überschrift h1 im Browser mittels einer CSS-Regel. Sie soll folgende Eigenschaften festlegen:
Ich bin die Überschrift h1, die vom Browser dargestellt wird
Try it!
Lösung
(Vorlage als pdf siehe Moodle-Kurs)
Vererbung in CSS
11
Die Wirkungs- oder Verhaltensweise von Regeln innerhalb von CSS lässt sich zunächst am besten dadurch beschreiben, dass die in einer CSS-Regel definierten Eigenschaften vom übergeordneten Element oder Knoten innerhalb der hierarchisch aufgebauten HTML-Struktur an die von ihm eingeschlossenen Elemente vererbt, d.h. übertragen werden.
body
header
p
Vererbung, z.B. von: font-family: Arial;
Arial
Arial
Arial
Vererbung in CSS
12
Innerhalb der baumartig aufgebauten HTML-Struktur, die auch als Seitenbaum bezeichnet wird, entsteht somit eine Kaskade: die Eigenschaften werden von den übergeordneten Elementen weitergereicht an die Nachfolgeelemente (an die Kinder- und Enkelelemente usw.).
Von diesem Prinzip kommt also der Begriff "Cascading" in "Cascading Style Sheet" (CSS).
Body
header
p
Vererbung in CSS: Beispiel
13
Dass man Vererbung in eigenen Stylesheets clever nutzen kann, zeigt das folgende Beispiel.
Um die Schriftart in den h1- und p-Tags auf "Arial" einzustellen, bräuchte man ohne Vererbung einzelne Regeln mit gleichen Deklarationen. Stellt man die Schriftart dagegen für den übergeordneten body-Tag ein, dann wird die Schriftart an alle innenliegenden Tags "vererbt":
<style> /* ohne Vererbung */
p {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, sans-serif;
}
</style>
<style> /* mit Vererbung */
body {
font-family: Arial, sans-serif;
}
h1 { … }
p { … }
</style>
Try it!
Vererbung in CSS: Überschreiben
14
Die Vererbung von Stilen lässt sich gezielt durchbrechen durch Regeln, �die das gleiche Element (z.B. eine Überschrift) betreffen, aber später im Stylesheet kommen (in der Ladereihenfolge des Browsers).
Wenn wie oben im Beispiel gezeigt die Schriftart für alle Elemente schon durch eine Regel für den body definiert wurde, so kann die Vererbung gezielt durchbrochen werden, z.B. um nur die h1 mit einer anderen Schriftart darzustellen. Hier spricht man auch von "Überschreiben".
body {
font-family: Arial, sans-serif; /* für alle Elemente durch Vererbung */
}
h1 {
font-family: Tahoma, sans-serif; /* Überschreibt obige Regel für die h1 */
}
Design/Layout von Elementen und Containern
15
Eigenschaft | CSS-Eigenschaft | Wert(e) | Beispieldeklaration |
Breite | width | Pixel (px), Prozent (%) | width: 200px; |
Höhe | height | Pixel (px), Prozent (%) | height: 150px; |
Außenabstand | margin-top margin-right margin-bottom margin-left margin(=„shorthand“) | Pixel (px), Prozent (%), auto | margin-top: 20px; margin: 10px 20px 5px 20px; (kurz für: top right bottom left) |
Innenabstand | padding-top ... padding | Pixel (px), Prozent (%) | padding: 20px; |
Rahmen | border-top ... border | border-width: Pixel (px) border-style: „solid“, „dashed“.. border-color: (Farbwert) | Als „shorthand“: border: 1px dashed grey; border-top: 2px solid grey; |
Das CSS-Boxmodell
16
Das CSS-Boxmodell findet sich in ähnlicher Darstellung auch in den Entwicklertools der Browser (Taste F12 auf Windows)
Testen
Übung: Stylen von Textboxen (Boxmodell)
17
Wir erstellen zwei farbige Textboxen mit den gelernten Layout-Eigenschaften im interaktiven HTML-Editor auf flems.io und testen die Funktion des Box-Modells und der weiteren Layout-Eigenschaften:
Vorlage (HTML)
"Lösung" Vorlesung
CSS: Design/Layout: Hintergrund-Optionen
18
Eigenschaft | CSS-Eigenschaft | Wert(e) | Beispieldeklaration |
Hintergrund-Farbe | background-color | Farbnamen, RGB- oder HSL-Angaben (s.u.) | background-color: blue;�background-color: #0000FF; |
Hintergrund-Bild | background-image | url('Pfad/Dateiname‘) | background-image: url(‘bilder/see.jpg‘); |
Hintergrund-Position | background-position | horizontale und vertikale Position...
| background-position: center top; background-position: center -50px; background-position: 25% 33%; |
Hintergrund-Größe | background-size | Angabe Breite und Höhe in Pixeln oder Prozent; zusätzlich: „contain“, „cover“ | background-size: 100% 300px; background-size: cover; |
Hintergrund-Scrolling | background-attachment | Voreinstellung: „scroll“; �Alternative: „fixed“ | background-attachment: fixed; |
Übung: Hintergrund-Optionen in CSS
19
Vorlage (HTML)
Lösung/Demo
Das Farbsystem in CSS: Farbnamen
20
Eine Auswahl an festgelegten Farben lassen sich in CSS über Farbnamen zuweisen:
color: red; /* rot */
color: green; /* grün */
color: blue; /* blau */
color: chocolate; /* Yummi! */
Übersicht über die Farbnamen auf w3schools
Für eine präzise und individuelle Einstellung der gewünschten Farben sind die Farbnamen allerdings nicht geeignet!
Das RGB-Farbsystem in CSS: dezimal
21
RGB-Farbwerte in CSS-Deklarationen in dezimaler Schreibweise:
Man kann sich die Farbmischung hier wie drei (dimmbare) farbige Lampen (Rot, Grün und Blau) vorstellen (so ähnlich funktioniert das tatsächlich auch bei den Pixeln von Monitoren/Screens).
Ein Wert von 0 heißt, dass die Lampe ganz aus ist, �ein Wert von 255 heißt, dass die Lampe maximal leuchtet.
Leuchtet also nur die rote Lampe, bekommt man ein maximales Rot angezeigt: rgb(255, 0, 0)
color: rgb(255,0,0); /* "knallroter" Text */
Das RGB-Farbsystem in CSS: dezimal
22
Das RGB-Farbsystem in CSS: dezimal
23
Bei gleichen Werten der drei "Kanäle", d.h. wenn die Farben Rot, Grün und Blau gleich stark leuchten, ergeben sich daraus dunkle bis helle Grautöne (zwischen Schwarz und Weiß):
color: rgb(0,0,0); /* Schwarz */
color: rgb(70,70,70); /* Dunkelgrau */
color: rgb(150,150,150); /* Mittleres Grau */
color: rgb(220,220,220); /* Hellgrau */
color: rgb(255,255,255); /* Weiß */
Übung zum dezimalen RGB-Farbsystem
24
Stellen Sie per CSS die Farbe der Überschriften h1 auf ein dunkles Blau, �die der h2 auf ein dunkles Grün und die der Absatzschrift auf Magenta ein.
h1 {
color: rgb(0,0,0);
}
h2 {
color: rgb(0,0,0);
}
p {
color: rgb(0,0,0);
}
Try it!
Übung zum dezimalen RGB-Farbsystem (Lösung)
25
Stellen Sie per CSS die Farbe der Überschriften h1 auf ein dunkles Blau, �die der h2 auf ein dunkles Grün und die der Absatzschrift auf Magenta ein.
h1 {
color: rgb(0,0,80);
}
h2 {
color: rgb(0,70,0);
}
p {
color: rgb(255,0,255);
}
Lösung/Demo
Das RGB-Farbsystem in CSS: hexadezimal
26
RGB-Farbwerte in CSS-Deklarationen in hexadezimaler �Schreibweise (je zwei Stellen pro RGB-Komponente):
color: #000000; /* schwarz kurz: #000; */
color: #FFFFFF; /* weiß kurz: #FFF; */
color: #FF0000; /* rot kurz: #F00; */
color: #00FF00; /* grün kurz: #0F0; */
color: #0000FF; /* blau kurz: #00F; */
(DEMO 1 und DEMO 2 auf w3schools)
Das hexadezimale Zahlensystem ist für uns ungewohnt, aber im Computerbereich (neben dem Dualsystem/Binärsystem) durchaus üblich.
Exkurs: Zahlensysteme
27
Dezimalsystem: Zahl [1011]10 *
Unser bekanntes Zahlensystem!
Dualsystem (Binärsystem): Zahl [1011]2
„Der Computer rechnet mit Nullen und Einsen“: Basis sind 2er-Potenzen: Einsatz z.B. bei RAM-Größe, IPv4-Adressen
Hexadezimalsystem: Zahl [1011]16
Höhere Kapazität als Dual- und Dezimalsystem; Einsatz z.B. bei CSS-Farbangaben und IP-Adressen (IPv6)
(* Der tiefgestellte Index nach der eckigen Klammer steht für das jeweilige Zahlensystem).
Exkurs: Zahlensysteme
28
Dezimalsystem: Zahl [1011]10
(Pro Stelle Werte von 0-9, d.h. es können pro Stelle 10 Werte dargestellt werden – unser bekanntes System)
Dualsystem (Binärsystem): Zahl [1011]2 = [11]10
(Pro Stelle die Werte 0 und 1, d.h. es können pro Stelle nur 2 Werte dargestellt werden – geringere “Kapazität“ – „1 Bit“)
Hexadezimalsystem: Zahl [1011]16 = [4113]10
(Pro Stelle Werte von 0-9, dann A, B, C, D, E, F d.h. es können pro Stelle 16 Werte dargestellt werden)
Online-Umrechner
Exkurs: Zahlensysteme - Kapazitäten
29
Online-Umrechner
Übung zu den RGB-Farbsystemen
30
Welche Textfarben werden hier per CSS festgelegt?
color: #333333; /* Dunkelgrau */
color: #dfdfdf; /* Hellgrau */
color: #05ee04 ; /* sattes Grün */
color: #b0b00b; /* "schmutziges" Gelb/Tarngrün */
color: rgb(10,5,200); /* sattes Blau */
color: rgb(200,200,200); /* Hellgrau */
color: rgb(200,0,200); /* Magenta */
Mischen Sie per Hexadezimalcode und RGB-Angabe ein dunkles Blau: rgb(0,0,80) und #000050
w3schools-Mixer Hex
w3schools-Mixer RGB
w3schools-Converter
Übung zu den RGB-Farbsystemen
31
Was bedeutet im Web (CSS) ein Farbwert von: #F0A10B?
3 Farbkomponenten Rot, Grün und Blau (RGB-Farbraum) mit Werten von je [00]16 bis [FF]16 (entspricht [00]10bis [255]10)
01 Rot-Komponente: [F0]16– Dezimal: [240]10
02 Grün-Komponente: [A1]16– Dezimal: [161]10
03 Blau-Komponente: [0B]16– Dezimal: [11]10
#F0A10B = rgb(240,161,11)
Lösung: Das ergibt die Farbe ?
Online-Umrechner
w3schools-Mixer
Übung zu den RGB-Farbsystemen
32
Wie viele Farben lassen sich im aktuellen Farbsystem des Browsers maximal erzeugen?
Pro Farbkanal (Rot, Grün und Blau) lassen sich maximal 256 Farbstufen darstellen (255 plus die Null, s.o.).
Dies ergibt 256*256*256 (oder 2563) Kombinationen.
Ergibt: ca. 16,8 Millionen Farben
Übung: Ausgabe im Browser
33
Welche Ausgabe erzeugt folgender HTML- und CSS-Code im Browser?
<style>
p {
width: 150px;
background-color: #DD00AA;
color: rgb(240,240,240);
padding: 30px 10px;
margin: 20px auto;
border: 3px solid #555;
text-align: center;
}
</style>
<body>
<p>Hopp oder Top?</p>
</body>
Lösung im Browser
CSS-Selektoren: Tags selektieren
34
Um HTML-Elemente mit CSS-Regeln zu stylen, müssen wir diese Elemente „selektieren“. Dafür verwenden wir für jede CSS-Regel mindestens einen „Selektor“.
Eine Art von Selektor haben wir bereits kennengelernt und eingesetzt, das ist der Tag-Name, z.B. body, h1, p oder footer
<style>
p {
font-size: 25px;
}
</style>
CSS-Selektoren: Klassen selektieren
35
Das Problem mit der Selektion per Tag-Name ist allerdings, dass dann ALLE Elemente, die vom gleichen Tag umschlossen sind, gleich aussehen würden.
Eine Möglichkeit, mit der man Elemente unterschiedlich stylen kann, ist die Verwendung von CSS-Klassen.
Im HTML-Markup wird dazu ein eigener Klassenname vergeben:
<body>
<p>Absatz normal</p>
<p class="blau">Absatz mit blauem Text</p>
</body>
CSS-Selektoren: Klassen (Beispiel)
36
<head>
<style>
p.blau { /* oder nur ".blau" – kein Leerzeichen! */
color: blue;
}
</style>
</head>
<body>
<p>Absatz normal</p>
<p class="blau">Absatz mit blauem Text</p>
</body>
CSS-Selektoren: Klassen (Beispiel)
37
Unterschiedliche Schreibweisen der Selektoren:
Der Selektor p.blau wählt alle <p>-Tags auf der HTML-Seite aus, die mit der Klasse „blau“ versehen sind.
Andere Tags mit der Klasse „blau“ werden nicht selektiert!
<p class="blau"> aber nicht: <h1 class="blau">
Der Selektor .blau wählt dagegen alle Elemente/Tags auf der HTML-Seite aus, die mit der Klasse „blau“ versehen sind.
<p class="blau"> und zugleich: <h1 class="blau">
DEMO ohne Klasse DEMO mit Klasse
CSS-Selektoren: IDs selektieren
38
Neben den CSS-Klassen gibt es für die Kennzeichnung von HTML-Elementen noch IDs. Diese funktionieren ganz ähnlich wie Klassen, allerdings darf es IDs nur einmal auf der Website geben (sie sollen also einzigartig sein).
<body>
<p>Absatz normal</p>
<p id="rot">Absatz mit rotem Text</p>
</body>
CSS-Selektoren: IDs (Beispiel)
39
<head>
<style>
p#rot { /* oder nur "#rot" – kein Leerzeichen! */
color: red;
}
</style>
</head>
<body>
<p>Absatz normal</p>
<p id="rot">Absatz mit rotem Text</p>
</body>
CSS-Selektoren: IDs (Beispiel)
40
Auch bei IDs kann man wieder beide Schreibweisen für den Selektor wählen:
p#blau oder nur: #blau
(da jede ID nur einmal auf der Seite vorkommen sollte, müsste bei beiden Methoden jeweils nur ein Element selektiert werden!)
IDs können im Markup auch miteinander kombiniert werden und es kann sogar mehrere Klassen pro Element geben, z.B. so:
<div id="box1" class="blau breit">
Der Text in der Box
</div>
CSS-Selektoren: Mehrfachselektor
41
Um mehrere Selektoren gleichzeitig mit CSS-Eigenschaften zu versehen, ist es nicht unbedingt notwendig, separate Regeln zu erstellen.
Kürzer ist die Verwendung von Mehrfachselektoren:
<style>
header, footer, .grau {
font-size: 20px;
color: #222;
}
</style>
Die Selektoren werden einfach per Komma getrennt
Was wird durch diese Regel selektiert und wie gestaltet?
CSS-Selektoren: Nachfahrenselektor
42
Die Selektion per Klasse ist wie oben erwähnt eine gute Möglichkeit, um nur bestimmte Elemente auf der Webseite zu selektieren. Bei komplexen Websites entstehen so aber schnell viele Klassen, die den Markup unübersichtlich machen können.
Nachfahrenselektoren wählen Elemente nur anhand des Elternelements aus, d.h. sie arbeiten mit der Hierarchie des HTML-Dokumentes:
<style>
footer p { /* Achtung! Kein Komma! */
color: white;
}
</style>
CSS-Selektoren: Nachfahrenselektor
43
<head>
<style>
footer p { /* Achtung! Kein Komma! */
color: red;
}
</style>
</head>
<body>
<p>Ein normaler Absatz</p>
<footer>
<p>Ein roter Text innerhalb der Fußzeile</p>
</footer>
</body>
Nur der Absatztext INNERHALB des footer-Tags wird rot dargestellt!
Dieser p-Tag ist ein „Nachfahre“ (hier „Kind“) des footer-Tags.
Demo im Browser
CSS-Selektoren: Übung
44
<head>
<style>
/* CSS einfügen */
</style>
</head>
<body>
<p>Ich bin der <em>erste</em> Absatz</p> <!-- Markup anpassen -->
<p>Ich bin der <em>zweite</em> Absatz</p>
<p>Ich bin der <em>dritte</em> Absatz</p> <!-- Markup anpassen -->
<div>
<p>Ich bin der <em>vierte</em> Absatz</p> <!-- Nicht anpassen -->
</div>
</body>
Vorlage HTML
Geben Sie den ersten Absatz (per Id) in der Schriftfarbe Blau, den zweiten in Schwarz und den dritten (per Klasse) in der Schriftfarbe Rot aus.
Im vierten Absatz soll <em> statt kursiv fett erscheinen (dies soll OHNE Id oder Klasse gelöst werden!).
Lösung
CSS-Selektoren: Pseudoselektor (Pseudoklasse)
45
Diese Selektoren beziehen sich weniger auf feste Elemente, sonderen �auf Zustände oder den Kontext eines Tags. Diese Selektoren sind z.B. wichtig für das Stylen von Links und werden per Doppelpunkt an den Selektor angehängt:
<style>
a:link { /* Links, die noch nicht geklickt wurden oder nur "a" */ }
a:visited { /* schon besuchte Links */ }
a:hover { /* Maus über dem Link (muss nach "visited" kommen!) */ }
a:active { /* gerade angeklickter (aktiver) Link */ }
/* diese Zustände sollten in genau dieser Reihenfolge � festgelegt werden! */
</style>
Demo im Browser
CSS-Selektoren: Pseudoselektor ("Pseudoklasse")
46
Weitere Pseudoselektoren helfen einem dabei, Tags ohne Klassen unterschiedlich zu stylen, z.B. einzelne Items einer Liste:
<style>
ul li:first-child { /* Nur ERSTES Listenpunkt (li) */ }
ul li:last-child { /* Nur LETZER Listenpunkt (li) */ }
ul li:nth-child(3) { /* Nur DRITTER Listenpunkt (li) */ }
ul li:nth-child(odd) { /* Nur UNGERADE Listenpunkt (li) */ }
ul li:nth-child(even) { /* Nur GERADE Listenpunkt (li) */ }
</style>
Styling mit Pseudoselektoren
Vorlage Liste ohne CSS
CSS-Eigenschaft "display"
47
Die Eigenschaft "display" beeinflusst stark das Verhalten und die Darstellung eines Tags/Elementes im Browser.
Die Tags a, em, strong... sind standardmäßig auf "display: inline" eingestellt. Die mit a oder em ausgezeichneten Texte erhalten keine Höhe und Breite und laufen "in der Zeile mit" (="inline").
Die Tags p, div, footer... sind standardmäßig auf "display: block" eingestellt. Die so ausgezeichneten Texte erhalten immer eine eigene Zeile, können also nie nebeneinander stehen und lassen sich gut per "width" und "height" stylen.
Mit der Einstellung "display: inline-block" können Container zugleich als Blöcke/Boxen gestaltet und doch nebeneinander platziert werden.
Die Einstellung "display: none" unterbindet die Anzeige eines Elementes.
Weitere Einstellungen finden sich hier.
Demo
Modern & mächtig: Flexbox ("display: flex")
48
Über die Deklaration "display: flex" lässt sich als Alternative zu den älteren und wenig flexiblen Techniken die moderne Layouttechnik "Flexbox" aktivieren ("CSS Flexible Box Layout Module").
Dabei wird dem Elternelement, also z. B. einem umliegenden div-Container "display: flex" zugewiesen. Für die darin liegenden Kindelemente lassen sich dann unterschiedliche Verhaltensweisen bezüglich des Layouts erzeugen mit den Eigenschaften/Werten:
justify-content (horizontale Achse):�flex-start/flex-end/space-around/space-between/space-evenly/center
align-items (vertikale Achse): stretch/center/flex-start/flex-end
flex-direction (Reihung): row/column/row-reverse/column-reverse
Demo
Mobiloptimierung per Responsive Web Design (RWD)
49
1. Einstellung des Viewports per Meta-Tag im <head>:�<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Innerhalb des CSS-Stylesheets stellt man mittels sogenannter "Media Queries" die Breite des Browserfensters fest und reagiert dann mit eigenen CSS-Regeln, je nach zur Verfügung stehender Breite:
@media screen and (max-width: 800px) {
/* CSS-Regeln für Geräte mit Screen und � Browserbreite kleiner/gleich 800px (=Breakpoint) */
}
Demo
Individuelle Schriftarten als Webfonts einbinden
50
Webfonts ermöglichen per CSS den Zugriff auf indiviuelle Schriftarten, die �nicht auf dem Endgerät des Nutzers installiert sein müssen. �Sehr häufig werden dafür die Fonts von Google verwendet, da diese kostenfrei zu Verfügung stehen und sehr leicht über den Workflow auf der Website eingebunden werden können. (die rechtlichen Implikationen behandeln wir genauer im 4. Semester)
Demo
CSS-Aufgabe aus Prüfung
51
Vorlage als HTML
Vorlage als PDF
CSS-Aufgabe aus Prüfung: Lösung
52
<style>
article {
background-color: purple;
color: white;
font-family: Arial, sans-serif;
width: 400px;
height: 380px;
font-size: 17px; /* oder in eigener Regel für p einstellen */
padding: 25px;
margin: 20px auto; /* margin: 20px auto 20px auto; */
}
h1 {
font-size: 28px;
text-align: center;
margin: 0;
}
</style>
Lösung im Browser
Vorlage als HTML