CSS

CSS

CSS

Standard Stil-Sprache des webs: definiert Layout und Stil von HTML-Seiten

Stile auf HTML-Elemente anwenden

<h1 style="color: grey; font-size: 30px">Hello</h1>

Stylesheets einbinden

üblicherweise im head:

<link rel="stylesheet" href="style.css" />

CSS-Beispiel

/* comment */
h1 {
  font-family: sans-serif;
  color: grey;
}

#home-button {
  color: white;
}

CSS-Syntax

  • Selektoren
  • Properties

CSS-Selektoren

  • Universalselektor: *
  • Tag-Selektor: h1
  • Klassen-Selektor: .important
  • ID-Selektor: #home-button

CSS-Selektoren: Priorität

Falls sich zwei CSS-Attribute widersprechen, "gewinnt":

  • das Attribut mit dem spezifischeren Selektor
  • bzw. bei gleicher Spezifizität, das CSS-Statement, das im Code später auftritt

Farben

Farben

h1 {
  color: red; /* Schriftfarbe */
  background-color: blue; /* Hintergrundfarbe */
}

Farbangaben

  • Standard-Farben
    z.B. grey, blue, lightblue, ...
  • RGB-Definition (rot-grün-blau)
    z.B. rgb(255, 128, 128)
  • HEX-Definition
    z.B. #ff8080
  • HSL-Definition
    (hue, saturation, lightness - Farbton, Sättigung, Helligkeit)
    z.B. hsl(180, 60%, 70%)

Schrift

Schrift

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-style: italic;
  font-weight: bold;
  text-decoration: underline;
  text-align: center;
}

font-family

Es können mehrere Schriftarten angegeben werden. Der Browser verwendet die erste, die installiert ist.

p {
  font-family: Arial, sans-serif;
}

Drei allgemeine Schriftarten, die in jedem Browser vorhanden sind:

serif, sans-serif, monospace

font-size

mögliche Einheiten:

  • px: "Pixel"
  • %: Prozent relativ zum umgebenden Text
  • em: relativ zum umgebenden Text
  • rem: relativ zur Schriftgröße des html-Elements

übliche Standardgröße in Browsern: 16px

line-height

übliche Standardgröße in Browsern: 1.2

wird oft auf größere Werte gesetzt, z.B. 1.5

font-style

dient ausschließlich für kursive Schrift

h1 {
  font-style: italic;
}

font-weight

Um die Schriftstärke zu verändern, mögliche Werte:

  • 100
  • 200
  • 300 (auch: light)
  • 400 (auch: regular)
  • 500
  • 600 (auch: semibold)
  • 700 (auch: bold)
  • 800
  • 900

text-decoration

h1 {
  text-decoration: underline, overline, line-through;
}

text-align

  • center
  • justify
  • left
  • right
  • start
  • end

Längeneinheiten

Längeneinheiten

px, em, rem, %, vh, vw

device pixel ratio

früher:
1px = ein Pixel am Bildschirm

heutzutage:
z.B. beim iPhone 4: 1px = zwei Pixel am Bildschirm (device pixel ratio = 2)

abfragbar über JavaScript-Variable devicePixelRatio

rem

rem = Schriftgröße des html-Elements

Standard in Browsern: 1rem = 16px

vh, vw

1vh = 1% der Viewport-Höhe

1vw = 1% der Viewport-Breite

CSS Resets

CSS Resets

Resets: Stylesheets, die grundlegende Stile über verschiedene Browser hinweg vereinheitlichen:

  • normalize.css: website, CDN
  • sanitize.css: basiert auf normalize - website, CDN
  • reboot: basiert auf normalize, dient als Basis für Bootstrap - website, CDN

CSS-Libraries

CSS-Libraries

verbreitete CSS-Libraries:

einfache, grundlegende CSS-Library:

Variablen

Variablen

Definieren von CSS-Variablen:

:root {
  --primary-color: #1565c0;
  --secondary-color: #f50057;
}

Verwenden von Variablen:

h1 {
  color: var(--primary-color);
}

button {
  background-color: var(--primary-color);
  color: white;
}

Inline- und Block-Elemente

Inline- und Block-Elemente

Inline-Elemente:

  • nebeneinander dargestellt
  • so breit wie ihr Inhalt
  • z.B. a, em, strong, (img)

Block-Elemente:

  • untereinander dargestellt
  • so breit wie möglich
  • z.B. h1, ul, li, p

span & div

span = allgemeinstes inline-Element

div = allgemeinstes block-Element

Box-Modell

Box-Modell

"Schichten" von von Block-Elementen von innen nach außen:

  • Inhalt
  • Innenabstand (padding)
  • Rand (border)
  • Außenabstand (margin)

Box-Modell

Beispiel: zwei Boxen

Box-Modell

Größe des Inhalts:

  • height / width
  • min-height / min-width
  • max-height / max-width

Wenn wir einen Prozentsatz angeben (z.B. 50%), bezieht sich dieser auf das Elternelement

Box-Modell

Die Attribute height, width u.s.w. beziehen sich standardmäßig auf den Inhalt (ohne padding und border)

Heute setzt man oft:

* {
  box-sizing: border-box;
}

dann beziehen sie sich auf die Gesamtgröße (mit padding und border, aber ohne margin)

Padding (Innenabstand) und margin (Außenabstand)

  • Setzen aller vier Padding-Werte auf den gleichen Wert:
    padding: 10px
  • individuelles Setzen aller vier Werte:
    padding: 10px 20px 30px 40px (top - right - bottom - left)
  • Setzen der Paddings in vertikaler und horizontaler Richtung:
    padding: 10px 20px; (top und bottom - left und right)
  • automatisches Setzen des horizontalen Margins (horizontales Zentrieren):
    margin: 10px auto;
  • Individuelles setzen eines Paddings:
    padding: 10px; padding-left: 20px;

Box-Modell

Border-Beispiel: border: 1px solid blue

abgerundete Ecken: border-radius: 5px

margin & padding bei Inline-Elementen

Achtung: vertikales margin und padding wirken sich bei Inline-Elementen nicht auf die Positionierung aus und führen zu Überlappungen

Layout-Beispiel: Horizontales Zentrieren

div {
  width: 800px;
  margin: auto;
}

div {
  max-width: 800px;
  margin: auto;
}

Layout-Beispiel: Body mit voller Höhe

Standardmäßig: Body ist nur so groß wie dessen Inhalt

Um Body immer die volle Seitenhöhe einnehmen zu lassen:

html {
  height: 100%;
}
body {
  height: 100%;
}

Tabellen und Zellenrahmen

Standardmäßig hat jede Zelle in einer Tabelle einen eigenen Rahmen.

"Zusammenlegen" der Rahmen benachbarter Zellen:

table {
  border-collapse: collapse;
}

Overflow

Overflow

Standardverhalten, wenn ein Kindelement höher oder breiter als das Elternelement ist:

Das Kindelement ragt über das Elternelement hinaus

Overflow

Um bei Bedarf beim Elternelement Scrollleisten anzuzeigen:

#parent {
  overflow: auto;
}

Overflow - Beispiel

Beispiel: Anzeigen eines Hintergrunds für die ganze Seite durch einen body, der auf Fensterhöhe skaliert ist - aber Anzeigen von Scrollbars, falls der Inhalt darüber hinaus geht

body {
  height: 100vh;
  overflow: auto;
  background-color: lightgrey;
}

Overflow und das body-Element

Sonderfall: das body-Element verhält sich immer so, als ob overflow: auto; gesetzt wäre

Common CSS reset declarations

Box-sizing

* {
  box-sizing: border-box;
}

Body margin

Body margin (default: 8px) is commonly set to 0 - e.g. so a navbar can be at the very top

body {
  margin: 0;
}

Schriftart

Einfache Deklaration für serifenlose Schrift:

body {
  font-family: sans-serif;
}

Standard-Auswahl für serifenlose Schriften in Bootstrap / Reboot - beinhaltet native Schriftarten für verschiedene Plattformen:

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans',
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji' !default;
}

CSS Styling Beispiele

Body-Höhe

Sicherstellen, dass der body das ganze Fenster ausfüllt (z.B. um den Hintergrund zu setzen):

html {
  height: 100%;
}
body {
  height: 100%;
  padding: 0;
}

Button

Beispiel für einen Button mit angewendetem Stil:

button {
  background-color: #0074d9;
  color: #ffffff;
  padding: 0.5em 1em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Container

"fluid Container" - ähnlich wie bei Bootstrap:

.container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

Container

Container ähnlich wie bei bootstrap:

.container {
  padding-left: 12px;
  padding-right: 12px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    width: 720px;
  }
}
/* ... (more media queries) ... */

Container

standard Viewport-Breiten und Container-Größen in Bootstrap:

  • 576px → 540px
  • 768px → 720px
  • 992px → 960px
  • 1200px → 1140px
  • 1400px → 1320px

Grid

einfaches Beispiel aus Picnic CSS:

.flex {
  display: flex;
  flex-wrap: wrap;
}

Flexbox

Display property

Möglichkeiten:

  • display: block
  • display: inline
  • display: none
  • display: flex

Flexbox

Einfache Möglichkeit, Elemente nebeneinander oder untereinander anzuordnen

Flexbox Properties

container:

  • flex-direction
  • flex-wrap
  • justify-content
  • align-content
  • align-items

items:

  • flex-basis
  • flex-grow

Flexbox

#container {
  display: flex;
  flex-direction: row;
}

#container {
  display: flex;
  flex-direction: column;
}

Flexbox

Beispiel: Seitenlayout mit Navbar auf der Seite und Hauptbereich

body {
  display: flex;
  flex-direction: row;
}
body > nav {
  flex-basis: 5em;
}
body > main {
  flex-grow: 1;
}

Flexbox

Beispiel: article-Element mit header und scrollbarem Hauptbereich

article {
  height: 240px;
  display: flex;
  flex-direction: column;
}
article > header {
  height: 48px;
}
article > .main-content {
  flex-grow: 1;
  overflow-y: auto;
}

Flexbox

css-tricks.com

Media queries

Media queries

Möglichkeit, insbesondere die Bildschirmgröße und Orientierung abzufragen

Media queries

.menu {
  display: flex;
  flex-direction: column;
}

@media (min-width: 800px) {
  .menu {
    flex-direction: row;
  }
}

Media queries

@media (orientation: landscape) {
  .layout {
    flex-direction: row;
  }
}

Media queries

@media (min-width: 576px) {
  /* small screen */
}

@media (min-width: 768px) {
  /* medium screen */
}

/* ... */

Media queries

common breakpoints (roughly every 200px):

sizemin (bootstrap)min (tailwind)
xsN/AN/A
sm576px640px
md768px768px
lg992px1024px
xl1200px1280px
xxl1400px1536px

Ãœbungen

  • Google-Klon
  • Chat-Anwendung

Erweiterte CSS-Selektoren

Erweiterte CSS-Selektoren

  • Attribute
  • Unterelemente
  • Kindelemente
  • Pseudoklassen
  • Pseudoelemente

Attribute

input[type='checkbox'] {
  /* ... */
}

Unterelemente und Kindelemente

ein Link, der irgendwo im header auftritt:

header a {
  /* ... */
}

ein nav, das direkt im body liegt:

body > nav {
  /* ... */
}

Pseudoklassen

Pseudoklassen können mittel Doppelpunkt abgefragt werden:

a:hover {
  text-decoration: underline;
}
button:disabled {
  background-color: lightgrey;
}
tr:nth-child(2n) {
  background-color: grey;
}
tr:hover:nth-child(n) {
  background-color: lightgreen;
}

Pseudoklassen in Formularen

  • :checked
  • :empty
  • :valid
  • :invalid
  • :required

Pseudoklassen für Links, Buttons, ...

  • :hover
  • :visited
  • :active

Pseudoklassen für die Reihenfolge

  • :first-child
  • :last-child
  • :nth-child(2n)

Pseudoelemente

Pseudoelemente erlauben das Hinzufügen zusätzlicher HTML-Elemente via CSS:

.todo-item.completed::before {
  content: '✓';
}

nav button[aria-haspopup='true']::after {
  content: 'â–¾';
}

Schatten

Schatten

Schatten-Beispiel:

.shadow {
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px;
}
  • horizontaler Offset: 0px
  • vertikaler Offset: 8px
  • Blur Radius: 16px
  • Farbe: rgba(0, 0, 0, 0.15) (transparentes Schwarz)

Positionierung

Absolute Positionierung

Beispiel: ein div soll je 10px von der rechten unteren Ecke seines Elternelements positioniert sein

Absolute Positionierung

<div id="outer">
  <div id="inner"></div>
</div>

#outer {
  position: relative;
}

#inner {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

Positionierung

  • position: absolute
  • (position: relative)
  • (position: fixed)
  • (position: static: Standardwert)

Positionierung

Beispiel für position: relative: hochgestellter oder tiefgestellter Text

Beispiel

Facebook-Klon mit Chat

Grid

Grid

Beispiel: Layout mit Header und Sidebar

#layout {
  display: grid;
  height: 100vh;
  grid-template-areas: "header header" "sidebar main";
  grid-template-rows: auto 1fr;
  grid-template-columns: 200px 1fr;
}

Grid

Inhalte im Layout ausrichten:

#header {
  grid-area: header;
}

#main {
  grid-area: main;
}

/* ... */

Transformationen

Transformationen

#element1 {
  transform: translsate(100px, 0);
}

Transformationen

#element2 {
  transform: translate(100px, 0) rotate(45deg);
  transform-origin: 0 0;
}

Element wird zuerst um 45 Grad im Uhrzeigersinn gedreht, dann um 100 Pixel nach rechts verschoben

Punkt, um den gedreht wird: linke obere Ecke des Elements

Übergänge (Transitions)

Übergänge

Die Änderung verschiedener CSS-Properties kann wie folgt animiert werden:

#animated {
  transition: background-color: 3s, margin-top: 1s;
}

Beispiel: Animation bei Hover

div.box {
  width: 40px;
  height: 40px;
  background-color: blue;
  transform: rotate(0);
  transition: transform 9s, background-color 9s;
}
div.box:hover {
  background-color: red;
  transform: rotate(360deg) scale(2);
  transition: transform 0.5s, background-color 0.5s;
}

Beispiel: Spiel

div {
  width: 40px;
  height: 40px;
  background-color: blue;
  transform: translate(0, 0) rotate(0);
  transition: transform 9s, background-color 9s;
}
div:hover {
  background-color: red;
  transform: translate(200px, 0) rotate(360deg);
  transition: transform 3s, background-color 3s;
}

Aufgabe: Dropdown

Dropdown, das bei einem Buttonklick aktiv wird

HTML-Vorlage:

<div id="dropdown">dropdown</div>
<button
  id="dropdown-button"
  onclick="dropdown.className = 'active'"
>
  menu
</button>

Aufgabe: Overlay bei Hover

Aufgabe: Animation von Löffel und Gabel

Achtung: Wir verwenden nun CSS-Transformationen, nicht SVG-Transformationen; wir müssen nun beispielsweise transform-origin separat setzen