Cascading Style Sheets
Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung eines Dokuments, das in einer Markup-Sprache geschrieben ist, zu beschreiben. CSS wird verwendet, um das Layout, die Schriftarten, Farben und andere visuelle Aspekte einer Website zu definieren.
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.
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 gespeichert, die von der Webseite geladen wird.
body {
font-family: Arial, sans-serif;
background-color: lightgray;
}
h1 {
color: navy;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
margin: 0 0 20px 0;
}