CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die zur Beschreibung der Darstellung und Formatierung eines in HTML oder XML geschriebenen Dokuments verwendet wird. Sie ermöglicht es Entwicklern, das visuelle Design und Layout einer Webseite von ihrer Struktur und ihrem Inhalt zu trennen.

Durch die Trennung des visuellen Designs (CSS) von der Struktur und dem Inhalt (HTML) können die Benutzer einfach die CSS-Datei ändern, um ein völlig anderes Design zu erhalten.

Die Website CSS Zen Garden veranschaulicht dies. Die Seite listet Variationen ihres Designs auf. Das einzige, was diese visuelle Veränderung bewirkt, ist die Verwendung einer anderen CSS-Datei.

Die meisten Websites verwenden CSS. Im Kopfbereich des HTML-Code einer Seite befindet sich eine URL, die auf eine oder mehrere CSS-Dateien verweist.

CSS funktioniert, indem Stilregeln mit bestimmten HTML-Elementen oder Gruppen von Elementen verknüpft werden, die Aspekte wie Farben, Schriftarten, Abstände, Positionierung und vieles mehr steuern.

Beispiele für die Verwendung von CSS:

Textgestaltung:

h1 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

Diese CSS-Regel legt die Farbe, die Schriftgröße und die Schriftstärke für alle Elemente auf der Seite fest.

Layout und Positionierung:

.container {
  width: 960px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

Diese CSS-Regel legt die Breite eines Elements mit der Klasse "container" fest, zentriert es horizontal auf der Seite und verwendet Flexbox, um seine untergeordneten Elemente gleichmäßig zu verteilen.

Reaktionsfähiges Design:

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Diese CSS-Medienabfrage wendet Stile auf Elemente mit der Klasse "Spalte" an, wenn die Bildschirmbreite 600 Pixel oder weniger beträgt, wodurch das Layout auf unterschiedliche Bildschirmgrößen reagiert.

Medienabfragen ermöglichen es, dass Websites sowohl auf großen Monitoren als auch auf Tablets und Mobiltelefonen gut aussehen.

Spezialeffekte: Animation und Übergänge:

.button {
  background-color: #007bff;
  color: #fff;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Diese CSS-Regel legt die Hintergrundfarbe und die Textfarbe für Elemente mit der Klasse "Button" fest und fügt einen sanften Übergangseffekt hinzu, wenn sich die Hintergrundfarbe beim Verweilen ändert.

Dies sind nur einige Beispiele dafür, wie CSS zur Gestaltung und Formatierung von Webseiten eingesetzt wird.

CSS bietet eine breite Palette von Eigenschaften und Selektoren, die es Entwicklern ermöglichen, visuell ansprechende und reaktionsfähige Designs zu erstellen, die das Benutzererlebnis verbessern und Websites attraktiver machen.