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