Kurs: CSS (Casading Style Sheets)

Dauer: 2-3 Tage

Motivation: Cascading Style Sheets sind eine Ergänzungssprache zu HTML, mit der sich das Aussehen von HTML-Elementen wie Schriften, Linkfarben, Rahmen oder andere Auszeichnungen exakt formatieren lassen. Diese Auszeichnungen werden nicht mehr in HTML direkt für jedes Element einzeln festgelegt, sondern für die gesamte Web-Site in einem oder mehreren (externen) Style-Sheets definiert.

Dies stellt eine große Arbeitserleichterung für Webdesigner dar, sorgt für ein konsistentes Webseiten-Design und reduziert die Größe der zu übertragenden Webseiten. Weiterhin ist das Thema "Barrierefreiheit" von Webseiten nur mit Hilfe von CSS wirklich in den Griff zu bekommen.

Ziel: In diesem Kurs werden die Möglichkeiten von CSS vorgestellt und anhand von Übungen die grundlegende Funktionsweise von CSS erlernt. Sie lernen, wie Sie CSS-Formate definieren, einsetzen und die Style Sheets zentral verwalten. Dabei wird Wert auf den möglichst browserunabhängigen Einsatz von CSS gelegt.

Hinweis: Der Kurs ist für Linux/UNIX- und MS-Windows-Systeme geeignet!

Inhalt:

• Einführung
  • Was und wozu ist CSS?
  • Vor- und Nachteile von CSS
  • Wichtige Begriffe
    • Block/Inline-Elemente
    • Hierarchie (Container)
    • Spezifität
    • Selektoren
    • Klassen
    • Pseudo-Klassen/Formate
  • Kurze (X)HTML-Wiederholung
  • Guter (Programmier)Stil

• CSS
  • 5 Möglichkeiten CSS einzubinden
  • CSS-Syntax
  • Kommentare in CSS
  • Vererbung (inheritance)
  • Rangfolge

• Schrifteigenschaften (Textformatierung)
  • Schriftart
  • Schriftgröße
  • Schriftstil
  • Schriftvariante
  • Schriftstärke

• Farben
  • Vorder- und Hintergrundfarbe
  • 5 Schreibweisen
  • 16 Standardfarben
  • 216 Browserssichere Farben

• Hintergrund
  • Farben und Bilder
  • Positionieren
  • Wiederholen
  • Fixieren

• HTML-Elemente
  • Absolute/relative Positionierung
  • Umfliessen
  • Sichtbarkeit

• CSS-Box-Modell
  • Innenabstand (Zwischenraum)
  • Rahmen
  • Außenabstand (Zwischenraum)

• Texteigenschaften (Textbearbeitung)
  • Ausrichtung
  • Groß-und Kleinschreibung
  • Zeichen/Wort-Abstand
  • Einrückung
  • Zeilenumbruch
  • Zeilenhöhe
  • Seitenumbruch

• Listen
  • Typen
  • Aufzählungszeichen
  • Abstände
  • Horizontale/Vertikale Navigationsmenüs

• Tabellen
  • Rahmen
  • Leere Zellen
  • Beschriften
  • Text/Hintergrundfarben

• Layout
  • Layout ohne Tabellen
  • Zwei- und dreispaltiges Layout
  • Aufklappbare Menüs
  • Mausover-Effekte ohne Bilder
  • Abgerundete Boxen

• Formulare gestalten

• Verschiedene Medien
  • Ausdruck optimieren
  • Alternative Stylesheets

• Tipps und Tricks
  • Typische Fehler
  • CSS-Abkürzungen
  • Browser-Spezialitäten
  • Nötige "Hacks"

Schulungsunterlagen:

• Skript
• Lösungsblätter zu allen Übungen

Voraussetzungen:

• Muss: Allgemeine Computer-Kenntnisse (Tastatur, Maus, Grafische Oberfläche, Editor)
• Muss: HTML-Grundkenntnisse
• Muss: Guter Umgang mit einem Editor

Abgrenzung:

• Es wird keine Integrierte Entwicklungsumgebung (IDE) besprochen
• Der Kurs bezieht sich nicht auf Internet Explorer-Spezialitäten