Referat/Einführung in CSS

[Fabian St.]

Hi!

Ich muss für den Informatik Unterricht eine Stunde über CSS vorbereiten und die Einsatzmöglichkeiten an einem möglichst praxisnahen Beispiel aufzeigen. Die Ferien sind bald aus, als sollte ich mir mal überlegen, was ich machen werde ;-)

Ich habe mir also gedacht, dass ich am besten eine Website entwerfe, die einerseits auf möglichst viel CSS aufbaut, aber andererseits auch über CSS informieren soll. Nun stellt sich mir nur die Frage, was ich alles erwähnen sollte, immerhin gäbe es sehr viel darüber zu sagen.

Hier mal eine kurze Liste von Themen:

---------------------------------------------------------------------------------
1. Geschichte - Von wem und warum wurde CSS entwickelt?
2. Syntax - Wie sieht die Syntax einer einfachen Regel aus?
3. Vorteile - Warum solltet man CSS verwenden?
4. Browser Unterstützung / Probleme - Wie unser aller Freund IE die Träume der Webdesigner zu nichte macht
5. Zukunft - Wie siehts mit der Zukunft aus, d.h. CSS3, etc.
---------------------------------------------------------------------------------

Als Vorwissen haben die meisten nur ein bisschen HTML mit allerhand <font>-Tags :-/, sodass ich nicht zu tief einsteigen will, wie z.B. das Boxmodell.

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

Grüße,
Fabian St.

[N2O]

Hallo,

1. Geschichte - Von wem und warum wurde CSS entwickelt?

Würde ich nur ganz kurz anreißen. Das interessiert die meisten einfach nicht (W3C usw.)

Als Vorwissen haben die meisten nur ein bisschen HTML mit allerhand <font>-Tags :-/

Kenn ich nur zu gut :-(

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

Ich denke mal, es wäre am interessantesten, wenn du v.a. auf die strikte Trennung von Struktur/Inhalt (HTML) und Layout (CSS) eingehst. Ich hab das mal so gemacht, dass ich eine ganz "einfach" aussehende HTML-Datei (nur <h1></h1> usw.) gemacht und die dann gezeigt habe. Die meinten dann alle: "Boah, sieht die langweilig aus." Dann allerdings "aktivierte" ich die CSS-Datei und denen fielen fast die Augen aus, als sie sahen, wie viel man mit CSS machen kann. Inzwischen haben die das auch alle gelernt :-) *stolzsei*.

Also auf jeden Fall Interaktion statt bloßes Faktengebrabbel! ;-)

Gruß
Lachgas

[Fabian St.]

Hi N20!

1. Geschichte - Von wem und warum wurde CSS entwickelt?

Würde ich nur ganz kurz anreißen. Das interessiert die meisten einfach nicht (W3C usw.)

Stimmt, aber eine kurze Zusammenfassung wird es wohl geben.

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

Ich denke mal, es wäre am interessantesten, wenn du v.a. auf die strikte Trennung von Struktur/Inhalt (HTML) und Layout (CSS) eingehst. Ich hab das mal so gemacht, dass ich eine ganz "einfach" aussehende HTML-Datei (nur <h1></h1> usw.) gemacht und die dann gezeigt habe. Die meinten dann alle: "Boah, sieht die langweilig aus." Dann allerdings "aktivierte" ich die CSS-Datei und denen fielen fast die Augen aus, als sie sahen, wie viel man mit CSS machen kann. Inzwischen haben die das auch alle gelernt :-) *stolzsei*.

Genau das gleiche habe ich auch schon geplant ;-) Ein Beispiel hierzu findet sich btw schon auf meiner Website ganz unten. Anhand dieses Beispiels kann man die Vorteile von CSS m.E. am allerbesten zeigen.

Also auf jeden Fall Interaktion statt bloßes Faktengebrabbel! ;-)

Ja, natürlich :-)

Grüße,
Fabian St.

[Cyx23]

Hallo Fabian,

Anhand dieses Beispiels kann man die Vorteile von CSS m.E. am allerbesten zeigen.

interaktiv ja, allzu trocken soll es auch nicht werden.

Aber willst du wirklich das Abschalten von CSS und die zu erwartenden Folgen bei
einer CSS-basierten Seite als Argument für CSS verkaufen?

Vielleicht ginge es ähnlich wie beabsichtigt mit einem Wechsel auf ein anderes Layout,
da ließe sich wenns den Rahmen nicht sprengt noch das Thema Barrierefreiheit anreissen.

Und dann noch bei deiner Seite (dein Link) dieser Text dazu (Anzeige ohne CSS) auf
deiner Seite, Zitat: "Um zu verdeutlichen, wie diese Seite im Netscape 4.X
aussehen würde, klicken Sie bitte auf diesen Link"

Sicher, mit Netscape 4 liesse sich einiges anr Etikettenschwindel betreiben, etwa
wenn du ihm tatsächlich dein nichtangepasstes CSS zukommen lassen würdest.

Richtiger wäre es m.E. aber wohl gerade bei einer Einführung in CSS die Auswirkungen
verschiedener Entscheidungen auf die Zugänglichkeit kurz zu diskutieren und nicht
die Verantwortung auf die ja so bösen Browserhersteller zu schieben.

Grüsse

Cyx23

[Cyx23]

Hallo,

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

4.2 Probleme von Netscape 4, IE 5, IE5.5.
4.3 Mozilla vs. Opera, Opera vs. Opera, usw. usw.

6. Ziele des W3C

7. Strategien i.d. Praxis
7.1 Verzicht auf Layoutqualität um "CSS" anzuwenden
7.2 CSS-Hacks um CSS trotz der Probleme anzuwenden
7.3 "Mischtechnik" mit HTML-Attributen (ggf. Beispiele, etwa heise.de)

Grüsse

Cyx23

[Fabian St.]

Hi Cyx23!

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

4.2 Probleme von Netscape 4, IE 5, IE5.5.
4.3 Mozilla vs. Opera, Opera vs. Opera, usw. usw.

6. Ziele des W3C

Das scheint mir noch einen Punkt Wert zu sein. Danke!

7. Strategien i.d. Praxis
   7.1 Verzicht auf Layoutqualität um "CSS" anzuwenden
   7.2 CSS-Hacks um CSS trotz der Probleme anzuwenden
   7.3 "Mischtechnik" mit HTML-Attributen (ggf. Beispiele, etwa heise.de)

Vielen Dank auch für deine weiteren Vorschläge, aber sie scheinen mir doch ein bisschen zu komplex für 45min zu sein. Wie gesagt, meine Mitschüler können ein bisschen HTML (oder zumindest das, was sie dafür halten) und wenn ich da mit dem Boxmodell-Hack oder mit dem Problem der unterschiedlichen Darstellung relativer Schriftgrößen komme, dann hört mir keiner mehr zu *g*

Grüße,
Fabian St.

[Cyx23]

Hallo Fabian,

Vielen Dank auch für deine weiteren Vorschläge, aber sie scheinen mir doch ein bisschen zu komplex für 45min zu sein. Wie gesagt, meine Mitschüler können ein bisschen HTML (oder zumindest das, was sie dafür halten) und wenn ich da mit dem Boxmodell-Hack oder mit dem Problem der unterschiedlichen Darstellung relativer Schriftgrößen komme, dann hört mir keiner mehr zu *g*

stimmt, 45min ist wohl zu kurz für sowas, womöglich gibts sowieso nach 20 Minuten schon
die ersten Anzeichen von Sauerstoffmangel und dein Vortrag muß sowieso aufgelockert werden.

Du kannst vielleicht wenn es dir wichtig ist den Bereich Praxis ganz kurz im Punkt 4 anlegen;
ich fände es zumindest dann fair den möglichen "Praxis-Schock" bei der Interpretation von CSS
anzudeuten wenn sich das Publikum noch weiter mit dem Thema beschäftigt.

In deinem Fall nehme ich mal an dass sich die Zuhörer dann eh noch an dich wenden können,
jedenfalls schonmal viel Spass (und Punkte?) mit der Geschichte!

Grüsse

Cyx23

[Fabian St.]

Hallo Cyx23!

stimmt, 45min ist wohl zu kurz für sowas, womöglich gibts sowieso nach 20 Minuten schon
die ersten Anzeichen von Sauerstoffmangel und dein Vortrag muß sowieso aufgelockert werden.

Woher weißt du, wie es in unserem Info-Raum aussieht *g* Die 34 Computer heizen den Raum wirklich brutal auf - im Sommer hatten wir mal 29°C drinnen ;-)

Du kannst vielleicht wenn es dir wichtig ist den Bereich Praxis ganz kurz im Punkt 4 anlegen;
ich fände es zumindest dann fair den möglichen "Praxis-Schock" bei der Interpretation von CSS
anzudeuten wenn sich das Publikum noch weiter mit dem Thema beschäftigt.

Ja, das mache ich auf alle Fälle.

In deinem Fall nehme ich mal an dass sich die Zuhörer dann eh noch an dich wenden können,
jedenfalls schonmal viel Spass (und Punkte?) mit der Geschichte!

Den werde ich haben :-) Ich freue mich schon jetzt auf die weitaufgerissenen Augen des Lehrers, der außer seinen Frames Seiten gespickt mit <font>-Tags noch nie was anderes gesehen hat :-)
Wenn ich das ganze einigermaßen fertig habe, werde ich es hier mal verlinken...

Grüße,
Fabian St.

[Marc Reichelt]

Hallo Fabian,

---

1. Geschichte - Von wem und warum wurde CSS entwickelt?
2. Syntax - Wie sieht die Syntax einer einfachen Regel aus?
3. Vorteile - Warum solltet man CSS verwenden?
4. Browser Unterstützung / Probleme - Wie unser aller Freund IE die Träume der Webdesigner zu nichte macht
5. Zukunft - Wie siehts mit der Zukunft aus, d.h. CSS3, etc.

---

Besonders der 4. Punkt gefällt mir sehr! ;-)

Als Vorwissen haben die meisten nur ein bisschen HTML mit allerhand <font>-Tags :-/, sodass ich nicht zu tief einsteigen will, wie z.B. das Boxmodell.

Das mit dem Boxmodell würde ich ebenfalls weglassen, das gehört eher zur längerfristigen Erfahrung.

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

Besonders toll (und sehr schön anzusehen) ist es, eine relativ einfache (aber gut strukturierte) HTML-Seite zu zeigen, und dann zu zeigen wie sie mit einer CSS-Datei grafisch gestalten kann.
Wo das Menü vorher noch aus einer Liste bestand, kann CSS nun z.B. ein grafisch hochwertiges Menü (z.B. mit kleinen Grafiken als Listenpunkte, mit Hover-Effekt usw.) und schön aussehende Überschriften erzeugen (auch z.B. andere Schriftarten etc.).
Ebenfalls sehr schön anzusehen ist, wie sich die _gleiche_ HTML-Datei mit unterschiedlichen CSS-Dateien _völlig_ anders gestaltet...

Deiner Seite nach hast du in CSS doch relativ viel Erfahrung, da ist das alles ein Klacks! ;-)

Viel Glück!

Marc Reichelt || http://www.marcreichelt.de/

[Fabian St.]

Hi Marc!

Besonders der 4. Punkt gefällt mir sehr! ;-)

*g* Irgendwann muss die Missionarsarbeit ja anfangen :-)

Fallen euch sonst noch Themen ein, die behandelt werden sollten, um einen kompakten Überblick über CSS zu schaffen?

Besonders toll (und sehr schön anzusehen) ist es, eine relativ einfache (aber gut strukturierte) HTML-Seite zu zeigen, und dann zu zeigen wie sie mit einer CSS-Datei grafisch gestalten kann.
Wo das Menü vorher noch aus einer Liste bestand, kann CSS nun z.B. ein grafisch hochwertiges Menü (z.B. mit kleinen Grafiken als Listenpunkte, mit Hover-Effekt usw.) und schön aussehende Überschriften erzeugen (auch z.B. andere Schriftarten etc.).
Ebenfalls sehr schön anzusehen ist, wie sich die _gleiche_ HTML-Datei mit unterschiedlichen CSS-Dateien _völlig_ anders gestaltet...

Siehe auch https://forum.selfhtml.org/?t=98154&m=598219 :-)

Deiner Seite nach hast du in CSS doch relativ viel Erfahrung, da ist das alles ein Klacks! ;-)

Klar, das sollte kein Problem darstellen *g*

Grüße,
Fabian St.

[Marc Reichelt]

Hallo Fabian,

Siehe auch https://forum.selfhtml.org/?t=98154&m=598219 :-)

Schon längst gesehen - also mit so etwas sind dir 15 Punkte fast sicher!

Nur noch eines: Es wirkt beeindruckender, wenn die Seite _erst_ ohne CSS, und _dann_ mit CSS abgebildet wird. So machen Zauberkünstler das nun mal... ;-)

Marc Reichelt || http://www.marcreichelt.de/

[N2O]

Hallo,

Schon längst gesehen - also mit so etwas sind dir 15 Punkte fast sicher!

Ich finds auch immer lustig, wenn man den Lehrern (nicht nur in Info) überlegen ist ;-)

Das erkennt man dann immer an Resignation bzw. akzeptierendem Schweigen und der erwähnten 1+. ;-)

Gruß
Lachgas

[Gunnar Bittersmann]

Fabian,

Ebenfalls sehr schön anzusehen ist, wie sich die _gleiche_ HTML-Datei mit unterschiedlichen CSS-Dateien _völlig_ anders gestaltet...

Siehe auch https://forum.selfhtml.org/?t=98154&m=598219 :-)

Siehe auch http://www.csszengarden.com/ :-)

Gunnar

[Fabian St.]

Hallo!

Fabian,

Ebenfalls sehr schön anzusehen ist, wie sich die _gleiche_ HTML-Datei mit unterschiedlichen CSS-Dateien _völlig_ anders gestaltet...

Siehe auch https://forum.selfhtml.org/?t=98154&m=598219 :-)

Siehe auch http://www.csszengarden.com/ :-)

*g* Wenn ich aber auch soviele verschiedene Styles machen soll, bin ich lange, sehr lange beschäftigt :-)

Grüße,
Fabian St.