Heute tauchen wir in die Welt von CSS und HTML ein und lernen, wie du diese beiden Sprachen miteinander verknüpfst, um atemberaubende Designs zu erstellen.

So fügst du CSS in HTML ein: Die ultimative Anleitung mit Beispielen!

Was ist CSS?

CSS (Cascading Style Sheets) ist wie der Kleiderschrank deiner Webseite. Mit CSS bestimmst du das Aussehen deiner HTML-Elemente, wie Schriftarten, Farben, Ränder und vieles mehr. So erweckst du deine Webseite zum Leben und gestaltest sie ganz nach deinem Geschmack.

Wie füge ich CSS in HTML ein?

Es gibt zwei gängige Methoden, um CSS in HTML zu integrieren.

So geht’s:

  1. Füge einen <style>-Tag in den <head>-Bereich deiner HTML-Datei ein.
  2. Schreibe deine CSS-Regeln innerhalb des <style>-Tags.
  3. Schließe den <style>-Tag.

Beispiel:

HTML
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein erstes CSS-Meisterwerk</title>
  <style>
    h1 {
      color: red;
      font-size: 30px;
      text-align: center;
    }
    p {
      font-family: Arial, sans-serif;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Willkommen auf meiner Webseite!</h1>
  <p>Dies ist ein Absatz mit schöner Schriftart und Zeilenabstand.</p>
</body>
</html>

Externe Stylesheets:

Diese Methode empfiehlt sich, wenn du deine CSS-Regeln für mehrere HTML-Dateien verwenden möchtest. So schaffst du mehr Ordnung und Übersichtlichkeit.

So geht’s:

  1. Erstelle eine neue Datei mit der Endung .css (z. B. style.css).
  2. Schreibe deine CSS-Regeln in die .css-Datei.
  3. Füge ein <link>-Tag in den <head>-Bereich deiner HTML-Datei ein.
  4. Verweise im <link>-Tag auf deine .css-Datei.

Beispiel:

style.css:

CSS
h1 {
  color: blue;
  font-size: 40px;
  text-align: left;
}
p {
  font-family: Verdana, sans-serif;
  line-height: 1.8;
}

index.html:

CSS
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Mein zweites CSS-Meisterwerk</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Dieser Absatz sieht dank externem CSS fantastisch aus!</p>
</body>
</html>

Tipp: Du kannst im <head>-Bereich deiner HTML-Datei mehrere <link>-Tags verwenden, um verschiedene Stylesheets einzubinden.

Jetzt bist du bereit zum CSS-Zaubern! ✨

Experimentiere mit verschiedenen Farben, Schriftarten und Layouts und gestalte deine Webseiten nach deinen Wünschen.

Weitere Ressourcen:

Ähnliche Beiträge

css in html html

Über mich