CSS 101 — Tutorial — MyKeyZ Creative Center

Kapitel 01

CSS Variables

Einmal deklarieren — überall verwenden. Der Profi-Trick von Anfang an!

BauplanEinmal festlegen, überall nutzen

Eine Variable in :root ändern, und alle Stellen, die sie nutzen, ändern sich mit.

:root { --primary: … }einmal deklarieren

var()

überall verwenden

Knopfvar(--primary)

Überschriftvar(--primary)

Linkvar(--primary)

:root
--name
var()

CSS Variables (auch Custom Properties genannt) sind wie Variablen in einer Programmiersprache. Du definierst einen Wert einmal — und verwendest ihn überall. Ändert sich der Wert, ändert sich alles auf einmal!

Warum gleich von Anfang an?
Weil CSS Variables deine Arbeit von Anfang an sauber halten. Kein Copy-Paste von Farbcodes mehr. Kein Suchen-und-Ersetzen wenn du eine Farbe änderst. Einmal ändern — überall geändert. Das ist Profi-Workflow!

CSS · Variables deklarieren in :root

/* :root = das oberste Element (html) */
:root {
  /* Farben */
  --primary:   #00b4d8;   /* Cyan – Hauptfarbe  */
  --secondary: #0077b6;   /* Dunkelblau         */
  --accent:    #f72585;   /* Pink – Akzent      */
  --dark:      #03071e;   /* Fast Schwarz       */
  --text:      #e0e0e0;   /* Heller Text        */

  /* Schriften */
  --font-display: 'Playfair Display', serif;
  --font-body:    'DM Sans', sans-serif;

  /* Abstände */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;

  /* Schatten */
  --shadow: 0 4px 20px rgba(0, 180, 216, 0.2);

  /* Übergänge */
  --transition: all 0.3s ease;
}

CSS · Variables verwenden mit var()

body {
  background: var(--dark);
  color:      var(--text);
  font-family: var(--font-body);
}

h1 {
  color: var(--primary);
  margin-bottom: var(--spacing-md);
}

.btn {
  background: var(--primary);
  transition: var(--transition);
  box-shadow: var(--shadow);
}

Konvention: CSS Variables beginnen immer mit -- (zwei Bindestriche). Das ist Pflicht — nicht optional!

Aufgabe — style.css starten

Neuen Ordner css/ in MyFirst-Site erstellen
Datei css/style.css erstellen
CSS Variables für Farben, Schriften und Abstände definieren
Eigene Farben wählen — mach es zu deinem Projekt!

Kapitel 02

CSS Einbinden

Drei Wege CSS in deine HTML-Seite zu bringen — plus der Reset!

BauplanDrei Wege zum Stil

Eine eigene .css-Datei gilt für alle Seiten, die sie einbinden.

so geht es

Inlinenur dieses eine Element, für Tests

Internal<style>, nur diese Seite

Externalstyle.css, der richtige Weg

<link>

eine Datei für alle

index.html

about.html

contact.html

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

❌ Inline CSS

Direkt im HTML-Tag
Nur für dieses eine Element
Schwer zu warten
Für schnelle Tests ok

⚠️ Internal CSS

Im <style> Tag im <head>
Nur für diese eine Seite
Für einzelne Seiten ok
Nicht wiederverwendbar

✅ External CSS — der richtige Weg!

Separate .css Datei
Gilt für alle Seiten die sie einbinden
Einmal ändern → überall geändert
Browser cached sie → schneller!

HTML · Alle drei Wege im Vergleich

<!-- 1. Inline CSS – direkt im Tag -->
<p style="color: red; font-size: 1.2rem;">Text</p>

<!-- 2. Internal CSS – im <head> -->
<style>
  p { color: blue; }
</style>

<!-- 3. External CSS – ✅ DER RICHTIGE WEG -->
<link rel="stylesheet" href="css/style.css">

Der CSS Reset

Jeder Browser hat eigene Standard-Stile — Chrome, Firefox, Safari zeigen manche Dinge leicht unterschiedlich. Der Reset macht tabula rasa:

CSS · Reset + Basis (immer ganz oben in style.css!)

/* ===== RESET ===== */
* {
  margin:  0;
  padding: 0;
  box-sizing: border-box; /* Profi-Trick! Abstände INNEN rechnen */
}

html {
  scroll-behavior: smooth; /* Sanftes Scrollen */
}

body {
  font-family: var(--font-body);
  background:  var(--dark);
  color:       var(--text);
  line-height: 1.6;
}

box-sizing: border-box erklärt:
Ohne: width=200px + padding=20px = 240px breit (Browser addiert drauf)
Mit box-sizing: border-box: width=200px + padding=20px = immer noch 200px! ✅
Das macht Layouts viel berechenbarer — deshalb immer verwenden!

Kapitel 03

Selektoren

Du bestimmst genau welches Element gestylt wird — präzise wie ein Chirurg!

BauplanWen trifft die Regel?

Der Selektor zielt auf Elemente: alle gleichen Tags, eine Klasse oder genau ein Element.

Selektorwählt aus

trifft

p { }alle <p>

.btn { }alle mit class="btn"

#hero { }das eine mit id="hero"

p .klasse #id
.card p
:hover ::after

Element

p { }

Alle <p> Tags auf der Seite

Klasse

.btn { }

Alle Elemente mit class="btn"

ID

#hero { }

Das eine Element mit id="hero"

CSS · Selektoren im Überblick

/* Element-Selektor — alle h1 */
h1 { color: white; }

/* Klassen-Selektor — alle mit class="card" */
.card { background: #1a1a2e; }

/* ID-Selektor — das eine Element mit id="hero" */
#hero { min-height: 100vh; }

/* Kombination — p innerhalb von .card */
.card p { font-size: 0.9rem; }

/* Pseudo-Klasse — beim Hovern */
.btn:hover { background: var(--accent); }

/* Pseudo-Element — Linie nach Element */
.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--primary);
}

Klasse vs ID — wann was?
Klasse (.btn): Kann mehrfach verwendet werden. Für alles was sich wiederholt — Buttons, Cards, etc.
ID (#hero): Nur einmal pro Seite. Für einzigartige Elemente — Hero, Header, Footer.
Tipp: Im Zweifelsfall immer Klassen verwenden — flexibler!

⚠️ Spezifität: ID schlägt Klasse schlägt Element. Wenn du ID-Stile nicht überschreiben kannst — das ist Spezifität! Deshalb lieber Klassen statt IDs für Styling.

Kapitel 04

Farben + Gradienten

HEX, RGB, HSL — und Gradienten die begeistern!

BauplanFarben angeben

Dieselbe Farbe lässt sich auf mehrere Arten schreiben. Gradienten mischen zwei oder mehr.

Farbeeine von vier Schreibweisen

Schreibweisen

HEX#00b4d8

RGB und RGBARot, Grün, Blau, Transparenz

HSLFarbton, Sättigung, Helligkeit

Gradientlinear-gradient, radial-gradient

color background
rgba()
linear-gradient()

Drei Wege Farben anzugeben:

#00b4d8 → HEX — am häufigsten. 6 Zeichen (RR GG BB in Hex)

rgb(0, 180, 216) → RGB — Rot, Grün, Blau je 0-255

rgba(0, 180, 216, 0.5) → RGBA — mit Transparenz (0=unsichtbar, 1=voll)

hsl(195, 100%, 42%) → HSL — Farbton, Sättigung, Helligkeit

Cyan#00b4d8

Pink#f72585

Grün#2ecc71

Orange#f39c12

RGBA0.3

Gradient135deg

CSS · Gradienten

/* Linear Gradient — von A nach B */
.hero {
  background: linear-gradient(135deg, #00b4d8, #f72585);
}

/* Radial Gradient — vom Zentrum nach aussen */
.bg-glow {
  background: radial-gradient(ellipse at center, rgba(0,180,216,0.2), transparent);
}

/* Gradient Text — der Wow-Effekt! */
.gradient-text {
  background: linear-gradient(135deg, #00b4d8, #f72585);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mehrere Gradienten kombinieren */
.complex-bg {
  background:
    linear-gradient(rgba(3,7,30,0.9), rgba(3,7,30,0.9)),
    radial-gradient(ellipse at 20% 50%, rgba(0,180,216,0.15), transparent);
}

Profi-Tipp: coolors.co und paletton.com sind kostenlose Werkzeuge um perfekte Farbpaletten zu erstellen!

Kapitel 05

Text + Google Fonts

Schriften laden, Grössen, Gewichte, Abstände — Typographie wie ein Profi!

BauplanVom Schriftladen zum Lesen

Schrift einbinden, zuweisen und so einstellen, dass man gern liest.

Google Fonts<link> im <head>

font-familySchrift zuweisen

Grösse und Gewichtfont-size in rem, font-weight

line-height1.6 liest sich angenehm

Eine Schrift von Google Fonts lädt der Browser von einem fremden Server. Ohne Internet greift die Ersatzschrift.

font-family font-size font-weight
line-height letter-spacing
text-align text-transform

HTML · Google Fonts einbinden (im <head>)

<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">

Text-Eigenschaften die du brauchst:

font-family — Schriftart
font-size — Grösse (rem empfohlen!)
font-weight — Stärke: 300 (leicht), 400 (normal), 700 (fett), 900 (schwarz)
line-height — Zeilenabstand (1.6 ist angenehm zum Lesen)
letter-spacing — Buchstabenabstand
text-transform — uppercase, lowercase, capitalize
text-align — left, center, right
text-decoration — none (Links ohne Unterstrich!)

CSS · Typographie Beispiele

h1 {
  font-family:    var(--font-display);
  font-size:      clamp(2.5rem, 6vw, 5rem); /* Responsive! */
  font-weight:    900;
  line-height:    1.1;
  letter-spacing: -0.02em;
}

p {
  font-size:   1rem;
  line-height: 1.6;
  font-weight: 300;
}

.nav-link {
  font-size:      0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

clamp() — responsive Schriftgrössen:
font-size: clamp(2.5rem, 6vw, 5rem)
= Minimum 2.5rem, bevorzugt 6% der Viewport-Breite, Maximum 5rem
→ Schrift wächst und schrumpft automatisch mit dem Bildschirm!

Kapitel 06

Box Model

Das Herzstück von CSS — alles ist eine Box! Margin, Padding, Border verstehen.

BauplanAlles ist eine Box

Von innen nach aussen: Inhalt, Padding, Border, Margin.

ContentText, Bild

PaddingInnenabstand

BorderRahmen

MarginAussenabstand

padding
border
margin
box-sizing: border-box

Jedes HTML-Element ist eine rechteckige Box. Das Box Model beschreibt wie diese Box aufgebaut ist:

Margin — Aussenabstand

Border — Rahmen

Padding — Innenabstand

Content — Inhalt

Text, Bild, etc.

CSS · Box Model Eigenschaften

.card {
  /* Padding — Innenabstand (alle Seiten) */
  padding: 2rem;

  /* Padding — einzelne Seiten */
  padding-top:    1rem;
  padding-bottom: 1rem;
  padding-left:   1.5rem;
  padding-right:  1.5rem;

  /* Kurzform: oben rechts unten links */
  padding: 1rem 1.5rem; /* oben/unten links/rechts */

  /* Margin — Aussenabstand */
  margin-bottom: 2rem;
  margin: 0 auto; /* horizontal zentrieren! */

  /* Border — Rahmen */
  border: 1px solid rgba(0, 180, 216, 0.3);
  border-radius: 12px; /* runde Ecken */
  border-radius: 50%;  /* perfekter Kreis! */

  /* Breite + Höhe */
  width:     300px;
  max-width: 100%;   /* responsive! */
  min-height: 200px;

  /* Schatten */
  box-shadow: 0 4px 20px rgba(0, 180, 216, 0.2);
}

Kapitel 07

Flexbox + Grid

Modernes Layout ohne Kopfschmerzen — Spalten, Reihen, Zentrierung!

BauplanFlexbox oder Grid?

Eine Richtung: Flexbox. Zwei Richtungen: Grid.

Dein LayoutWie viele Richtungen?

Antwort

Eine: flexNavbar, Knöpfe, Zentrieren

Zwei: gridKarten in Spalten und Reihen

display: flex
justify-content align-items gap
display: grid
grid-template-columns

Flexbox — für eine Richtung

CSS · Flexbox Grundlagen

.navbar {
  display:         flex;
  justify-content: space-between; /* horizontal */
  align-items:     center;         /* vertikal  */
  gap:             1rem;           /* Abstand zwischen Kinder */
}

/* Zentrieren — der Klassiker! */
.hero {
  display:         flex;
  justify-content: center;
  align-items:     center;
  min-height:      100vh;
}

/* flex-wrap — Umbruch erlauben */
.btn-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       0.5rem;
}

Grid — für zwei Richtungen

CSS · Grid Grundlagen

/* Feste Spaltenanzahl */
.cards-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 gleiche Spalten */
  gap:                   1.5rem;
}

/* Auto-fill — so viele Spalten wie passen! */
.tools-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:                   1rem;
}

/* Element über mehrere Spalten */
.card-wide {
  grid-column: span 2; /* nimmt 2 Spalten */
}

Flexbox vs Grid:
Flexbox = eine Richtung (Reihe ODER Spalte). Ideal für Navbars, Button-Gruppen, einzelne Reihen.
Grid = zwei Richtungen (Reihen UND Spalten). Ideal für Card-Layouts, ganze Seiten-Layouts.

Kapitel 08

Responsive Design

Media Queries — deine Seite passt sich automatisch an Handy, Tablet und Desktop an!

BauplanMobile First

Zuerst das Handy, dann mit Media Queries für grössere Bildschirme erweitern.

BasisHandy, eine Spalte, keine Media Query

768px

Tabletzwei Spalten

1024px

Desktopnoch mehr Platz

@media (min-width: …)
meta viewport
Geräteansicht mit F12

Mobile First — der empfohlene Weg:

Zuerst das Handy-Layout designen (eine Spalte, gross, tappbar). Dann mit Media Queries für grössere Bildschirme erweitern. Das ist heute der Standard!

CSS · Media Queries

/* BASIS — Handy first (keine Media Query nötig!) */
.cards-grid {
  display:               grid;
  grid-template-columns: 1fr; /* eine Spalte auf Handy */
  gap:                   1rem;
}

/* TABLET — ab 768px */
@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr; /* zwei Spalten */
  }
  .nav-links {
    display: flex; /* Navbar zeigen */
  }
}

/* DESKTOP — ab 1024px */
@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: 1fr 1fr 1fr; /* drei Spalten */
  }
}

/* Häufige Breakpoints: */
/* 480px  → grosse Handys        */
/* 768px  → Tablets              */
/* 1024px → kleine Desktops      */
/* 1280px → normale Desktops     */

Tipp: F12 im Browser → Handy-Icon → Gerät wählen → deine Seite im Handy-Layout testen — ohne echtes Handy!

Kapitel 09

Animationen

Transitions, Keyframes, Hover Effekte — Bewegung die begeistert! Alles reines CSS.

BauplanVon A nach B

Transition: weicher Wechsel zwischen zwei Zuständen. Keyframes: ein ganzer Ablauf.

Zustand Anormal

transition

Zustand B:hover

Keyframesmehrere Schritte, auch ohne Hover

Mehr dazu im eigenen Tutorial CSS Animation 101.

transition
transform
@keyframes

Transitions — sanfte Übergänge

CSS · Transitions

.btn {
  background:  var(--primary);
  transition:  all 0.3s ease; /* was, dauer, timing */
}

.btn:hover {
  background:  var(--accent);
  transform:   translateY(-2px); /* nach oben schieben */
  box-shadow:  var(--shadow-hover);
}

/* Unterstrich-Animation beim Hover */
.nav-link { position: relative; }
.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -4px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--primary);
  transition: width 0.3s ease;
}
.nav-link:hover::after {
  width: 100%; /* Unterstrich fährt raus! */
}

Keyframes — eigene Animationen

CSS · @keyframes Animationen

/* Einblenden von unten */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pulsieren */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Drehen */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Blinken (Kundenwunsch erfüllt! 😄) */
@keyframes blink {
  0%, 49%  { color: red; }
  50%, 100%{ color: green; }
}

/* Animation verwenden */
.hero-content {
  animation: fadeInUp 1s ease 0.3s both;
  /* name  dauer timing delay fill */
}
.badge {
  animation: pulse 2s ease-in-out infinite;
}
.spinner {
  animation: spin 1s linear infinite;
}

/* Navbar von oben reinfahren */
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

animation Kurzform erklärt:
animation: fadeInUp 1s ease 0.3s both;
= Name | Dauer | Timing | Verzögerung | Fill-Mode
both = Animation hält den Endzustand, auch wenn sie noch nicht gestartet hat.

Kapitel 10

MyFirst Site stylen

Alles zusammen — deine MyFirst Site wird richtig schön!

BauplanEine Datei für die ganze Site

css/style.css sammelt alles, in dieser Reihenfolge.

Variablen:root

Reset* { box-sizing }

BausteineNavbar, Hero, Karten

ResponsiveMedia Queries

AnimationenHover und Keyframes

Jede Seite braucht den <link> zur style.css, sonst bleibt sie ungestylt.

css/style.css
auf jeder Seite verlinkt

Jetzt wendest du alles was du gelernt hast auf deine MyFirst Site an. Hier ist ein komplettes Beispiel für css/style.css:

CSS · style.css — Komplettbeispiel MyFirst Site

/* ===== VARIABLES ===== */
:root {
  --primary:   #00b4d8;
  --accent:    #f72585;
  --dark:      #03071e;
  --dark-2:    #1a1a2e;
  --text:      #e0e0e0;
  --white:     #ffffff;
  --gradient:  linear-gradient(135deg, #00b4d8, #f72585);
  --shadow:    0 4px 20px rgba(0,180,216,0.2);
  --transition:all 0.3s ease;
  --radius:    12px;
}

/* ===== RESET ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background:  var(--dark);
  color:       var(--text);
  line-height: 1.6;
}

/* ===== NAVBAR ===== */
nav {
  position:   fixed;
  top: 0; left: 0; width: 100%;
  z-index:    1000;
  background: rgba(3,7,30,0.95);
  padding:    1rem 2rem;
  display:    flex;
  justify-content: space-between;
  align-items:     center;
  border-bottom:   1px solid rgba(0,180,216,0.2);
  animation:       slideDown 0.6s ease;
}
nav a {
  color:           var(--text);
  text-decoration: none;
  transition:      var(--transition);
}
nav a:hover { color: var(--primary); }

/* ===== HERO ===== */
.hero {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  text-align:      center;
  padding:         4rem 2rem;
  background: linear-gradient(135deg, rgba(3,7,30,0.95), rgba(26,26,46,0.9));
}
.hero h1 {
  font-size:    clamp(2.5rem, 6vw, 5rem);
  font-weight:  900;
  color:        var(--white);
  margin-bottom:1rem;
  animation:    fadeInUp 1s ease both;
}

/* ===== CARDS ===== */
.cards-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 4rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.card {
  background:  var(--dark-2);
  border:      1px solid rgba(0,180,216,0.2);
  border-radius:var(--radius);
  padding:     2rem;
  transition:  var(--transition);
}
.card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow);
  border-color:var(--primary);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 768px) {
  .cards-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cards-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ===== ANIMATIONEN ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

CSS 101 — Abgeschlossen!

MyFirst Site sieht jetzt richtig professionell aus!

CSS Variables — Profi-Workflow von Anfang an
Externe CSS Datei — sauber getrennt von HTML
Selektoren — präzise wie ein Chirurg
Farben + Gradienten — visuell beeindruckend
Google Fonts — Typographie wie ein Designer
Box Model — das Fundament verstanden
Flexbox + Grid — modernes Layout
Responsive Design — läuft auf allen Geräten
Animationen — Bewegung die begeistert

Was kommt als nächstes?
JS 101 — deine Seite wird interaktiv! Buttons die wirklich etwas tun, dynamische Inhalte, und vieles mehr!

→ Zu JS 101