CSS-Training: kostenlose CSS Tutorials zum Download
Cascading Style Sheets (CSS) sind aus der modernen Webseiten-Programmierung nicht mehr weg zu denken. Ebenso wie beim Erlernen von HTML ist ständiges Training im Umgang mit den CSS-Elementen unerlässlich.
Cascading Style Sheets sind vergleichbar mit Formatvorlagen in z. B. Word; sie definieren das Desgin einer Internet-Präsenz. Mit CSS legt man Schriftarten, -größen und -farben sowie Abstände, und Positionen einzelner HTML-Elemente eines Webauftritts fest. Eine strikte Trennung von Text und Layout (Struktur und Design) hat viele Vorteile:
- Sämtliche CSS-Definitionen lassen sich in eine separate Datei auslagern. Änderungen, die das gesamte Design einer Internet-Präsenz betreffen, sind schnell erledigt. Das verringert deutlich den Pflegeaufwand und macht ein Redesign einfach.
- Es entfallen die lästigen FONT-Tags, die im Standardregelwerk des W3C (World Wide Web Consortium) eh nicht mehr enthalten sind. Somit entledigt man sich einer ganzen Menge überflüssigen Quellcodes, macht den Quelltext lesbarer und arbeitet standardkonform.
- Auch Designwünschen, wie das Abschalten der automatischen Unterstreichung von verlinkten Passagen, lassen sich einfach bewältigen.
- CSS ermöglicht barrierefreie / zugängliche Internetseiten zu erstellen - ohne auf anspruchsvolles Design zu verzichten.
Die CSS-Tutorials stehen im PDF-Format zum Download zur Verfügung. Zum Speichern nutzen Sie bitte die Funktion der rechten Maustaste (Ziel speichern unter ...). Bitte beachten Sie das Copyright.
Zuletzt aktualisiert am 22.07.09
Zusammenhang von HTML, CSS und Javascript
Diese kleine Präsentation verdeutlicht das Zusammenspiel von HTML, CSS und Javascript (ca. 2,2 MB), die gemeinsam eine komplette, ansprechende Internet-Präsenz ergeben. In Form eines Schemas werden HTML, SGML, XML, XHTML/HTML, CSS, Javascript, Doctype in Zusammenhang gesetzt.
Zuletzt aktualisiert am 11.07.09
CSS-Editor: TopStyle Lite 3.10
Neben zahlreichen HTML-Editoren, die CSS-Unterstützung bieten, existieren eine ganze Reihe reiner CSS-Editoren. Sie konzentrieren sich auf die Erstellung der Style Sheets. Der Vorteil dieser Spezialisten ist, dass die korrekte Syntax vorgegeben wird. Zusätzlich werden Schreibfehler weitgehend vermieden.
Dieses kleine Tutorial zeigt, wie Sie CSS-Dateien mit der Freeware TopStyle Lite 3.10 erstellen können.
Zuletzt aktualisiert am 16.07.09
Druckversion
Da für unterschiedliche Ausgabemedien, wie beispielsweise Bildschirm und Drucker, jeweils andere Gesetze gelten, kann per Cascading Style Sheets gesondert auf diese Gegebenheiten eingegangen werden. So ist das Layout am Bildschirm als Querformat angelegt; der Drucker hingegen gibt den Inhalt einer Bildschirm-Seite standardmäßig im Hochformat aus. Hierdurch kann es u. U. vorkommen, dass Textteile vom rechten Rand abgeschnitten werden.
Im Tutorial Druckversion mit CSS lernen Sie, wie Sie ein zweites Style Sheet für den optimalen Druck anlegen.
Zuletzt aktualisiert am 16.07.09
Bildunterschriften
Bildunterschriften stellen in der HTML-Programmierung immer wieder ein Problem dar. Ein spezielles Tag (Befehl) für eine Bildunterschrift existiert in HTML bzw. XHTML nämlich nicht. Das Problem besteht in der Verknüpfung von Bild und Bildunterschrift als Einheit und dem Erhalt des Layouts bei Vergrößerung der Schrift. Das Tutorial Bildunterschriften mit CSS stellt die Möglichkeit der Umsetzung von Bildunterschriften in einer Definitionsliste bzw. einer DIV-Box vor.
Zuletzt aktualisiert am 11.07.09
CSS zur Textformatierung
Durch die Auslagerung der Formatierungen, wie z. B. Schriftart, -größe und -farbe sowie Hintergrundfarben gewinnen Tabellenlayouts an Übersichtlichkeit. Außerdem wirkt sich eine Änderung in der externen CSS-Datei auf alle HTML-Seiten gleichermaßen aus, was den Pflegeaufwand erheblich reduziert. So können Sie schnell die Hintergrundfarbe ändern, ohne sämtliche Seiten einzeln zu bearbeiten.
Download: Tabellenlayout mit horizontaler Navigationsleiste und zugehörigem CSS (ca. 44 KB)
Download: Tabellenlayout mit vertikaler Navigationsleiste und zugehörigem CSS (ca. 44 KB)
Im Tutorial Mini-CSS lernen Sie Schritt für Schritt die gängigen CSS-Anweisungen zur Textformatierung über ein externes Style Sheet für ein Tabellenlayout kennen.
Zuletzt aktualisiert am 16.07.09
