CSS: Was ist das eigentlich?

Sicherlich hat jeder, der nur im Entferntesten mit der digitalen Welt in Berührung kommt, schon einmal von der Abkürzung CSS gehört. Doch was bedeutet sie eigentlich, wie lässt sich CSS in eine Website integrieren und wie umfangreich ist es anwendbar?

In den Anfängen des Website-Designs gab es lediglich reine HTML (Hyper Text Markup Language) Tags, um das Aussehen einer Internetseite zu verändern. Damit war es möglich, die Struktur, also den Aufbau festzulegen, Bilder und Verlinkungen einzubinden und einfachere Änderungen in der Gestaltung vorzunehmen. Doch die Tags, wie „center“ und „font“, reichten irgendwann nicht mehr aus, um die Ideen der Entwickler umzusetzen. So musste eine neue Sprache entstehen.

 

Talking about CSS

CSS ist die Abkürzung für Cascading Style Sheet, was übersetzt geschachtelte Gestaltung bedeutet. Außerdem spricht man hier bewusst von einem „Sheet“, denn das Trennen von HTML, also des strukturellen Aufbaus, und CSS macht das Erstellen und Pflegen der Website wesentlich einfacher. Es ist sogar möglich, CSS in extra dafür vorgesehenen Dateien abzulegen und auf diese zentral zuzugreifen. Besonders für umfangreichere Internetseiten ist es nun möglich, das Design zu zentralisieren. Verändert man zum Beispiel die Schriftart im Style Sheet, so ändert sich diese im gesamten System. Entwickler sparen sich den Aufwand, jedes HTML-Dokument einzeln anfassen zu müssen und Änderungswünsche nach Fertigstellung können günstiger und schneller realisiert werden.

Doch wenn man über CSS spricht, darf auf keinen Fall das Box-Modell fehlen. Dieses besteht aus einem Inhalt, beispielsweise einer Text-Passage oder einem Bild, aus dem inneren Abstand, dem Rand und dem äußerem Abstand zu anderen Inhalten. Die Besonderheit des Modells liegt in der Bestimmung ihrer Position im Verhältnis zu den benachbarten Elementen. Durch die individualisierbaren Eigenschaften kann man im CSS daher nicht nur die gestalterische Komponente bestimmten, sondern auch das Layout der gesamten Seite ändern.

How to CSS

Genug zur Theorie – wie wendet man CSS in einer Website an? Das Syle Sheet kann man ganz einfach im Projektverzeichnis mit der Dateiendung .css erstellen. Um dieses dann mit der gewünschten HTML-Seite zu verbinden, muss man im Kopf der HTML-Datei, im sogenannten-Tag, eine Verlinkung zum Style Sheet einfügen. Verwendet man ein CMS-System wie WordPress oder Jimdo kann man den CSS-Code unter einem der Menüpunkte in dem dafür vorgesehenen Fenster ergänzen.

Der Zugriff auf die verschiedenen Tags des HTML-Dokuments wird durch Selektoren kommuniziert. Möchte man einen bestimmten Inhalt gestalterisch verändern, ordnet man dem entsprechenden Tag eine Klasse oder eine ID zu. Das ist jedoch nicht die einzige Möglichkeit, Elemente anzusprechen. Es gibt eine Vielzahl von bereits vorhandenen Selektoren, die CSS mit sich bringt. Hierbei ist wichtig, die Zuweisung eindeutig zu definieren.

Ist der richtige Selektor gewählt, kann man beginnen, diesen mit den gewünschten Styles zu beschreiben. Hier ist der Fantasie kaum eine Grenze gesetzt. Schriftarten, Farben, Maus-Effekte und vieles mehr kann individuell erstellt und verändert werden.

Cascading Style Sheet – unser Fazit

CSS ist eines der mächtigsten Werkzeuge wenn es um das Gestalten im Frontend, also der Benutzeroberfläche, geht. Es ist einfach zu verstehen und benötigt keine besonderen Installationen oder Editoren zum Erstellen.  Durch die umfangreichen Funktionen kann der Code jedoch schnell komplex werden, weshalb eine strukturierte Arbeitsweise von Vorteil ist. Zudem sollte man das Ergebnis ausführlich testen, um eventuelle Fehler vorzubeugen.

Sie haben individuelle Anforderungen oder möchten eine gestalterisch und strukturell einwandfreie Webseite? Unsere Entwickler und WordPress-Spezialisten setzen Ihre Wünsche gerne in die Tat um. Vereinbaren Sie direkt hier einen unverbindlichen Beratungstermin und kommen Sie Ihrem digitalen Erfolg einen Schritt näher.

Sie haben Fragen zu diesem Thema?

Rufen Sie uns einfach an oder schreiben Sie uns eine Email. Wir freuen uns auf Sie!

0800 – 50 01 300
info@netzheimat.com

Weitere spannende Artikel

2018-09-05T10:48:52+00:00