Tag 1: Einführung & Grundsyntax

Ziel

Verstehe, was CSS ist und wie man es verwendet, um HTML-Elemente zu gestalten.

Themen

Was ist CSS (Cascading Style Sheets)
Möglichkeiten, CSS einzubinden: Inline, Intern (<style>), Extern (.css)
Selektoren: Element, Klasse, ID

CSS Syntax

CSS-Regeln bestehen aus einem Selektor und einem Deklarationsblock:

selector {
  property: value;
  property: value;
}

Beispiele

Element-Selektor:

p {
  color: blue;
  font-size: 16px;
}

ID-Selektor:

#main-title {
  color: red;
}

Klassen-Selektor:

.button {
  background-color: green;
}

Möglichkeiten, CSS anzuwenden

Inline CSS: direkt im Element <p style="color: blue;">
Internes CSS: innerhalb von <style> im <head>
Externes CSS: eine separate .css-Datei einbinden mit <link rel="stylesheet" href="style.css">

Übung

Versuche Folgendes:

Gestalte Überschriften und Absätze mit verschiedenen Farben und Schriftarten.
Füge einer Schaltfläche eine Klasse hinzu und ändere ihre Hintergrundfarbe.

Beispiel HTML mit CSS

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>CSS Übung</title>
  <style>
    h1 {
      color: darkblue;
      font-family: Arial, sans-serif;
    }

    p {
      color: gray;
      font-size: 14px;
      font-family: 'Times New Roman', serif;
    }

    .button {
      background-color: green;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <h1 id="main-title">Willkommen zu CSS</h1>
  <p>Dies ist ein Absatz, der mit CSS gestaltet wurde.</p>
  <button class="button">Klick mich</button>

</body>
</html>