"CSS" im Lexikon

CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist. Es handelt sich um eine Stilsprache, die angibt, wie Dokumente präsentiert werden, die in einer Markup-Sprache wie HTML geschrieben sind. CSS ermöglicht es Webentwicklern und Designern, das Layout und das Erscheinungsbild einer Webseite zu kontrollieren, ohne die Struktur des HTML-Codes ändern zu müssen.

Die "kaskadierende" Natur von CSS bedeutet, dass Stilregeln von verschiedenen Quellen auf einer einzigen Seite angewendet werden können und dass die Priorität der verschiedenen Regeln basierend auf einem festgelegten Schema festgelegt wird, das als Kaskade bekannt ist. Dies ermöglicht eine effiziente Wiederverwendung von Stilen und erleichtert die Wartung der Website, da Änderungen an einem zentralen Ort durchgeführt werden können, was sich dann auf die gesamte Website auswirkt.

Stilangaben in CSS können direkt in HTML-Dokumente eingebunden werden (inline), im Kopfbereich des HTML-Dokuments platziert werden (interne Stylesheets) oder in separaten Dateien ausgelagert werden, die von den HTML-Dokumenten referenziert werden (externe Stylesheets). Externe Stylesheets sind besonders nützlich, um das Design über viele Webseiten hinweg konsistent zu halten. Sie werden mit der Dateiendung .css gespeichert und üblicherweise mit Links wie style.css oder main.css bezeichnet.

CSS Anweisung direkt im HTML Befehl:

Hierbei wird die CSS Definition direkt in den HTML Befehl geschrieben: Das ist für einzelne Seiten in Ordnung, verursacht bei Änderungen aber oft schon viel Aufwand. Der Code sieht so aus:

<h1 style="font-family: arial; color: #000000;">Überschrift</h1>

CSS Anweisung in einer CSS Klasse:

Lagert man die Definion in eine Klasse aus, kann man sie später leicht ändern. Alle HTML Befehle, die mit dieser Klasse definiert wurden, werden dann gleichzeitig geändert.



<style type="text/css">
.ueberschrift { font-family:arial; color:#000000; } </style>

<h1 class="ueberschrift">Überschrift 1</h1>

<h2 class="ueberschrift">Überschrift 2</h2>