Modul 5: Erste CSS-Styles

lock
Bevorstehend

Lerne, wie du mit CSS Farben, Schriften und Grössen anpasst

Ziele dieses Moduls
  • Sie koennen CSS-Selektoren verwenden und Farben, Schriften sowie Grössen anpassen
    Anwenden

CSS (Cascading Style Sheets) ist die Sprache, mit der du das Aussehen deiner Webseite gestaltest. HTML gibt die Struktur vor, CSS macht sie schön!

CSS einbinden

Es gibt drei Möglichkeiten, CSS einzubinden:

  • Inline: Direkt im HTML-Tag (nicht empfohlen!)
  • Internal: Im <style>-Tag im <head>
  • External: In separater .css-Datei (beste Methode!)

Wir verwenden die externe Methode: Erstelle eine Datei style.css und verlinke sie im <head> deines HTML.

<!-- In deiner HTML-Datei (im <head>) -->
<link rel="stylesheet" href="style.css">

/* In deiner style.css */
h1 {
    color: #2c3e50;
    font-size: 36px;
    font-family: Arial, sans-serif;
}

p {
    color: #555;
    font-size: 18px;
    line-height: 1.6;
}

a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

CSS-Selektoren verstehen

Selektoren bestimmen, welche HTML-Elemente gestylt werden:

  • Element-Selektor: h1 { ... } - Alle <h1>-Elemente
  • Klassen-Selektor: .button { ... } - Alle Elemente mit class="button"
  • ID-Selektor: #header { ... } - Das Element mit id="header"
  • Pseudo-Klassen: a:hover { ... } - Links beim Drüberfahren

Note

Farben in CSS

Es gibt mehrere Wege, Farben anzugeben:

  • Farbnamen: red, blue, lightgreen
  • Hex-Codes: #ff0000 (Rot), #3498db (Blau)
  • RGB: rgb(255, 0, 0) (Rot)
  • RGBA: rgba(255, 0, 0, 0.5) (Rot mit 50% Transparenz)

Tipp: Verwende Tools wie coolors.co für Farbpaletten!

Challenge

Übung: Style deine Visitenkarte

Nimm deine Visitenkarte aus Modul 1 und style sie mit CSS:

  • Erstelle eine style.css und verlinke sie
  • Wähle eine Haupt- und eine Akzentfarbe für deine Seite
  • Style die <h1> mit deiner Hauptfarbe und einer passenden Schriftart
  • Mache alle <p>-Texte grösser und luftiger (z.B. line-height: 1.6)
  • Style die Links: normale Farbe und eine andere beim Hover

Inspiration: Schau dir moderne Visitenkarten-Designs an (z.B. bei Dribbble oder Behance) und versuche, einen ähnlichen Stil umzusetzen.