Internet Basics (4): Was ist CSS?

CSS ermöglicht eine effektive Bearbeitung von Websites, vor allem deren Design. Während HTML die Struktur liefert, bietet CSS die Formatierung der Inhalte. Mehr dazu hier

CSS (Cascading Style Sheets) wurde vom W3C eingeführt, um die Formatierung der Website von HTML zu trennen.

HTML liefert die Struktur, den Aufbau, CSS die Formatierung, das Design.

CSS ermöglicht eine effektive Bearbeitung von Websites, vor allem deren Design. Der Umgang mit CSS hat Ähnlichkeiten mit dem Verwenden von Text- oder Formatvorlagen die man zum Beispiel aus Microsoft Word kennt. CSS-Dateien beinhalten die Eigenschaften (Farben, Größe usw.) der einzelnen Tags (z. B. <h1> = Heading 1).

1997 führte der W3C die erste Version von CSS ein, CSS 2 kam Mitte 1998. Die jetzige Version CSS 3 ermöglicht zum Beispiel, dass sich die Website an verschiedene Bildschirmgrößen anpassen kann (responsives Design), was vor allem für den riesigen Umschwung auf Mobiltelefone zur Informationssuche im Internet wichtig ist.

CSS als eigenes Element der Website bringt viele Vorteile mit sich. Erstellte Designs können auf einfache Weise in anderen Projekten verwendet werden. Da mithilfe von CSS die Websites übersichtlich programmiert sind, sind diese auch weniger mit Code überfrachtet und können deshalb schneller laden. CSS wird meist gesondert in Form von sogenannten Klassen, getrennt vom HTML-Code, geschrieben. Das ermöglicht eine leichtere Fehlererkennung- und Behebung.


Bei CSS wird mit sogenannten Selektoren gearbeitet. Ein Selektor ist der Begriff, der bei jedem CSS-Element vor der geschwungenen Klammer steht. CSS unterscheidet zwischen Groß- und Kleinschreibung („case sensitive“). Selektoren sind ein großer Vorteil von CSS, da damit nicht mehr jedes HTML-Element einzeln designt werden muss (inline-CSS), vielmehr werden die Elemente in Klassen oder andere Selektoren eingeteilt, denen dann ein Design zugeschrieben wird. Das erspart viel Code und somit Ladezeiten, und trennt gleichzeitig den Aufbau der Seite (HTML) vom Design (CSS).

Es kann im Groben zwischen diesen Selektoren von CSS unterschieden werden:
• Universalselektor (* – alle Elemente)
• Typselektor (z.B. für <h1>)
• Klassenselektor (z.B.: „.heading“)
• ID-Selektor (nur ein Element, z.B. „#unique“)
• Attributselektor (eckige Klammern, spricht Elemente anhand ihrer Attribute an)

Die CSS Selektoren an einem Beispiel: der Typselektor für “p” – paragraph, der Klassenselektor .container und ID-Selektor #leader

Diverse CSS-Stile können verwendet werden für
• eine ganze Gruppe von HTML-Elementen (z.B. bei einheitlicher Schriftart)
• einzelne Elemente (z.B. Zeilenabstände für <h1>)
• einzelne Instanzen eines Elements (z.B. nur diese eine Überschrift von <h1>)
• entsprechend markierte Abschnitte innerhalb eines Elements (z.B. drittes Wort der Überschrift)

Dabei ist wichtig, dass jedes Element die CSS-Eigenschaften der übergeordneten Ebene „erbt“. Sie müssen deshalb nur einmal definiert werden, und nicht für jede Ebene einzeln. Dieser „Top-Down“-Ansatz, ist der Grund für die eigentliche Effizienz von CSS.

Hier ein gesamtes Beispiel zu CSS:

Am Anfang wird im HTML-Tag <style> die Klasse .center definiert. Mithilfe der Klasse “center” wird Text zentriert.

In dem Element <div> wird die Klasse dann verwendet (class=”center”) und damit wird der Inhalt dieses Element zentriert.

3 Kommentare

  1. […] Weiter mit – CSSWeiter mit – JavaScript […]

Kommentar verfassen