CSS ist eine Abkürzung für Cascading Style Sheets. Es handelt sich dabei um eine Stylesheet-Spache für elektronische Dokumente und bildet zusammen mit HTML und JavaScript eine der Kernsprachen des Internets. CSS kümmert sich darum, wie Ihre Seite aussieht. Dank CSS können Sie die Farbe und Größe Ihrer Texte festlegen, die Schriftarten anpassen, Tabellen und Spalten formatieren, Hintergründe einfügen und Animationen erstellen. Ein ganz wichtiger Punkt für moderne Webseiten ist das responsive Design, also ein Layout, welches sich automatisch an die Endgeräte (Tablet, Desktop oder Smartphone) anpasst. In CSS können Sie für einzelne Auflösungen unterschiedliche Layouts definieren, so dass Ihre Seiten stets gut aussehen.
"Cascading" bedeutet dabei, dass ein Stil, der einem übergeordneten Element zugewiesen wurde, auch auf alle Unterelemente angewendet wird. Wenn Sie zum Beispiel die Farbe des Tags <body> festlegen, so werden alle Überschiften (<h1>, <h2>, <h3>...), Abschnitte (<p>) und sonstige Texte in der festgelegten Farbe angezeigt.
CSS wurde entwickelt, um Vorgaben für die Darstellung möglichst von den Inhalten einer Webseite zu trennen. Wird diese Trennung konsequent vollzogen, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon die Darstellung der Inhalte festgelegt wird.
Cascading Style Sheets sind einfach zu lernen und zu verstehen. Trotz der Einfachheit geben Sie Ihnen aber volle Kontrolle über die Darstellung eines HTML-Dokuments.
Die Vorteile von CSS
Die Trennung von Layout und Inhalt ist nur einer der vielen Vorteile von CSS. Die Stylesheet-Sprache hat noch mehr zu bieten:
- Zeitersparnis: Sie können CSS einmal schreiben und dann das Sheet erneut auf beliebigen Webseiten nutzen.
- Verkürzung der Ladezeiten: Wenn Sie CSS nutzen, müssen Sie nicht ständig HTML Attribute nutzen. Schreiben Sie die gewünschte CSS-Regeln einmal auf und nutzen Sie diese für alle im Dokument vorkommenden HTML-Tags. Das macht den Seitencode schlanker und lässt die Seite schneller laden.
- Einfache Wartung: Wenn Sie größere Änderungen vornehmen möchten, welche die gesamte Seite betreffen, können Sie die gewünschten Style-Änderungen einfach im CSS vornehmen und diese werden global übernommen.
- Größere Gestaltungsmöglichkeiten: CSS hat eine größere Auswahl an Attributen als HTML, so dass Sie dank CSS Ihrer Seite einen wesentlich professionelleren Look verpassen können.
- Kompatibel mit unerschiedlichen Geräten: Stylesheets erlauben es Ihnen, den Inhalt für mehr als einen Gerätetyp zu optimieren. Nutzen Sie das gleiche HTML-Sokument für verschiedene Layouts, z.B. für Tablets oder Smartphones.
- Weltweite Web-Standards: CSS wird immer mehr genutzt. Nur noch wenige Webseiten kommen ohne die Stylesheets aus. Daher ist es eine gute Idee, jetzt CSS zu lernen und auf Ihren Webseiten zu nutzen. So sind Sie für die Zukunft gut gerüstet.
Externes, internes oder inline CSS?
CSS wird in einfachem Text erstellt und kann somit schnell und einfach angewendet werden. Um den Code nun zu einem HTML-Dokument hinzuzufügen, gibt es mehrere Möglichkeiten. CSS-Code kann extern, intern oder inline eingebunden werden. Externe Stylesheets werden in einer eigenen Datei (.css) gespeichert und werden meist dazu benutzt, das Aussehen der gesamten Webseite zu bestimmen. Wenn Sie externe CSS einbinden möchten, so müssen Sie im Header Ihrer HTML-Seite die entsprechende Datei einbinden.
Interne Stylesheets sind CSS-Anweiseungen, welche direkt in den Header einer bestimmten Seite eingebunden werden. Dies ist sinnvoll, wenn Sie eine Seite haben, die einen anderen Look als der Rest der Webpräsenz haben soll.
Inline Styles sind Codeschnipsel, welche direkt im HTML-Code auftauchen und nur für den Tag oder das Attribut gelten, zu welchem sie hinzugefügt wurden. (Beispiel: <h1 style=”font-size:40px;color:violet;”>Check out this headline!</h1>
Externe Style Sheets sind wohl die effizienteste Methode, um CSS auf einer Webseite zu implementieren. Interne und Inline CSS sollten Sie nur verwenen, wenn individuelle Änderungen notwendig sind.
Mit CSS haben Sie also ein mächtiges Werkzeug bei der Hand, um das Aussehen Ihrer Webseite individuell zu gestalten. Sie haben Fragen zu CSS? Sprechen Sie mich an!