CSS – Was ist das? Eine Definition

Cascading Style Sheets (CSS) ist eine Sprache, mit der Sie die Darstellung einer Webseite verwalten können. Die CSS-Sprache ist eine Empfehlung des World Wide Web Consortium (W3C), genau wie HTML oder XML.

Die Stile ermöglichen es, Regeln zu definieren, die auf ein oder mehrere HTML-Dokumente angewendet werden. Diese Regeln betreffen die Positionierung von Elementen, die Ausrichtung, Schriftarten, Farben, Ränder und Abstände, Rahmen, Hintergrundbilder usw.

Der Zweck von CSS ist es, die Struktur eines HTML-Dokuments von seiner Darstellung zu trennen. In der Tat können wir mit HTML sowohl die Struktur (den Inhalt und die Hierarchie zwischen den verschiedenen Teilen eines Dokuments) als auch die Darstellung definieren. Dies wirft jedoch einige Probleme auf. Mit dem HTML/CSS-Paar können wir Webseiten erstellen, bei denen sich die Struktur des Dokuments in der HTML-Datei befindet, während die Darstellung in einer CSS-Datei erfolgt.

Mit CSS können Sie z. B. eine Reihe von stilistischen Regeln definieren, die für alle Seiten einer Website gelten. Dies erleichtert das Ändern der Darstellung einer ganzen Site. CSS erlaubt es auch, unterschiedliche Regeln für jede Anzeigeunterstützung zu definieren (ein klassischer Browser, ein Fernseher, eine mobile Unterstützung, ein Braille-Reader…). Mit CSS lässt sich auch die Barrierefreiheit von Webdokumenten verbessern.

Darüber hinaus bietet CSS im Vergleich zu HTML neue Funktionalitäten im Hinblick auf den Stil. In der Tat erlaubt HTML eine recht summarische Verwaltung des Stils von Dokumenten.

Hier ist ein Beispiel für eine CSS-Regel:

• p font-color: red; font-size: 12pt
• Erläuterung: Diese Regel definiert die Farbe und Größe des Textes für die <p>-Elemente (Absätze) eines HTML-Dokuments. So werden alle Absätze eine rote Schriftfarbe und eine Größe von 12 Punkt haben.

Was ist CSS?

Auch wenn andere Sprachen verwendet werden können, sind es hauptsächlich 4 Sprachen, die dem Web heute seine Form geben: HTML, CSS, Javascript und PHP. HTML und CSS sind Beschreibungssprachen, Javascript und PHP sind Programmiersprachen.

HTML und CSS werden verwendet, um zu beschreiben, wie eine Web-Seite dargestellt wird. HTML ist das Herz des Webs, sein Rückgrat. Sie strukturiert die verschiedenen Elemente einer Webseite. CSS wird verwendet, um diese Elemente zu formatieren, um ihnen einen visuellen Stil zu geben.

CSS ist die Abkürzung für Cascading Style Sheets. Das Wort „Kaskade“ erinnert uns daran, dass Stile nach unterschiedlichen Wichtigkeitsgraden klassifiziert werden können. Mit CSS können Sie also genau steuern, wie eine Website dargestellt wird.

CSS, wie funktioniert das?

Genau wie HTML ist auch CSS eine leicht zu erlernende Sprache. Der Stil eines Webdokuments kann direkt im HTML-Code implementiert oder in ein anderes Dokument eingefügt werden.

In der Zeile

Es ist möglich, CSS direkt im HTML-Tag eines Elements mit dem style-Attribut anzuwenden.

Beispiel: -p style=“background-color: #FFFFFF;“-Mein Text-/p-. In diesem Beispiel wird dem Absatz „Mein Text“ ein weißer Hintergrund zugewiesen.

Intern

Anstatt ein bisschen CSS in jedes HTML-Tag zu packen, ist es möglich, es in ein -style- Tag innerhalb des -head- Tags am Anfang des HTML-Dokuments zu packen.

Beispiel: -style type=“text/css“-p {background-color: #FFFFFF;-/style-. Dies gilt dann für alle Absätze des Dokuments.

Die externe Formatvorlage

Aufgrund der Größe der heutigen Websites und der vielen Stile, die auftreten können, werden diese 2 Arten der Implementierung nicht mehr wirklich verwendet. In der Tat kann der Stil einer Website Hunderte oder sogar Tausende von Codezeilen enthalten.

Die Formatvorlage ist die empfohlene Art, ein HTML-Dokument zu formatieren. Wir erstellen ein ganzes Dokument, das dem Stil gewidmet und in CSS geschrieben ist, oft style.css genannt. Das sieht so aus:

• Selektor {Eigenschaft: Wert; Eigenschaft: Wert; Eigenschaft: Wert;}
• Selektor {Eigenschaft: value;}
• Selektor {Eigenschaft: Wert; Eigenschaft: Wert;}

Der Selektor ist der Typ des Elements, auf das wir einen Stil anwenden werden (z. B. Titel- und Absatz-Tags). Die Eigenschaft ist das, was geändert werden soll: der Hintergrund, eine Schriftart, die Breite eines Elements.

Mit dem gleichen Beispiel wie zuvor, haben wir:
p {
Hintergrund-Farbe: #FFFFFF;
}

Der Stil wird dann über einen Link innerhalb des -head- Tags des HTML-Dokuments angewendet. Eine einzelne Website kann bei Bedarf mehrere Stylesheets enthalten und ein einziges Stylesheet kann auf mehrere Seiten angewendet werden. Dies ist die effizienteste Methode.

Wofür wird CSS verwendet?

CSS wird verwendet, um die Ästhetik einer Website zu definieren. Ohne CSS wäre eine Webseite nur eine Aneinanderreihung von schwarzen Elementen auf weißem Hintergrund.

Mit CSS-Code definieren wir zum Beispiel:

• die Schriftart eines Textes und sein Aussehen (Farbe, Größe usw.);
• die Ränder und Polsterungen, die ein Element umgeben;
• das Aussehen eines Menüs;
• die Erstellung von geometrischen Elementen;
• Einrichten von Bildrastern;
• Hinzufügen von Rändern;
• Anwendung verschiedener Effekte oder einfacher Animationen;
• Ändern der Darstellung einer Website je nach dem vom Benutzer verwendeten Gerät (Mobiltelefon, Computer, Tablet);
• die Art und Weise, wie man in einer Website navigiert.

Urhebender Autor: Redaktion Futura