Startseite » Cascading Style Sheets

Cascading Style Sheets

CSS steht für „Cascading Style Sheets“ und wird verwendet, um das Aussehen von HTML-Elementen und Webseiten zu gestalten. Es ermöglicht es, das Design und Layout einer Webseite zu kontrollieren, indem es Farben, Schriftarten, Größen, Positionen, Hintergründe und andere visuelle Eigenschaften definiert.

Es ermöglicht es Entwicklern, die Darstellung einer Website von ihrem Inhalt zu trennen, was es einfacher macht, das Aussehen einer Website zu ändern oder anzupassen, ohne den Inhalt zu beeinträchtigen.

Hier sind einige Gründe, warum CSS wichtig ist:

Trennung von Inhalt und Layout: CSS ermöglicht es, das Design und die Formatierung von Webseiten vom eigentlichen Inhalt zu trennen, was die Wartung und Aktualisierung von Webseiten erleichtert.
Konsistenz: CSS ermöglicht es, dass alle Seiten einer Webseite ein einheitliches Aussehen und Layout haben, was zu einer besseren Benutzererfahrung führt.
Flexibilität: CSS ermöglicht es, dass das Layout einer Webseite responsiv ist und sich an verschiedene Bildschirmgrößen anpasst, was besonders wichtig für die mobile Nutzung ist.
Barrierefreiheit: CSS ermöglicht es, die Lesbarkeit und Zugänglichkeit von Webseiten für Menschen mit unterschiedlichen Behinderungen zu verbessern.

Insgesamt ist CSS ein unverzichtbares Werkzeug für die Gestaltung von modernen Webseiten und wird von Webentwicklern auf der ganzen Welt verwendet.

Die drei Arten von CSS

1) Inline-CSS:

Inline-CSS ist CSS-Code, der direkt in den HTML-Code eines Elements eingefügt wird. Dies ermöglicht es, das Styling eines einzelnen Elements zu kontrollieren, ohne dass es Auswirkungen auf andere Elemente hat. Inline-CSS wird jedoch selten verwendet, da es schwer zu warten und zu ändern ist.

Inline-CSS ist der schnelle Eingriff vor Ort im Text.

				
					<p style="color: red; font-size: 16px;">Dieser Text ist rot und hat eine Schriftgröße von 16 Pixeln.</p>

2) Internes CSS:

Internes CSS wird in den Head-Bereich einer HTML-Datei eingefügt und gilt für alle Elemente innerhalb der HTML-Datei. Es wird innerhalb eines <style>-Tags definiert und ermöglicht es, dass das Styling zentralisiert und leichter verwaltet werden kann.

				
					<head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>

<body>
  <p>Dieser Text ist blau und hat eine Schriftgröße von 14 Pixeln.</p>
</body>

Im Head-Bereich wird der Absatz p näher definiert. Im Body-Bereich wird dies Formatierung dann jeweils zwischen <p> und </p> angewandt.

3) Externes CSS:

Externes CSS wird in einer separaten CSS-Datei definiert, die von mehreren HTML-Dateien aufgerufen werden kann. Diese Methode ist die bevorzugte Art, um CSS-Code zu organisieren, da sie eine saubere Trennung von Inhalt und Design ermöglicht, was die Wartbarkeit und Lesbarkeit des Codes verbessert.

				
					/* styles.css */
p {
  color: green;
  font-size: 18px;
}

In einer externen CSS-Datei wird der Absatz p näher definiert.

				
					<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>Dieser Text ist grün und hat eine Schriftgröße von 18 Pixeln.</p>
</body>

Im Head-Bereich wird die CSS-Datei aufgerufen und im Body-Bereich wird mit dem Tag <p> dann die Formatierung ausgeführt.

Wie funktionieren CSS?

CSS verleiht Ihren Webseiten Stil, indem es mit HTML-Elementen interagiert. Elemente sind die einzelnen HTML-Komponenten einer Webseite – beispielsweise ein Absatz -, die in HTML folgendermaßen aussehen können:

				
					<p> Dies ist mein Absatz! </p>

Wenn Sie möchten, dass dieser Absatz für Personen, die Ihre Webseite über einen Webbrowser anzeigen, rosa und fett erscheint, verwenden Sie CSS-Code, der folgendermaßen aussieht:

				
					p  {  color:pink;  
      font-weight:bold;  }

In diesem Fall wird „p“ (der Absatz) als „Selektor“ bezeichnet. Dies ist der Teil des CSS-Codes, der angibt, welches HTML-Element das CSS-Styling beeinflusst. In CSS wird der Selektor links von der ersten geschweiften Klammer geschrieben.

Die Informationen in geschweiften Klammern werden als Deklaration bezeichnet und enthalten Eigenschaften und Werte, die auf den Selektor angewendet werden. Eigenschaften sind Dinge wie Schriftgröße, Farbe und Ränder, während Werte die Einstellungen für diese Eigenschaften sind.

Im obigen Beispiel sind „Farbe“ (color) und „Schriftstärke“ (font-weight) beide Eigenschaften, und „Rosa“ (pink) und „Fett“ (bold) sind Werte.

Dieselben Grundprinzipien können angewendet werden, um Schriftgrößen, Hintergrundfarben, Randeinrückungen und mehr zu ändern.

Zum Beispiel. . .

				
					body  {  background-color:lightblue;  }

. . .würde den Hintergrund Ihrer Seite hellblau machen, oder. . .

				
					p  {  font-size:20px;  color:red;  }

. . .erzeugt eine 20-Punkt-Schriftgröße mit roten Buchstaben.

Beispiel: CSS Datei

Für gewöhnlich werden die CSS Selektoren in einer eigenen CSS Datei (externes CSS) gespeichert, die von der Webseite im head geladen wird.
In diesem Beispiel handelt es sich jedoch um ein Internes CSS. Die CSS Selektoren werden direkt im head angegeben.

				
					<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Interne CSS-Beispiel</title>
  <style>
  
    h1 {
      font-size: 2rem;
      color: #0077ff;
      text-align: center;
      margin-top: 50px;
    }

    p {
      font-size: 1rem;
      line-height: 1.5;
      color: #333;
      margin: 20px;
    }

    .box {
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 20px;
      margin: 20px;
    }
    
  </style>
</head>
<body>
  <h1>Willkommen auf meiner Webseite</h1>
  <div class="box">
    <p>Das ist ein Beispiel-Text.</p>
  </div>
</body>
</html>