CSS

von | 21. Oktober 2024

CSS ist eine Sprache, die das Aussehen von Webseiten bestimmt. Mit CSS legst du fest, wie Texte, Bilder und Layouts auf einer Seite dargestellt werden.

Was ist CSS?

CSS steht für Cascading Style Sheets und ist eine Sprache, die verwendet wird, um das Design und das Layout einer Webseite festzulegen. Während HTML dafür sorgt, dass die Inhalte einer Webseite – wie Texte, Bilder oder Links – dargestellt werden, ist CSS dafür verantwortlich, wie diese Inhalte aussehen. Mit CSS kannst du die Farben, Schriftarten, Abstände und die Position von Elementen auf der Seite bestimmen.

Wie funktioniert CSS?

CSS arbeitet mit sogenannten Stilregeln. Diese Regeln sagen dem Browser, wie bestimmte HTML-Elemente (z. B. Überschriften, Absätze oder Bilder) dargestellt werden sollen. Mit CSS kannst du genau festlegen, ob eine Überschrift groß oder klein, rot oder blau, fett oder kursiv ist. Außerdem hilft CSS dabei, das Layout einer Webseite zu gestalten – also wie die verschiedenen Inhalte auf der Seite angeordnet werden.

Beispiele für CSS-Regeln:

  • Farbe: Mit der CSS-Regel color legst du fest, welche Farbe ein Text haben soll, z. B. color: blue; für blauen Text.
  • Schriftgröße: Die Regel font-size bestimmt, wie groß der Text dargestellt wird, z. B. font-size: 16px; für eine Schriftgröße von 16 Pixeln.
  • Abstand: Mit margin und padding kannst du Abstände zwischen oder um Elemente herum definieren, z. B. margin: 10px; für einen Abstand von 10 Pixeln um ein Element herum.

Warum ist CSS wichtig?

CSS macht das Internet schön und benutzerfreundlich. Ohne CSS würden alle Webseiten gleich aussehen – einfach schwarzer Text auf weißem Hintergrund. CSS sorgt dafür, dass Websites visuell ansprechend sind und gut strukturiert wirken. Es hilft dabei, das Benutzererlebnis zu verbessern, indem es Seiten klar und leserfreundlich gestaltet.

Vorteile von CSS:

  • Trennung von Inhalt und Design: CSS trennt den visuellen Stil vom eigentlichen Inhalt der Webseite (HTML), was es leichter macht, das Design zu ändern, ohne den Inhalt zu beeinflussen.
  • Wiederverwendbarkeit: Einmal definierte CSS-Regeln können auf mehrere Seiten einer Website angewendet werden, was die Pflege und Aktualisierung erleichtert.
  • Responsives Design: Mit CSS kannst du Webseiten so gestalten, dass sie sich automatisch an verschiedene Bildschirmgrößen anpassen – egal ob auf einem Computer, Tablet oder Smartphone.

Beispiel für CSS in Aktion:

Stell dir vor, du hast eine Überschrift auf deiner Webseite. Ohne CSS wäre sie einfach nur Text. Mit CSS kannst du sie groß, fett und farbig machen:

h1 {
  color: red;
  font-size: 32px;
  text-align: center;
}

Dieser CSS-Code macht die Überschrift rot, 32 Pixel groß und zentriert sie auf der Seite.

CSS sorgt dafür, dass Webseiten nicht nur funktionieren, sondern auch gut aussehen. Es ist das Werkzeug, mit dem du das Aussehen, die Farben und das Layout deiner Seite bestimmen kannst. Mit CSS wird deine Webseite ansprechend und professionell, sodass sie für die Nutzer leicht zu lesen und zu navigieren ist.