CSSWeb-Design

Was ist eigentlich CSS und wie funktioniert das ?

Einleitung

Dieser Artikel richtet sich an Einsteiger in das Thema. Ich möchte hier letztendlich nur erklären, wozu CSS überhaupt benötigt wird. Weiterführende Informationen zum Funktionsumfang von CSS oder Erklärungen zur Erstellung von CSS-Dateien sind nicht in diesem Artikel enthalten.

Aber wenn Sie nur ganz grundsätzlich das Konzept hinter CSS verstehen möchten, dann sind Sie hier vermutlich völlig richtig und ich wünsche viel Spaß beim Lesen.

Grundsätzliches zu HTML und CSS

Jede Webseite ist in einer Sprache geschrieben, die sich HTML nennt. In HTML wird jedes Element einer Seite mit allen Merkmalen beschreiben, der Webbrowser sorgt dann mithilfe dieser Informationen für die Darstellung der Seite.

Grundsätzlich könnte als eine einzige HTML-Datei alles enthalten, was zur Darstellung einer Webseite benötigt wird. Allerdings ist es nicht sonderlich praktisch, dass so zu machen. In diesem Fall hätten Sie nämlich für eine Website mit 50 Seiten auch 50 verschiedene HTML-Dateien (eine pro Seite). Und im Falle einer Änderung des Designs müssten Sie dann jede einzelne Änderung in allen diesen Seiten vornehmen.

Mehr Informationen zu HTML finden Sie übrigens bei Interesse in meinem Artikel Was ist eigentlich HTML und wie funktioniert das ?.

Und daher beschloss das W3C (das ist das World Wide Web Consortium, das für die Standardisierung der Techniken im World Wide Web zuständig ist) im Jahre 1996 die Trennung der Inhalte und der Formatierung. Die einzelnen Elemente einer Webseite werden seitdem in einer HTML-Datei festgelegt, während die Informationen zur Formatierung dieser Elemente in einer CSS-Datei nur noch einmal für die gesamte Website festgelegt wurde.

Dank dieser Technik musste von diesem Zeitpunkt an nur noch der Inhalt einer einzigen Datei (nämlich der CSS-Datei) verändert werden, damit das Design der gesamten Website geändert wurde.

Die CSS-Datei

Die Abkürzung CSS steht für “Cascading Style Sheets“, das bedeutet kaskadierende Formatvorlagen und trifft das System recht gut. Kaskadierend bedeutet in diesem Fall, dass alle Formatierungs-Anweisungen für ein bestimmtes Element automatisch auch für alle unter ihm angeordneteten Elemente gültig ist (die sogenannte Vererbung).

Die verschiedenen Elemente werden in HTML durch den Element-Namen (beispielsweise <p> für einen Absatz), durch verschiedene Klassen (das sind Gruppen gleich formatierter Elemente) und Bezeichner (das sind Namen für ein ganz bestimmtes Element bezeichnet. Du in CSS werden diesen Elementen jetzt Formatierungen zugewiesen, die für jedes der so bezeichneten Elemente auf einer Website gültig sind.

Lassen Sie mich das einfach einmal an einem Beispiel etwas näher erklären.

Beispiel

In diesem Beispiel möchte ich Ihnen das Zusammenspiel zwischen HTML und CSS ganz einfach anhand eines Absatzes beschreiben. Wir werden in diesem Beispiel lediglich zwei HTML-Element benutzen, nämlich den Absatz (das Element <p>) und ein Element zur Ausgestaltung bestimmter Textstellen (das Element <span>).

Dazu zeige ich Ihnen zunächst einmal, wie diese Element in klassischem HTML ohne CSS festgelegt worden wären.

Klassisches HTML

Hier sehen Sie den HTML-Code für die Erstellung eines einfachen Textabsatzes in HTML mit klassischer Formatierung direkt in HTML.

<p style=“font-family: Roboto;font-size: 12px;font-weight: normal;color: black;“>
Dies ist der Text unseres Absatzes. Das Wort <span style=“ font-weight: bold;color: red;“>fett</span> soll in Fettschrift und in Rot dargestellt werden.
</p>

In diesem Beispiel habe ich einen Absatz vollständig in HTML formatiert. Dem Absatz (das Element <p>) habe ich verschiedene Formatierungen (Schriftart, -größe, -stärke und -farbe) direkt in HTL zugewiesen, dem Text „fett“ wurde eine andere Schriftstärke und -farbe zugewiesen.

Hätten wir jetzt beispielsweise 1.000 Textabsätze auf den Seiten unserer Website und wollten beispielsweise die Textfarbe ändern, müssten wir diese Änderung an ebenso vielen Stellen in unseren diversen HTML-Dateien durchführen. Neben dem enormen Arbeitsaufwand für diese Änderung wären das Verfahren auch noch sehr fehleranfällig.

Und daher sehen wir uns dasselbe Bespiel jetzt einmal in der Kombination von HTML und CSS an.

HTML und CSS

Der Inhalt unserer HTML-Datei würde jetzt wie folgt aussehen :

<p>
Dies ist der Text unseres Absatzes. Das Wort <span class=“hervorheben“>fett</span> soll in Fettschrift und in Rot dargestellt werden.
</p>

Dazu käme eine CSS-Datei mit den Formatierungsangaben :

p {
  font-family: Roboto;
  font-size: 12px;
  font-weight: normal;
  color: black;
}
span.hervorheben {
  font-weight: bold;
  color: red;
}

Wie Sie sehen können, befinden sich sämtliche Angaben zur Formatierung jetzt in der CSS-Datei, die HTML-Datei enthält nur noch die eigentlichen Elemente.

Und da die CSS-Datei nur einmal auf unserer Website existiert und für alle Seiten gültig ist, wird eine eventuelle Änderung jetzt sehr vereinfacht und erheblich weniger fehlerbehaftet.

Wenn ich jetzt nämlich die Textfarbe für alle Absätze auf meiner Website ändern möchte, dann genügt dazu eine einzige Änderung in der CSS-Datei. Diese Änderung wird automatisch auf alle Webseiten auf meiner Website übernommen, ohne dass ich dazu irgendeine Änderung an meinen HTML-Dateien vornehmen müsste.

Sehen Sie die Vorteile des Konzepts ?

Fazit

Natürlich ist das Ganze in Wirklichkeit nicht ganz so einfach. In der Realität sind meistens mehrere CSS-Dateien beteiligt, die alle einige tausend Zeilen an Code enthalten können. Denn mit CSS können Sie das Aussehen einer Website weitaus stärker beeinflussen, als ich das hier im Kurzen darstellen wollte.

Aber das Prinzip und die resultierenden Vorteile sollte Ihnen jetzt klar sein. Und darum ging’s mir in diesem Artikel in der Hauptsache.Weiterführende Informationen zu CSS und seinen Funktionen finden Sie im Internet in einigen tausend Artikeln, durchaus empfehlenswert sind beispielsweise die Tutorien von SelfHTML (auf Deutsch) und Mozilla (leider momentan nur auf Englisch).

Claus Nehring

Der Autor ist freiberuflichler Web-Entwickler mit Sitz in Luxemburg. Er entwickelt seit mehr als 25 Jahren Websites für seine Kunden und hat sich in den letzten 12 Jahen auf Websites auf Basis von Wordpress spezialisiert. Er publiziert ständig Artikel zu Themen rund ums Internet in verschiedenen Foren.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.


Durch das Abschicken des Kommentars werden die eingegebenen Daten in der Datenbank dieser Website gespeichert. Ausserdem speichern wir aus Sicherheitsgründen Ihre IP-Adresse für einen Zeitraum von 60 Tagen. Weitere Informationen zur Datenverarbeitung finden Sie in der Datenschutz-Erklärung.

Back to top button
Close