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 Struktur und Inhalt (HTML) können Benutzer einfach die CSS-Datei ändern, um ein völlig anderes Design zu erhalten.

Die Website CSS Zen Garden demonstriert dies. Die Seite listet Variationen ihres Designs auf. Das Einzige, was diese visuelle Änderung bewirkt, ist die Verwendung einer anderen CSS-Datei.

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

CSS funktioniert, indem Stilregeln mit bestimmten HTML-Elementen oder Elementgruppen verknüpft werden, um Aspekte wie Farben, Schriftarten, Abstände, Positionierung und mehr zu steuern.

Beispiele für die Verwendung von CSS:

Textgestaltung:

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

Diese CSS-Regel legt die Farbe, Schriftgröße und 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 Kindelemente gleichmäßig zu verteilen.

Responsives Design:

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

Diese CSS-Media-Query wendet Stile auf Elemente mit der Klasse „column“ an, wenn die Bildschirmbreite 600 Pixel oder weniger beträgt, wodurch das Layout an verschiedene Bildschirmgrößen angepasst wird.

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

Spezialeffekte: Animationen 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 Textfarbe für Elemente mit der Klasse „button“ fest und fügt einen sanften Übergangseffekt hinzu, wenn sich die Hintergrundfarbe beim Überfahren mit der Maus ändert.

Dies sind nur einige Beispiele dafür, wie CSS zum Stylen und Formatieren von Webseiten verwendet wird.

CSS bietet eine breite Palette von Eigenschaften und Selektoren, die es Entwicklern ermöglichen, visuell ansprechende und responsive Designs zu erstellen, die Benutzererfahrung zu verbessern und Websites ansprechender zu gestalten.