1. Cascading Style Sheets
Barrierefrei in die Zukunft
1 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

2. Agenda
• Theoretischer Teil
1. Einführung
2. Tools
3. CSS einbinden
4. Selektoren, Klassen und ID‘s
5. Maßeinheiten und Farbangaben
6. CSS-Eigenschaften
2 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

3. Agenda
• Praktischer Teil (Workshop)
1. Vorbereitung und Strukturierung des HTML Codes
2. Sinnvoller Aufbau und Struktur einer CSS-Datei
3. Positionierung von Inhaltsblöcken ohne Tabellen
4. Formulargestaltung mit CSS
5. Print.css – Spezielles CSS zur Formatierung der
Druckausgabe
3 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

4. Ziele des Seminars
• Sensibilisierung für das Thema CSS
• Erste praktische Erfahrungen im Umgang
mit Cascading Style Sheets
• Motivation zur selbstständigen Festigung
und Erweiterung des erworbenen Wissens
4 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

5. 1 | Einführung und Grundlagen
Was sind
Cascading Style Sheets?
5 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

6. Was sind Cascading Style Sheets?
CSS ist eine deklarative Stylesheet-Sprache für
strukturierte Dokumente, die vor allem zusammen
mit HTML eingesetzt wird. CSS legt dabei fest, wie
ein besonders ausgezeichneter Inhalt oder Bereich
dargestellt werden soll, mit anderen Worten,
man trennt den eigentlichen Inhalt von der
optischen Gestaltung.
Quelle: Wikipedia
6 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

7. Aufbau einer Webseite
Interaktion (Javascript)
Styling (CSS)
Inhalt (HTML)
7 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

8. Das alte Modell
8 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

9. Das alte Modell
9 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

10. Das aktuelle Modell
10 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

11. Vorteile
• Leichter zu editieren
• Schnellerer Seitenaufbau
• Geringes Datenvolumen
• Barrierefreies Webdesign
• Google-freundlich!
11 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

12. Zusammenfassung
• Cascading Style Sheets sind
Formatierungen, mit denen sich das
Erscheinungsbild einer Website festlegen
lässt.
• Diese Formatierungen werden vom
eigentlichen Inhalt getrennt.
12 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

13. 6 | CSS-Eigenschaften
Das Box Modell
13 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

14. Das Box Modell
Beschreibt, wie sich die Breite von
Block-Elementen, unter Berücksichtung
verschiedener zusätzlicher Style-Angaben
berechnen lässt.
Wichtig für die pixelgenaue Positionierung
von Elementen!
14 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

15. Das Box Modell
15 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

16. Das Box Modell
Ein Beispiel:
div.box { width:300px; border:1px;!
! ! ! ! !padding: 10px; margin: 10px; }!
Tatsächliche Breite:
300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 342px
16 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

17. Das Box Modell
„Box Model Bug“ im Internet Explorer
IE 6 addiert Innenabstände (padding) und
Rahmenbreite (border) nicht zur Breite
hinzu!
Tatsächliche Breite im IE:
300px + (2 x 1px) + (2 x 10px) + (2 x 10px) = 320px (!)
17 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009

18. Typischer Workflow
Photoshop-Layout HTML-Rohbau CSS-Entwicklung
18 / 57 Cascading Style Sheets (CSS)
Seminar, 09. und 10. Februar 2009