Tutorial Kategorien: css

Tabellen mit CSS gestalten Tabellen sind ein zentrales Werkzeug, um strukturierte Daten wie Statistiken, Produktlisten oder Finanzinformationen übersichtlich darzustellen. Ohne CSS wirken HTML-Tabellen jedoch technisch, karg und schwer lesbar. Moderne CSS-Eigenschaften machen Tabellen klar, harmonisch und professionell – und vor allem: sie ermöglichen eine wirklich responsiv nutzbare Darstellung auf allen Geräten. In diesem Kapitel lernst…

Links mit CSS gestalten Hyperlinks gehören zu den wichtigsten Elementen einer Website. Sie ermöglichen die Navigation und führen Nutzerinnen und Nutzer zu relevanten Informationen. Daher ist es essenziell, Links optisch klar erkennbar und nutzerfreundlich zu gestalten. CSS bietet dafür eine Vielzahl von Möglichkeiten. Ein Link besitzt standardmäßig vier Zustände, die über Pseudoklassen gesteuert werden: a:link…

Schriftarten mit CSS gestalten Die Wahl der richtigen Schriftarten ist entscheidend für die Lesbarkeit und den Gesamteindruck einer Webseite. CSS stellt verschiedene Eigenschaften bereit, um Schriftart, Schriftgröße, Schriftstil, Schriftstärke und Varianten detailliert anzupassen. Die wichtigsten Eigenschaften sind: font-family font-style font-weight font-size font-variant Im Folgenden sehen wir uns jede Eigenschaft im Detail an. Schriftfamilie (font-family) Mit…

Den Hintergrund (Background) eines Elements stylen Der Hintergrund eines Elements ist ein wesentlicher Bestandteil des visuellen Designs einer Webseite. CSS bietet eine Reihe von Eigenschaften, um Hintergrundfarben und Hintergrundbilder flexibel zu gestalten. Die wichtigsten Eigenschaften sind: background-color background-image background-repeat background-attachment background-position Im Folgenden sehen wir uns jede dieser Eigenschaften im Detail an. Hintergrundfarbe per CSS…

Einstellen der Farbeigenschaft Die color-Eigenschaft definiert die Textfarbe eines Elements. Wird sie im body-Selektor gesetzt, gilt sie automatisch für nahezu alle Texte der Webseite, da Farben vererbt werden. body { color: #ff5722; } Achtung: Die color-Eigenschaft erbt sich in der Regel vom übergeordneten Element – mit Ausnahme von Links, die ihre eigenen Standards besitzen. Definition…

Was ist ein Selektor? Bevor wir mit der Einführung der CSS-Selektoren beginnen können, sollten wir klären, was ein CSS-Selektor ist. Einfach ausgedrückt ist er eine Zuordnung im CSS zu einem Element auf der Webseite. Die diesem Selektor zugeordneten Stilregeln werden auf die Elemente angewendet, die dem Selektor entsprechen. Selektoren sind einer der wichtigsten Aspekte von…

Der CSS-Syntax im Detail Eine CSS-Regel besteht aus zwei Hauptteilen: einem Selektor und einer oder mehreren Deklarationen. Zusammen bestimmen sie, wie Elemente auf einer Webseite formatiert werden. Der Selektor bestimmt, welches Element oder welche Gruppe von Elementen formatiert wird. Die Deklarationen innerhalb des Blockes legen fest, wie das gewählte Element aussehen soll. Jede Deklaration besteht…

Einbinden von CSS in HTML-Dokumente CSS kann auf verschiedene Arten in ein HTML-Dokument eingebunden werden. Jede Methode hat eigene Einsatzbereiche, Vor- und Nachteile. Moderne Webseiten verwenden meist eine Kombination aus externen Stylesheets und gelegentlichen eingebetteten Styles. Inline-Styles sollten dagegen nur in Ausnahmefällen verwendet werden. Es gibt drei grundsätzliche Varianten: Inline-Styles: Direkt innerhalb eines HTML-Tags per…

Was ist CSS? CSS ist eine der wichtigsten Technologien des modernen Webdesigns. In dieser Einführung lernst du, warum CSS unverzichtbar ist, wie es funktioniert und wie du es in echten Projekten einsetzt. CSS steht für Cascading Style Sheets und ist die Sprache, die bestimmt, wie eine Webseite aussieht. Während HTML den strukturellen Rahmen bildet, definiert…