CSS Mega-Crashkurs

1. Was ist CSS?

Eine CSS-Regel

p {
  color: blue;
}

p ist der Selektor. color ist die Eigenschaft. blue ist der Wert.

selektor {
```

eigenschaft: wert;
}

2. Selektoren

Ein Selektor bestimmt, auf welche HTML-Elemente CSS angewendet wird.

Element-Selektor

p {
  color: red;
}

Dadurch werden alle Absätze rot.

Klassen-Selektor

.box {
  background: blue;
}

Ein Punkt vor dem Namen bedeutet Klasse.

ID-Selektor

#header {
  background: black;
}

Eine Raute steht für eine ID.

3. Farben

CSS kann Farben auf verschiedene Arten darstellen.

Farbnamen

color: red;
background: blue;

HEX-Farben

color: #ff0000;
background: #000000;

RGB

color: rgb(255, 0, 0);

RGBA

background: rgba(0, 0, 0, 0.5);

Der vierte Wert bestimmt die Transparenz. 0 bedeutet vollständig transparent, 1 vollständig sichtbar.

4. Das CSS Box-Modell

Jedes HTML-Element kann man sich grundsätzlich wie eine Box vorstellen.

margin
  ↓
border
  ↓
padding
  ↓
content

Padding

padding: 20px;

Padding ist der Abstand zwischen Inhalt und Rahmen.

Margin

margin: 20px;

Margin ist der Abstand außerhalb eines Elements.

Border

border: 2px solid black;

Damit bekommt ein Element einen Rahmen.

5. Text gestalten

Schriftgröße

font-size: 24px;

Schriftart

font-family: Arial, sans-serif;

Fett

font-weight: bold;

Textausrichtung

text-align: center;

Zeilenhöhe

line-height: 1.6;

Textdekoration

text-decoration: underline;

Abstände zwischen Buchstaben

letter-spacing: 2px;

6. Display

display bestimmt, wie sich ein Element im Layout verhält.

block

display: block;

Ein Block-Element nimmt normalerweise die gesamte verfügbare Breite ein.

inline

display: inline;

Ein Inline-Element bleibt innerhalb des normalen Textflusses.

none

display: none;

7. Flexbox

Flexbox ist eines der wichtigsten CSS-Systeme für moderne Layouts.

.container {
  display: flex;
}

Abstand

gap: 20px;

Horizontale Ausrichtung

justify-content: center;

Mögliche Werte:

• flex-start
• center
• flex-end
• space-between
• space-around
• space-evenly

Vertikale Ausrichtung

align-items: center;

Zeilenumbruch

flex-wrap: wrap;

8. CSS Grid

Grid eignet sich besonders für komplexere zweidimensionale Layouts.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Was bedeutet 1fr?

fr bedeutet „fraction“. Es beschreibt einen Anteil des verfügbaren Platzes.

grid-template-columns:
  1fr 1fr 1fr;

Dadurch entstehen drei gleich große Spalten.

9. Positionierung

Mit position kann man Elemente gezielt positionieren.

relative

position: relative;

absolute

position: absolute;
right: 20px;
bottom: 20px;

fixed

position: fixed;

Das Element bleibt an einer festen Stelle des Browserfensters.

sticky

position: sticky;
top: 0;

Das Element verhält sich zunächst normal und bleibt beim Scrollen an einer bestimmten Position hängen.

10. Hover-Effekte

Mit :hover kann man festlegen, was passiert, wenn die Maus über ein Element bewegt wird.

.box:hover {
  background: blue;
}

Transition

transition: 0.3s;

Ohne Transition springt eine Änderung sofort um. Mit Transition wird sie animiert.

11. Transform

Mit transform kann man Elemente drehen, vergrößern, verkleinern oder verschieben.

transform: rotate(20deg);

transform: scale(1.2);

transform: translateY(-15px);

12. CSS Animationen

CSS kann Elemente automatisch animieren.

Keyframes

@keyframes schweben {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0);
  }

}

Animation verwenden

animation:
  schweben 2s infinite ease-in-out;

13. Transparenz

Mit opacity kann man ein Element transparent machen.

opacity: 0.5;

14. Schatten

Mit box-shadow können Boxen Schatten bekommen.

box-shadow:
  0 10px 30px rgba(0,0,0,0.15);

Bei einem Schatten sind besonders diese Werte wichtig:

• horizontaler Versatz
• vertikaler Versatz
• Unschärfe
• Farbe

15. Border Radius

Mit border-radius werden Ecken abgerundet.

border-radius: 20px;

Ein Kreis entsteht beispielsweise durch:

border-radius: 50%;

16. Einheiten

CSS besitzt verschiedene Einheiten.

px

font-size: 20px;

Pixel sind eine feste Einheit.

%

width: 50%;

Prozent beziehen sich häufig auf die Größe des Elternelements.

rem

font-size: 1.5rem;

rem orientiert sich an der Schriftgröße des Root-Elements.

vh und vw

height: 100vh;
width: 100vw;

vh steht für Viewport Height, vw für Viewport Width.

17. Responsive Design

Eine Webseite sollte auf Computer, Tablet und Smartphone funktionieren.

Dafür verwendet man Media Queries.

@media (max-width: 700px) {

  .grid {
    grid-template-columns: 1fr;
  }

}

18. CSS-Variablen

CSS kann Variablen verwenden.

:root {
  --hauptfarbe: #2563eb;
  --radius: 15px;
}

.button {
  background: var(--hauptfarbe);
  border-radius: var(--radius);
}

Dadurch kann man Farben und andere Werte zentral verändern.

19. Verläufe

Linearer Verlauf

background:
  linear-gradient(
    90deg,
    blue,
    purple
  );

Radialer Verlauf

background:
  radial-gradient(
    circle,
    white,
    blue
  );

20. Buttons richtig gestalten

.button {

  background: #2563eb;
  color: white;

  padding: 12px 20px;

  border: none;
  border-radius: 10px;

  cursor: pointer;

  transition: 0.2s;

}

.button:hover {

  transform: translateY(-2px);

}

21. Mini-Projekt: Moderne Webseite

Jetzt kombinieren wir mehrere CSS-Techniken.

.website {

  max-width: 1000px;
  margin: auto;

  padding: 30px;

}

.cards {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 20px;

}

.card {

  background: white;

  padding: 25px;

  border-radius: 20px;

  box-shadow:
    0 10px 30px
    rgba(0,0,0,0.1);

  transition:
    transform 0.2s;

}

.card:hover {

  transform:
    translateY(-5px);

}

22. Die wichtigsten CSS-Eigenschaften

23. Typische Anfängerfehler

color: red
```

background: blue;

color: red;
```

background: blue;

.box {
```

color: red;

.button {
```

color: red;
}

24. CSS lernen – die wichtigste Denkweise

25. Der wichtigste CSS-Spickzettel

/* Farbe */
color: red;

/* Hintergrund */
background: blue;

/* Schrift */
font-size: 20px;
font-family: Arial;
font-weight: bold;

/* Abstände */
margin: 20px;
padding: 20px;

/* Größe */
width: 300px;
height: 200px;

/* Rahmen */
border: 1px solid black;
border-radius: 15px;

/* Schatten */
box-shadow: 0 10px 30px rgba(0,0,0,.15);

/* Flexbox */
display: flex;
gap: 20px;
justify-content: center;
align-items: center;

/* Grid */
display: grid;
grid-template-columns: repeat(3, 1fr);

/* Position */
position: relative;
position: absolute;

/* Animation */
transition: .3s;
transform: scale(1.1);

/* Transparenz */
opacity: .5;

/* Responsive */
@media (max-width: 700px) {
  ...
}