Cascading Style Sheets

Diese Begriffserklärung teilen
« Zurück zum Glossar Index

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um das Design und Layout von HTML-Dokumenten zu gestalten. CSS trennt die Präsentation (Layout, Farben, Schriftarten usw.) vom Inhalt (HTML), wodurch Websites einfacher zu gestalten und zu verwalten sind.

Wichtige Merkmale von CSS

  1. Trennung von Inhalt und Design:
  • HTML beschreibt die Struktur einer Webseite, während CSS für die visuelle Darstellung zuständig ist.
  1. Kaskadierung (Cascading):
  • Die „Kaskade“ beschreibt, wie Regeln angewendet werden, wenn mehrere CSS-Styles auf ein Element zutreffen. CSS nutzt eine Prioritätsreihenfolge:
    • Inline-Styles (im HTML-Tag)
    • Interne Stylesheets (im <style>-Tag im <head>)
    • Externe Stylesheets (verlinkt über <link>)
  1. Wiederverwendbarkeit:
  • Ein einzelnes CSS-Dokument kann für mehrere HTML-Dateien verwendet werden, was Zeit spart und die Konsistenz der Website gewährleistet.
  1. Flexibilität:
  • CSS bietet viele Optionen zur Gestaltung, wie Farben, Schriftarten, Layouts, Animationen und Medienabfragen.

Grundlegende Syntax

Ein CSS-Stil besteht aus einem Selektor, gefolgt von einem Block mit Eigenschaften und Werten:

Selektor {
  Eigenschaft: Wert;
}

Beispiel:

h1 {
  color: blue;       /* Die Schriftfarbe wird blau */
  font-size: 24px;   /* Schriftgröße auf 24 Pixel setzen */
}

Arten von CSS

  1. Inline-CSS:
  • Wird direkt in einem HTML-Tag definiert.
   <p style="color: red;">Dieser Text ist rot.</p>
  1. Internes CSS:
  • Wird im <style>-Tag innerhalb des <head> einer HTML-Datei geschrieben.
   <style>
     body {
       background-color: lightgrey;
     }
   </style>
  1. Externes CSS:
  • CSS-Regeln werden in einer separaten Datei (z. B. style.css) gespeichert und über ein <link>-Tag eingebunden.
   <link rel="stylesheet" href="style.css">

CSS-Selektoren

Selektoren identifizieren, welche HTML-Elemente gestaltet werden sollen:

  1. Element-Selektor: Stile für ein spezifisches HTML-Tag (h1, p, div).
   p {
     color: green;
   }
  1. ID-Selektor: Stile für ein Element mit einer eindeutigen ID (# vor der ID).
   #header {
     background-color: blue;
   }
  1. Klassen-Selektor: Stile für Elemente mit einer bestimmten Klasse (. vor dem Klassennamen).
   .button {
     font-weight: bold;
   }
  1. Universal-Selektor: Stile für alle Elemente (*).
   * {
     margin: 0;
     padding: 0;
   }
  1. Attribut-Selektor: Stile für Elemente mit bestimmten Attributen.
   input[type="text"] {
     border: 1px solid black;
   }

Wichtige CSS-Eigenschaften

  1. Text und Schriftarten:
  • color, font-family, font-size, text-align, line-height
  1. Farben und Hintergründe:
  • background-color, background-image, opacity
  1. Abstände:
  • margin (Außenabstand), padding (Innenabstand)
  1. Layout:
  1. Rahmen:
  • border, border-radius
  1. Animationen:
  • transition, animation

Responsive Design mit CSS

Mit Medienabfragen (@media) können Layouts angepasst werden, um auf verschiedenen Geräten (z. B. Smartphones, Tablets, Desktops) gut auszusehen:

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

Vorteile von CSS

  1. Trennung von Design und Inhalt: Erleichtert die Wartung und Verbesserung von Websites.
  2. Flexibilität und Kontrolle: Präzise Anpassungen für jedes Element.
  3. Wiederverwendbarkeit: Ein Stylesheet kann auf mehreren Seiten angewendet werden.
  4. Verbesserte Ladezeit: Externe Stylesheets können vom Browser zwischengespeichert werden.

Zusammenfassung

CSS ist ein essenzielles Werkzeug zur Gestaltung von Websites. Es bietet mächtige Funktionen, um Layouts, Farben und Schriftarten effizient zu definieren, und ist unerlässlich für moderne, benutzerfreundliche und responsive Webdesigns.

Wir sind darum bemüht die angebotenen Informationen aktuell zu halten und diese in knapper und verständlicher Form darzustellen. Fehler und Irrtümer bleiben aber menschlich und darum vorbehalten. Bei Unstimmigkeiten zu einem Begriff, bitten wir darum dies per E-Mail mit uns zu diskutieren. Bitte nutze hierfür unsere E-Mail: info@jupiterexpress.de« Zurück zum Glossar Index