TOC
wwworkshop
Juicy Workshop

2.4.2
CSS Übersicht

CSS besteht aus “Selektoren” und “Deklarationen”. Deklarationen legen das Aussehen fest (z.B. font-size: 20px; oder background: red;). Selektoren wählen aus, auf welche HTML-Elemente sich die Änderungen auswirken (z.B. alle Überschriften auf oberster Ebene: h1).

Selektoren sind im einfachsten Fall die Namen der HTML-Elemente oder eine kommagerennte Liste (h1, h2, p).

Einige nützliche Deklarationen sind:

  • font-size: 20px; — legt die Schriftgröße fest

  • font-family: sans-serif; — ändert die Schrifttype

  • color: grey; — ändert die Schriftfarbe

  • background: #268c41; — färbt den Hintergrund grün (Google nach “color picker”, um Farbcodes zu finden)

  • min-height: 100vh; — legt fest, dass ein Element mindestens so hoch wie das Browserfenster ist

  • text-align: center; — zentriert Text

style.css

* {
    font-family: sans-serif;
}

body {
    background: #fafafa;
}

h1 {
    font-size: 30px;
    font-weight: normal;
}

img, video {
    max-width: 100vw;
    max-height: 100vh;
    object-fit: cover;
}