Inhaltsverzeichnis

Sicher wartest du schon ganz interessiert darauf, dein neu erworbenes HTML-Wissen anzuwenden und ansprechende Layouts zu gestalten. Hier erfährst du daher alles über CSS, was du dafür wissen musst.

Einführendes Beispiel

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Faszination Klavier</title> </head> <body> <header> <h2>Faszination Klavier</h2> </header> <main> <h3>Wählen Sie eine Kategorie</h3> <div class="card"> <img src="piano1.jpg" /> <b>Das richtige Klavier finden</b> </div> <div class="card"> <img src="piano2.jpg" /> <b>Spielen mit zwei Händen</b> </div> <div class="card"> <img src="piano3.jpg" /> <b>Musizieren vor Publikum</b> </div> </main> <footer> © Die Online-Klavierschule <nav> <ul> <li> <a>Startseite</a> </li> <li> <a>Das richtige Klavier finden</a> </li> <li> <a>Spielen mit zwei Händen</a> </li> <li> <a>Musizieren vor Publikum</a> </li> <li> <a>Impressum</a> </li> </ul> </nav> </footer> </body> </html>

Faszination Klavier

Wählen Sie eine Kategorie

Das richtige Klavier finden
Spielen mit zwei Händen
Musizieren vor Publikum
<!DOCTYPE html> <html> <head> … <link rel="stylesheet" href="style.css" /> </head> <body> … </body> </html>
html, body { margin: 0; padding: 0; } header, footer { background-color: #0A0A0A; border-style: solid; border-color: black; border-width: 0; border-bottom-width: 2px; padding: 0.5em; color: white; font-size: 95%; } header h2 { font-size: 150%; text-align: center; margin: 0; color: white; text-shadow: 1px 1px 1px grey; } main { background-color: rgb(230, 230, 230); padding: 0.5em 0.5em 5em 0.5em; } .card { display: inline-block; width: 30%; border: 1px solid darkgrey; border-radius: 0.5em; background: rgba(245, 245, 245); padding: 0.5em; transition: transform 0.5s, background 0.5s; transform: scale(1); } .card:hover { background: white; transform: scale(1.03); cursor: pointer; } .card img { display: block; width: 100%; margin-bottom: 0.5em; } footer nav > ul { list-style: none; padding: 0; } footer nav > ul > li { display: inline-block; margin-right: 1em; } a, a:visited { color: rgb(246, 178, 188); text-decoration: none; } a:hover { color: white; }

Faszination Klavier

Wählen Sie eine Kategorie

Das richtige Klavier finden
Spielen mit zwei Händen
Musizieren vor Publikum

Bildnachweise: Pixabay: StockSnap, Pixabay: StockSnap, Pixabay: Robert_z_Ziemi

HTML und CSS in derselben Datei

<style> innerhalb des <head> wirkt auf die gesamte Seite.
Mit dem style-Attribut können einzelne HTML-Elemente gestyled werden.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML und CSS in einer Datei</title> <style> h1 { color: #CD0D0D; text-shadow: 1px 1px 1px grey; margin: 0; } p { margin-top: 0.5em; } </style> </head> <body> <h1>HTML und CSS endlich vereint!</h1> <p> Was lange währt, wird endlich gut. Nachdem sich HTML und CSS nach ihrer Trennung lange Zeit nicht mehr gesehen haben, haben sie heute endlich wieder zueinander gefunden. </p> <p style="color: darkred; font-weight: bold;"> Mit dem style-Attribut kann man gezielt einzelne Elemente gestalten. Das style-Element wirkt hingegen auf die ganze Seite und sollte daher eher im head stehen. </p> </body> </html>

CSS-Selektoren und das Document Object Model

Das Document Object Model

Einfache CSS-Selektoren

html
body
h1
p
Auswahl von Elementen nach ihrem Tag-Namen
#logo
Das Element mit id="logo"
.card
Alle Elemente mit class="card"
input[readonly]
Abfrage beliebiger HTML-Attribute: Suche alle <input>, die ein Attribut namens readonly haben

Zusammengesetzte CSS-Selektoren

h1, h2, h3
ODER-Verknüpfung bzw. Vereinigungsmenge mehrerer Selektoren
section.warning
UND-Verknüpfung zweier Selektoren: Alle <section> mit class="warning"
article .infobox
Eltern/Kind-Beziehung (transitiv, d.h. alle Nachfahren) bzw. Nachfahre-Beziehung: Suche alle Elemente mit class="infobox", die irgendwo innerhalb eines <article>-Elements stehen
section > h1
Eltern/Kind-Beziehung (nicht transitiv, d.h. nur direkte Nachfahren): Suche alle <h1>, deren direktes Elternelement ein <section> ist

Häufig benötigte CSS-Anweisungen

Textformatierung

font-family: Liberation Sans, Arial, sans-serif;
Legt die Schriftart für ein Element und seine Unterelemente fest. Werden mehrere Schriftarten angegeben, wird die erste gefundene verwendet. Immer vorhandene Schriften sind: serif, sans-serif, monospace, fantasy.
font-size: 12pt;
Legt die Schriftgröße eines Elements fest. Erlaubt sind entweder numerische Werte oder folgende Konstanten: small, x-small, large, x-large, …
font-weight: bold;
Legt fest, wie kräftig die Schrift erscheint. bold ist der normale Fettdruck. Es gibt aber auch normal, bolder und lighter.
color: crimson;
Ändert die Schriftfarbe des aktuellen Elements. Erlaubt sind alle Farbwerte, wie auf der nächsten Folie beschrieben.
html { font-family: Liberation Serif, serif; font-size: 12pt; } h1 { color: crimson; font-weight: bold; }

Dies ist eine Überschrift 1

Und dies ist ein kleiner Absatz.

Hintergrundfarben und Bilder

background-color: rgba(244, 186, 110, 0.9);
Ändert die Hintergrundfarbe eines Elements. Erlaubt sind natürlich alle Farbwerte aus der nächsten Folie. Mit rgba() lassen sich damit auch halbdurchsichtige Hintergründe definieren.
background-image: url(bg.jpg);
Legt ein Hintergrundbild fest, das standardmäßig so oft wiederholt wird, bis das Element komplett damit bedeckt ist. Siehe Folie 8 für weitere Möglichkeiten.
html { background-color: #F0F0F0; } header > nav { background-color: rgb(4, 192, 242); } .black { background-image: url(black_pattern.jpg); }
Hier kommt auch irgend ein Text hin …
Alle Rechte vorbehalten

Anzeigeart und Größe

display: block;
display: inline;
Dies sind die bekannten Voreinstellungen des Browsers, so wie sie im HTML-Folienatz erklärt wurden.
display: inline-block;
Eine Mischung aus Inline- und Blockelement. Im Prinzip handelt es sich beim betroffenen Element weiterhin um ein Blockelement, das sich in Teilen aber wie ein Inline verhält. Unter anderem passen sich Breite und Höhe komplett dem Inhalt an und es kann in derselben Zeile stehen wie weitere inline-block-Elemente
width: 75%;
min-width: 45%;
height: 10em; min-height: 10em;
Legen die Breite und Höhe der ausgewählten Elemente fest. width und height legen eine fixe Größe fest und können daher dazu führen, dass zu viel Inhalt aus den Elementen herausragt. min-width und min-height erlauben dem Element hingegen, mit seinem Inhalt zu wachsen.
overflow: hidden;
Sorgt dafür, dass zu großer Inhalt nicht aus dem Element herausläuft, sondern abgeschnitten wird.
div.card { display: inline-block; min-width: 7em; height: 3em; margin: 0.25em; padding: 0.5em; border: 1px solid black; border-radius: 0.3em; background-color: rgb(129, 8, 30); color: white; }
Dies sind Karten.
Dank „inline-block” stehen sie
nebeneinander!

Innenabstand und Außenabstand

margin: 1em;
Sorgt dafür, dass ein gleichmäßiger Abstand von 1em um die betroffenen Elemente frei bleibt. Achtung: Die margins zweier benachbarter Elemente addieren sich auf (siehe Skizze).
margin: 1em 0 2em 0;
margin-top: 1em;
margin-right: 0;
margin-bottom: 2em;
margin-left: 0;
Erlaubt es, die vier Abstände um ein Element herum einzeln zu definieren. Die Kurzform in der ersten Zeile wird im Uhrzeigersinn gelesen: Oben, rechts, unten, links.
padding: 1em;
padding: 1em 0 2em 0;
padding-top: 1em;
padding-right: 0;
padding-bottom: 2em;
padding-left: 0;
Im Prinzip dasselbe wie margin, nur dass es nicht um den Platz um das Element herum geht, sondern um den inneren Abstand vom Rand des Elements zu seinem Inhalt.
.gross { display: inline-block; font-size: 130%; padding: 3em; margin: 1rem; background-color: rgb(7, 88, 97); color: white; } .klein { display: inline-block; padding: 0.75em; margin: 1rem; background-color: rgb(138, 54, 172); color: white; }
Großer Bereich
Kleiner Bereich

Rund um den Rahmen

border: 1px solid black;
border-width: 1px;
border-style: solid;
border-color: black;
border-bottom-width: 0;
Verschiedene Optionen zur Definition der Rahmendicke, Rahmenart und Rahmenfarbe. border-width, border-style und border-color können alle vier oder nur eine Seite beeinflussen. Für letzteres muss nach border- eine der vier Richtungen angegeben werden: top; right, bottom, left.
border-radius: 0.5em;
border-top-left-radius: 4px;
border-top-right-radius: 50%;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 0.75vh;
Früher waren alle HTML-Elemente eckig wie Toastbrot. 🍞 Heute können sie auch abgerundete Ecken besitzen.
box-shadow: 2px 2px 4px rgba(0,0,0, 0.5);
Zeichnet einen weichen Schatten um das Element herum. Diese Anweisung ist der Schlüssel zum Google Material-Design. Die vier Werte bedeuten: X-Richtung, Y-Richtung, Weichzeichnung und Farbe.
.rect1, .rect2, .rect3, .rect4 { display: inline-block; padding: 0.5em; font-size: 160%; min-width: 3.5em; box-shadow: 1px 1px 2px rgba(0,0,0, 0.5); } .rect1 { border: 2px solid black; border-radius: 0.3em; background: rgb(107, 159, 103); } .rect2 { border: 2px solid black; border-top-left-radius: 0.3em; border-top-right-radius: 0.3em; background: rgb(17, 189, 207); } .rect3 { border: 2px solid black; border-top-left-radius: 0.3em; border-bottom-right-radius: 0.3em; background: rgb(58, 159, 80); } .rect4 { border: 2px solid black; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background: rgb(194, 194, 93); }
1
2
3
4

Maßeinheiten und Farben in CSS

Maßeinheiten

Einheit Beschreibung
px Ein „virtueller” Pixel auf den Bildschirm
pt 1 Punkt = 0,376 Millimeter, üblich für Schriftgrößen
em Ungefähr die Breite eines großen M („Geviert”)
ex Höhe eines kleinen X
rem Wie em nur mit der Schriftgröße des Wurzelelements
% Ein Prozent der Höhe oder Breite des Elternelements, je nach Verwendung
vw Ein Prozent der Breite des Browserfensters (Viewport Width)
vh Ein Prozent der Höhe des Browserfensters (Viewport Height)

Farben in CSS

Eingebaute Namen
Hexadezimalcode
  • #FF0000
  • #FFFF00
  • #ADD8E6
RGB-Tuppel
  • rgb(255, 255, 0)
  • rgb(173, 216, 230)
RGBA-Tuppel
  • rgba(100, 100, 100, 0.75)
  • rgba(173, 216, 230, 0.85)

Aufgabe 1: Ein kleines CSS-Quiz

Aufgabe 1.1: Welcher CSS-Selektor wählt …

a) … alle Absätze der Seite aus?

  1. div
  2. p.absatz
  3. p > .absatz
  4. p

b) … alle Elemente der Klasse „info” aus?

  1. info
  2. #info
  3. .info
  4. info()

c) … das Element mit der ID „page-title” aus?

  1. page-title
  2. #page-title
  3. .page-title
  4. page #title

d) … alle Elemente der Klasse „active” aus, die sich innerhalb eines <nav>-Elements befinden?

  1. nav .active
  2. nav > .active
  3. nav.active
  4. nav #active

Aufgabe 1.2: Mit welcher CSS-Anweisung kann man …

a) … die Schriftart festlegen?

  1. font-size
  2. font-family
  3. font-weight
  4. text-decoration

b) … ein Hintergrundbild setzen?

  1. background-color
  2. background-image
  3. background-size
  4. background

c) … den Innenabstand vom Rahmen eines Elements zu seinem Inhalt definieren?

  1. padding
  2. margin
  3. border

d) … einen Schatten definieren?

  1. border-radius
  2. text-decoration
  3. text-shadow
  4. box-shadow

Lösung: Aufgabe 1.1: 4, 3, 2, 1 und 2; Aufgabe 1.2: 2, 2 und 4, 1, 3 und 4

Aufgabe 2: Dein erstes Stylesheet

Kopiere den folgenden Quellcode in eine neue HTML-Datei und passe das Stylesheet gemäß der Beschreibung an. Das Ergebnis sollte ungefähr wie auf dem dritten Reiter aussehen.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mein erstes Stylesheet</title> <style> /** Schreibe hier dein Stylesheet */ </style> </head> <body> <header> <h1>Meine kleine Musiksammlung</h1> </header> <main> <h2>Joe Cocker</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Accross From Midnight</span> <br /> 1997, 12 Titel, Lieblingssong: <i>The Last One To Know</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">No Ordinary World</span> <br /> 1999, 12 Titel, Lieblingssong: <i>My Father's Son</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Fire It Up</span> <br /> 2012, 13 Titel, Lieblingssong: <i>Younger</i> </div> </div> <h2>Mark Knopfler</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Golden Heart</span> <br /> 1996, 14 Titel, Lieblingssong: <i>Are We In Trouble Now</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Sailing To Philadelphia</span> <br /> 2000, 13 Titel, Lieblingssong: <i>Sailing To Philadelphia</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">All The Roadrunning</span> <br /> 2006, 12 Titel, Lieblingssong: <i>I Dug Up A Diamond</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">Tracker (Deluxe Edition)</span> <br /> 2015, 18 Titel, Lieblingssong: <i>Terminal To Tribute To</i> </div> </div> <h2>Queen</h2> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">The Works</span> <br /> 1984, 9 Titel, Lieblingssong: <i>I Want To Break Free</i> </div> </div> <div class="album"> <div class="icon">💿</div> <div class="description"> <span class="title">A Kind Of Magic</span> <br /> 1986, 9 Titel, Lieblingssong: <i>Friends Will Be Friends</i> </div> </div> </main> </body> </html>

<html> und <body>

  • Außenabstand: 0
  • Innenabstand: 0

Der Header

  • Hintergrundfabe: rgb(22, 177, 198)
  • Schriftfarbe: Weiß
  • Innenabstand: 0.5em
  • Außenabstand nach unten: 1em

Der Hauptbereich

  • Innenabstand: 0.5em
  • Schriftfarbe der Überschriften: rgb(17, 96, 107)

Die einzelnen Alben

  • Durchgezogener Rahmen, 1px breit, hellgrau
  • Kein Innenabstand
  • Außenabstand nach unten: 1em
  • Breite: 30em
  • Schriftgröße des Icons: 330%
  • Albumtitel fettgedruckt
  • Icon und Beschreibung nebeneinander (mit display: inline-block)
  • Abstand links von der Beschreibung: 0.5em

Meine kleine Musiksammlung

Joe Cocker

💿
Accross From Midnight
1997, 12 Titel, Lieblingssong: The Last One To Know
💿
No Ordinary World
1999, 12 Titel, Lieblingssong: My Father's Son
💿
Fire It Up
2012, 13 Titel, Lieblingssong: Younger

Mark Knopfler

💿
Golden Heart
1996, 14 Titel, Lieblingssong: Are We In Trouble Now
💿
Sailing To Philadelphia
2000, 13 Titel, Lieblingssong: Sailing To Philadelphia
💿
All The Roadrunning
2006, 12 Titel, Lieblingssong: I Dug Up A Diamond
💿
Tracker (Deluxe Edition)
2015, 18 Titel, Lieblingssong: Terminal To Tribute To

Queen

💿
The Works
1984, 9 Titel, Lieblingssong: I Want To Break Free
💿
A Kind Of Magic
1986, 9 Titel, Lieblingssong: Friends Will Be Friends
html, body { margin: 0; padding: 0; } header { background: rgb(22, 177, 198); color: white; font-weight: bold; text-shadow: 1px 1px 1px rgba(200, 200, 200, 0.75); padding: 0.5em; margin-bottom: 1em; } main { padding: 0.5em; } h2 { color: rgb(17, 96, 107); } .album { border: 1px solid lightgrey; width: 30em; padding: 0.5em; margin-bottom: 1em; color: rgba(25, 25, 25); } .album > .icon { font-size: 330%; display: inline-block; } .album > .description { display: inline-block; margin-left: 0.5em; } .album .title { font-weight: bold; }

Exkurs: Spaß mit Hintergrundbildern

html { background-image: url(tiles.png); }

Ordnet man einem beliebigen Element ein Hintergrundbild zu, wird das Bild standardmäßig wie die Kacheln im Bad so oft wiederholt, bis sie das ganze Element ausfüllen. In der Regel ordnet man es daher dem <html> oder <body> zu, um die ganze Seite damit auszufüllen.

Vor allem in den frühen Jahren des Web hat man diesen Effekt häufig gesehen. Heute wirkt es jedoch oft altbacken und wird daher nicht mehr so oft angewendet.

Beispiel

Meine erste Webseite

Und sie hat sogar einen gekachelten Hintergrund, so wie früher in den 1990ern.

Naja, modern ist das nicht. Heute bevorzugt man eher einfarbige Hintergründe.

html { background-image: url(foto.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; }

Die obigen CSS-Anweisungen zeigen, wie man der Seite ein Hintergrundbild zuordnen kann, das immer die volle Größe ausfüllt. Da man nicht wissen kann, welche Größe des Browserfenster später haben wird, wird um die Mitte herum alles abgeschnitten, was nicht in das Fenster passt. Das Bild wird dafür aber immer so gestreckt, dass es das ganze Fenster ausfüllt ohne zu verzerren.

Dieser Effekt war in den 2010ern eine Zeit lang modern, tritt inzwischen aber nicht mehr ganz so oft auf. Wichtig ist, dass man trotz des Bildes die Schrift noch gut lesen kann.

Beispiel

Eine moderne Seite mit Hintergrundbild

Sieht irgendwie cool aus, oder?

Bildnachweis: Pixabay: Meitzke

.ebene { background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } #ebene1 { background-image: url(bild1.jpg); } #ebene1 { background-image: url(bild2.jpg); } #ebene3 { background-image: url(bild3.jpg); }

Ordnet man die Hintergrundbilder nicht der gesamten Seite sondern einzelnen untereinander stehenden Elementen zu und verwendet man dabei noch die Anweisung background-attachment: fixed;, entsteht ein interessanter Effekt. Beim Scrollen bleibt ein Teil des Hintergrunds stehen und ein anderer Teil schiebt sich quasi darüber.

Dieser Effekt, der ebenfalls seit ca. 2010 sehr beliebt ist, nennt sich „Parallax Scrolling”. Er eignet sich am besten für One-Pager, also Webseiten, die nur aus einer langen, nach unten scrollenden Seite bestehen. Manche Webdesigner haben den Effekt mit JavaScript perfektioniert und auf die Spitze getrieben. Das Grundgerüst ist aber ziemlich einfach.

Hinweis: Auf mobilen Geräten funktioniert der Effekt ziemlich schlecht, da diese, um Akku zu sparen, verschiedene Optimierungen beim Scrollen anwenden, die mit background-attachment: fixed; nicht harmonieren. Man sollte den Effekt daher durch ein „Media Query” auf nicht-mobile Geräte beschränken.

Beispiel ansehen

Exkurs: Animationen mit CSS

transition: width 0.7s, height 0.7s;
Legt fest, welche Eigenschaften animiert werden sollen und wie lange die Animation jeweils dauern soll. Mehrere Animationen können durch Komma getrennt definiert werden. Abgespielt werden den Animationen, wenn sich die jeweilige Eigenschaft verändert. Hierfür braucht man eigentlich JavaScript, einfache Mausereignisse gehen aber auch ohne.
@keyframes hin-und-her { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } }
Keyframe-Animationen werden mit @keyframe definiert, wobei der Animation ein eindeutiger Namen gegeben werden muss. Die einzelnen Zeitpunkte innerhalb der Animation werden in Prozent von 0% bis 100% angegeben. Wie lange die Animation dauert und wie schnell die Zeitpunkte erreicht sind, hängt von der Geschwindigkeit ab, die man ihr später gibt.
.wackelpeter { animation: hin-und-her 0.7s alternate infinite; }
Über die animation-Anweisung und ihre Ableger wird eine benannte Keyframe-Animation an ein Element gebunden. Die Animation fängt sofort an zu laufen und muss nicht zuvor aktiviert werden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Einfache Animationen mit CSS</title> <style> /** Transition, wenn die Maus drüber fährt */ .icon { font-size: 330%; transition: font-size 0.4s; } .icon:hover { font-size: 450%; } /** Dauerhafte Keyframe-Animation */ @keyframes a1 { 0% { transform: rotate(-4deg); } 100% { transform: rotate(4deg); } } .wackeln { font-size: 330%; display: inline-block; transform-origin: 50% 50%; animation: a1 0.5s alternate infinite; animation-timing-function: linear; } </style> </head> <body> <p> <span class="icon">📸</span> <span class="icon">🔭</span> <span class="icon"> 💾</span> </p> <p> <div class="wackeln">🎹</div> <div class="wackeln">🎸</div> <div class="wackeln">🥁</div> <div class="wackeln">🎷</div> </p> </body> </html>

📸 🔭 💾

🎹
🎸
🥁
🎷

Weitere CSS-Layoutmodule

Alternative CSS-Layoutalgorithmen

🔎

Rechtshinweise

Creative Commons Namensnennung 4.0 International

§