Kurse
Lektionen
Schritt 3 von 11 im Lernpfad Webentwicklung
CSS
Mit CSS gestaltest du, wie Webseiten aussehen. Wenn du HTML und CSS beherrschst, kannst du jede optisch ansprechende Website bauen.
Lektionen
Lektionen
Mit CSS gestaltest du, wie Webseiten aussehen. Wenn du HTML und CSS beherrschst, kannst du jede optisch ansprechende Website bauen.
Lektionen
Lektion 1
Füge CSS in einem style-Attribut, einem <style>-Element oder einer mit <link> eingebundenen Datei style.css hinzu.
Für die Lektion bekommst du 55 XP
Lektion 2
Wähle Elemente nach Typ, Klasse und ID aus, gestalte sie mit :hover und finde heraus, welche Regel gewinnt.
Für die Lektion bekommst du 115 XP
Lektion 3
Lege color und background-color mit rgb(), Hex oder hsl() fest und blende ganze Elemente mit opacity aus.
Für die Lektion bekommst du 55 XP
Checkpoint
Färbe die Speisekarte eines Cafés ein, markiere vegane und ausverkaufte Speisen und hebe das Tagesangebot hervor.
Für die Lektion bekommst du 30 XP
Lektion 5
Wähle Schriften mit font-family, lege Textgrößen in rem fest und binde einen Webfont von Google Fonts ein.
Für die Lektion bekommst du 75 XP
Lektion 6
Gib Boxen Breite, Innenabstand, Rahmen und Außenabstand und zentriere sie mit margin: 0 auto.
Für die Lektion bekommst du 95 XP
Checkpoint
Gestalte eine Profilkarte mit abgerundeten Ecken, Initialen in einem blauen Kreis und zentriertem Text.
Für die Lektion bekommst du 30 XP
Lektion 8
Reihe Elemente mit display auf oder blende sie aus und platziere sie mit position: absolute oder sticky.
Für die Lektion bekommst du 95 XP
Lektion 9
Ordne eine Navigationsleiste und Karten mit display: flex, justify-content und align-items an.
Für die Lektion bekommst du 60 XP
Checkpoint
Gestalte eine Preisseite: eine Navigationsleiste, Preiskarten nebeneinander und ein Etikett am beliebtesten Tarif.
Für die Lektion bekommst du 30 XP
Lektion 11
Baue ein Grid aus Karten mit 1fr-Spalten und gestalte mit grid-template-areas das Layout einer ganzen Seite.
Für die Lektion bekommst du 75 XP
Lektion 12
Gestalte selbst das Aussehen einer ganzen Seite: eine Webschrift, Farben, Abstände, Flexbox und Grid.
Für die Lektion bekommst du 80 XP
CSS bestimmt, wie eine Webseite aussieht: ihre Farben, Schriften, Abstände und ihr Layout. Der Kurs beginnt mit Selektoren und Farben, führt über Text, das Box-Modell und die Positionierung und endet mit den beiden Layoutsystemen, die moderne Websites nutzen, Flexbox und CSS Grid.
Du übst an echten Seiten, einer Café-Speisekarte, einer Profilkarte und einer Preisseite, und im Abschlussprojekt gestaltest du das Aussehen einer ganzen Seite selbst. Jede Übung prüft deine Stile in einer Live-Vorschau. Am besten machst du vorher den HTML-Kurs.