Übungen zu CSS

Inhalte

Einführung
- Repetition der wichtigsten Punkte zu HTML
CSS
Aufgabe

Einführung

Du hast bereits gelernt, wie du eine Seite mit HTML erstellst. Die Formatierung und das ganze optische Erscheinungsbild kann komplett mit CSS (Cascading Style Sheets) geregelt werden. Somit wird das Aussehen einer Seite komplett von deren Inhalt getrennt. So kannst du mit einer einzigen CSS-Datei alle deine HTML-Seiten formatieren.

Die folgende Seite wiederholt die Themen der Einführung. Wenn dir alles klar ist, kannst du gleich zum Auftrag springen.

↑nach oben

Repetition der wichtigsten Punkte zu HTML

Die folgenden, HTML-relevanten Begriffe sollten dir bekannt sein. Zur Repetition, und weil wir diese weiter verwenden wollen, werden sie jedoch nochmals kurz erklärt:

Seitenaufbau: Am einfachsten ist der Aufgabu einer Seite mit verschachtelten <div>-Tags.
Tag: Mit T. wird ein HTML-Element bezeichnet. Beispiele für Tags sind z.B. <div>Inhalt</div> oder auch <img src="bildpfad" alt="Bild">.

↑nach oben

CSS

CSS, eine Abkürzung für "Cascading Style Sheets" (engl. für stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen), ist eine Scriptsprache, die die Trennung von Design und Inhalt erlaubt. Während in HTML die Inhalte angelegt werden, wird die Seite anschliessend mit CSS formatiert. Im folgenden wird die Einbindung und Struktur von CSS dargestellt und anschliessend folgen verschiedene Möglichkeiten, um Stile auf HTML-Elemente anzuwenden.

↑nach oben

Einbinden

CSS-Angaben können entweder direkt in einer HTML-Datei (üblicherweise im <head>-Bereich) eingebaut werden.

Definition im Header

Der folgende Code-block zeigt die CSS-Definition im Header:

<style type="text/css">
<!--

[An dieser Stelle folgen die style-Angaben]

-->
</style>

Zu beachten sind die HTML-Kommentare. Sie verhindern ein irrtümliches Interpretieren von CSS-Angaben als HTML durch den Browser.

Definition in eigenem Dokument

Alle CSS-Angaben erfolgen dabei in einem (oder mehreren) separaten Dokument.

Ebenfalls im Headerbereich wird nun die Datei über den folgenden Befehl eingebunden:

<link href="[Dateipfad]" rel="stylesheet" type="text/css" media="[Medientyp]" >

Für jede CSS-Datei muss dabei eine solche Zeile eingefügt werden. Eine CSS-Datei kann dabei jedoch in beliebig viele HTML-Dateien eingebunden werden. Der Vorteil dieser Methode ist, dass das Design einer Homepage zentral definiert verändert werden kann.

Eine Kombination der beiden Methoden ist grundsätzlich möglich, aber selten empfehlenswert.

↑nach oben

ID (speziell bei <div>-Tags)

Es können auch CSS-Eigenschaften für Tags mit einer bestimmten ID festgelegt werden. Dies wird besonders im Zusammenhang mit <div>-Tags verwendet, welche die Seite strukturieren (vgl. den Auftrag unten). Gehen wir von der folgenden Seitenstruktur aus:

<div id="container">
	<div id="header"></div>
	<div id="navigation"></div>
	<div id="content"></div>
</div>

Wenn wir nun ein bestimmtes <div>-Tag formatieren wollen, können wir das mit der Struktur #[Element-ID] tun. Wollen wir zum Beispiel den Container zentriert und mit gelbem Hintergrund definieren, geschieht dies über den folgenden Code:

#container {
	position:relative;
	margin: 0 auto;
	background: #FFFF00;
}

So kann jeses <div>-Tag genau platziert werden. Am besten verwendest du dafür die Attribute left, top, height und width.

↑nach oben

Klassen

Als dritte Variante kannst du CSS-Klassen definieren, welche du schliesslich im HTML auf ein Tag anwenden kannst. So kannst du zum Beispiel eine Klasse "meldung" erfassen, um damit wichtige Informationen zu kennzeichnen:

.meldung {
	color: #FF0000;
	font-weight: bold;
	border: 1px solid bold;
}

Jeder Klassenname muss mit einem Punkt beginnen. Im HTML rufst du die Klasse folgendermassen auf (Absatz, auf den die Klasse "meldung" angewendet wird):

<p class="meldung">Das ist ein Absatz, der mit der Klasse "Meldung" formatiert ist.</p>

↑nach oben

Auftrag

Zeit: 40min in der Lektion / 30 min als Hausaufgabe

Gehe zu kadr.ch/css, und erstelle eine neue Seite. Merke dir unbedingt die Nummer deiner neuen Seite, welche dir gross angezeigt wird. Wenn du willst, kannst du dich auch registrieren, dann kannst nur du selbst deine Seite bearbeiten.

Wie sicher fühlst du dich im Umgang mit CSS? Wähle eine der untenstehenden Übungen zu CSS.

Weitere Informationen zu den CSS-Befehlen findest du unter http://www.css4you.de/ (deutsch), kadr.ch/css-referenz (englisch) oder direkt auf der Bearbeitungsseite unter "CSS-Referenz"

Schwierigkeitsgrad 1	Schwierigkeitsgrad 2	Schwierigkeitsgrad 3
Bearbeite die folgenden Aufgaben der Reihe nach. Kopiere den CSS- und den HTML-Code in die entsprechenden Felder auf deiner Seite. CSS kennenlernen - spiele etwas im CSS herum, um die verschiedenen Befehle kennen zu lernen. Ändere die Hintergrundfarbe zu einer dunklen, edel wirkenden, Farbe. Formatiere den Container so, dass er in der Mitte steht. Die Schrift auf deiner Seite soll komplett in Arial und etwas kleiner erscheinen. Die Schrift im Inhaltsbereich soll etwas Abstand zum Rahmen erhalten. Formatiere die Links neu. Gestalte den Header mit einer Hintergrundfarbe und einer anderen Schrift. Wenn du willst, kannst du auf kadr.ch/verlauf einen Verlauf für den Hintergrund erstellen.	Kopiere nur den HTML-Code und schreibe den ganzen CSS-Code dazu selbst. Gestalte eine ansprechende Seite. Folgende Tipps könnten dir dabei helfen. Wähle eine geeignete Hintergrundfarbe Zentriere den Container Text sollte etwas Abstand zum Rand erhalten Gestalte einen attraktiven Header	Erstelle eine eigene HTML-Struktur und füge den Beispieltext ein. Gestalte mit CSS eine ansprechende Seite. Du kannst dich an den gegebenen Beispielen dieses Dokuments und an den angegebenen Referenz-Seiten orientieren.

Schwierigkeitsgrad 1

Schwierigkeitsgrad 2

Schwierigkeitsgrad 3

Bearbeite die folgenden Aufgaben der Reihe nach.

Kopiere den CSS- und den HTML-Code in die entsprechenden Felder auf deiner Seite.
CSS kennenlernen - spiele etwas im CSS herum, um die verschiedenen Befehle kennen zu lernen.
Ändere die Hintergrundfarbe zu einer dunklen, edel wirkenden, Farbe.
Formatiere den Container so, dass er in der Mitte steht.
Die Schrift auf deiner Seite soll komplett in Arial und etwas kleiner erscheinen.
Die Schrift im Inhaltsbereich soll etwas Abstand zum Rahmen erhalten.
Formatiere die Links neu.
Gestalte den Header mit einer Hintergrundfarbe und einer anderen Schrift. Wenn du willst, kannst du auf kadr.ch/verlauf einen Verlauf für den Hintergrund erstellen.

Kopiere nur den HTML-Code und schreibe den ganzen CSS-Code dazu selbst. Gestalte eine ansprechende Seite. Folgende Tipps könnten dir dabei helfen.

Wähle eine geeignete Hintergrundfarbe
Zentriere den Container
Text sollte etwas Abstand zum Rand erhalten
Gestalte einen attraktiven Header

Erstelle eine eigene HTML-Struktur und füge den Beispieltext ein.
Gestalte mit CSS eine ansprechende Seite.
Du kannst dich an den gegebenen Beispielen dieses Dokuments und an den angegebenen Referenz-Seiten orientieren.

Abgabe:
Sende mir den Link zu deiner Seite per Email.

↑nach oben

Quellcodes

CSS-Vorlage

body { background: #0000FF; } #container { position:relative; width:900px; } #header { border:1px solid #FFFFFF; text-align:right; font-size:40px; color:#FFFF00; height:100px; } #content { background:#FFFFFF; } .meldung { color:#FF0000; font-weight:bold; } a:link { color:#FF0000; } a:visited { color:#00FF00; } a:hover { color:#000000; }

HTML-Vorlage

<div id="container"> <div id="header">Seite von [dein Name]</div> <div id="content"> <h1>CSS-Testseite</h1> <p class="meldung">Diese Seite ist im Informatikunterricht an der Schule Musterfingen entstanden</p> <h2>Einführung</h2> <p>Das ist die CSS-Testseite von [dein Name]. Auf dieser Seite werden die Möglichkeiten von CSS getestet und ausprobiert. Geübt werden verschiedene Formatierungsmöglichkeiten an einem Märchen der Gebrüder Grimm.</p> <h1>Rotkäppchen</h1> <p>Quelle: <a href="http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm">http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm</a>, 30.10.2012</p> <p>Es war einmal eine kleine süsse Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Grossmutter, die wusste gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hiess es nur das Rotkäppchen. </p> <p>Eines Tages sprach seine Mutter zu ihm: "Komm, Rotkäppchen, da hast du ein Stück Kuchen und eine Flasche Wein, bring das der Grossmutter hinaus; sie ist krank und schwach und wird sich daran laben. Mach dich auf, bevor es heiss wird, und wenn du hinauskommst, so geh hübsch sittsam und lauf nicht vom Weg ab, sonst fällst du und zerbrichst das Glas, und die Grossmutter hat nichts. Und wenn du in ihre Stube kommst, so vergiss nicht, guten Morgen zu sagen und guck nicht erst in allen Ecken herum." "Ich will schon alles gut machen", sagte Rotkäppchen zur Mutter, und gab ihr die Hand darauf. </p> <p>Die Grossmutter aber wohnte draussen im Wald, eine halbe Stunde vom Dorf. Wie nun Rotkäppchen in den Wald kam, begegnete ihm der Wolf. Rotkäppchen aber wusste nicht, was das für ein böses Tier war, und fürchtete sich nicht vor ihm. "Guten Tag, Rotkäppchen", sprach er. "Schönen Dank, Wolf." "Wo hinaus so früh, Rotkäppchen?" "Zur Grossmutter." "Was trägst du unter der Schürze?" "Kuchen und Wein: gestern haben wir gebacken, da soll sich die kranke und schwache Grossmutter etwas zugut tun und sich damit stärken." "Rotkäppchen, wo wohnt deine Grossmutter?" "Noch eine gute Viertelstunde weiter im Wald, unter den drei grossen Eichbäumen, da steht ihr Haus, unten sind die Nusshecken, das wirst du ja wissen", sagte Rotkäppchen. </p> <p>Der Wolf dachte bei sich: "Das junge zarte Ding, das ist ein fetter Bissen, der wird noch besser schmecken als die Alte: du musst es listig anfangen, damit du beide erschnappst." </p> <p>Da ging er ein Weilchen neben Rotkäppchen her, dann sprach er: "Rotkäppchen, sieh einmal die schönen Blumen, die ringsumher stehen, warum guckst du dich nicht um? Ich glaube, du hörst gar nicht, wie die Vöglein so lieblich singen? Du gehst ja für dich hin, als wenn du zur Schule gingst, und ist so lustig haussen in dem Wald".</p> <p>Rotkäppchen schlug die Augen auf, und als es sah, wie die Sonnenstrahlen durch die Bäume hin- und her tanzten und alles voll schöner Blumen stand, dachte es: "Wenn ich der Grossmutter einen frischen Strauss mitbringe, der wird ihr auch Freude machen; es ist so früh am Tag, dass ich doch zu rechter Zeit ankomme", lief vom Wege ab in den Wald hinein und suchte Blumen. Und wenn es eine gebrochen hatte, meinte es, weiter hinaus stände eine schönere, und lief darnach, und geriet immer tiefer in den Wald hinein. Der Wolf aber ging geradeswegs nach dem Haus der Grossmutter, und klopfte an die Türe. "Wer ist draussen?" "Rotkäppchen, das bringt Kuchen und Wein, mach auf." "Drück nur auf die Klinke", rief die Grossmutter, "ich bin zu schwach und kann nicht aufstehen." Der Wolf drückte auf die Klinke, die Türe sprang auf und er ging, ohne ein Wort zu sprechen, gerade zum Bett der Grossmutter und verschluckte sie. Dann tat er ihre Kleider an, setzte ihre Haube auf, legte sich in ihr Bett und zog die Vorhänge vor.</p> <p>Rotkäppchen aber war nach den Blumen herumgelaufen, und als es so viel zusammen hatte, dass es keine mehr tragen konnte, fiel ihm die Grossmutter wieder ein, und es machte sich auf den Weg zu ihr. Es wunderte sich, dass die Türe aufstand, und wie es in die Stube trat, so kam es ihm so seltsam darin vor, dass es dachte: "Ei, du mein Gott, wie ängstlich wird mir?s heute zumut, und ich bin sonst so gerne bei der Grossmutter!" Es rief "Guten Morgen", bekam aber keine Antwort. Darauf ging es zum Bett und zog die Vorhänge zurück: da lag die Grossmutter, und hatte die Haube tief ins Gesicht gesetzt und sah so wunderlich aus. </p> <p>"Ei, Grossmutter, was hast du für grosse Ohren!" "Dass ich dich besser hören kann." "Ei, Grossmutter, was hast du für grosse Augen!" "Dass ich dich besser sehen kann." "Ei, Grossmutter, was hast du für grosse Hände!" "Dass ich dich besser packen kann." "Aber, Grossmutter, was hast du für ein entsetzlich grosses Maul!" "Dass ich dich besser fressen kann." </p> <p>Kaum hatte der Wolf das gesagt, so tat er einen Satz aus dem Bette und verschlang das arme Rotkäppchen. Wie der Wolf sein Gelüsten gestillt hatte, legte er sich wieder ins Bett, schlief ein und fing an überlaut zu schnarchen. </p> <p>Der Jäger ging eben an dem Haus vorbei und dachte: "Wie die alte Frau schnarcht, du musst doch sehen, ob ihr etwas fehlt." Da trat er in die Stube, und wie er vor das Bette kam, so sah er, dass der Wolf darin lag. "Finde ich dich hier, du alter Sünder", sagte er, "ich habe dich lange gesucht." Nun wollte er seine Büchse anlegen, da fiel ihm ein, der Wolf könnte die Grossmutter gefressen haben, und sie wäre noch zu retten: schoss nicht, sondern nahm eine Schere und fing an, dem schlafenden Wolf den Bauch aufzuschneiden. Wie er ein paar Schnitte getan hatte, da sah er das rote Käppchen leuchten, und noch ein paar Schnitte, da sprang das Mädchen heraus und rief: "Ach wie war ich erschrocken, wie war?s so dunkel in dem Wolf seinem Leib!" Und dann kam die alte Grossmutter auch noch lebendig heraus und konnte kaum atmen. Rotkäppchen aber holte geschwind grosse Steine, damit füllten sie dem Wolf den Leib, und wie er aufwachte, wollte er fortspringen, aber die Steine waren so schwer, dass er gleich niedersank und sich totfiel.</p> <p>Da waren alle drei vergnügt; der Jäger zog dem Wolf den Pelz ab und ging damit heim, die Grossmutter ass den Kuchen und trank den Wein, den Rotkäppchen gebracht hatte, und erholte sich wieder, Rotkäppchen aber dachte: "Du willst dein Lebtag nicht wieder allein vom Weg ab in den Wald laufen, wenn dir?s die Mutter verboten hat." </p> <p>Es wird auch erzählt, dass einmal, als Rotkäppchen der alten Grossmutter wieder Gebackenes brachte, ein anderer Wolf ihm zugesprochen und es vom Wege habe ableiten wollen. Rotkäppchen aber hütete sich und ging gerade fort seines Wegs und sagte der Grossmutter, dass es dem Wolf begegnet wäre, der ihm guten Tag gewünscht, aber so bös aus den Augen geguckt hätte: "Wenn?s nicht auf offener Strasse gewesen wäre, er hätte mich gefressen." "Komm", sagte die Grossmutter, "wir wollen die Türe verschliessen, dass er nicht herein kann." </p> <p>Bald darnach klopfte der Wolf an und rief: "Mach auf, Grossmutter, ich bin das Rotkäppchen, ich bring dir Gebackenes." Sie schwiegen aber still und machten die Türe nicht auf: da schlich der Graukopf etlichemal um das Haus, sprang endlich aufs Dach und wollte warten, bis Rotkäppchen abends nach Hause ginge, dann wollte er ihm nachschleichen und wollt?s in der Dunkelheit fressen. Aber die Grossmutter merkte, was er im Sinn hatte. </p> <p>Nun stand vor dem Haus ein grosser Steintrog, da sprach sie zu dem Kind: "Nimm den Eimer, Rotkäppchen, gestern hab ich Würste gekocht, da trag das Wasser, worin sie gekocht sind, in den Trog." Rotkäppchen trug so lange, bis der grosse, grosse Trog ganz voll war. Da stieg der Geruch von den Würsten dem Wolf im die Nase, er schnupperte, und guckte hinab, endlich machte er den Hals so lang, dass er sich nicht mehr halten konnte und anfing, zu rutschen: so rutschte er vom Dach herab, gerade in den grossen Trog hinein, und ertrank. Rotkäppchen aber ging fröhlich nach Haus, und tat ihm niemand etwas zuleid.</p> </div></div>

Beispieltext

Rotkäppchen Quelle: http://www.maerchenlexikon.de/Grimm/khm-texte/khm026.htm, 30.10.2012 Es war einmal eine kleine süsse Dirne, die hatte jedermann lieb, der sie nur ansah, am allerliebsten aber ihre Grossmutter, die wusste gar nicht, was sie alles dem Kinde geben sollte. Einmal schenkte sie ihm ein Käppchen von rotem Sammet, und weil ihm das so wohl stand und es nichts anders mehr tragen wollte, hiess es nur das Rotkäppchen. Eines Tages sprach seine Mutter zu ihm: "Komm, Rotkäppchen, da hast du ein Stück Kuchen und eine Flasche Wein, bring das der Grossmutter hinaus; sie ist krank und schwach und wird sich daran laben. Mach dich auf, bevor es heiss wird, und wenn du hinauskommst, so geh hübsch sittsam und lauf nicht vom Weg ab, sonst fällst du und zerbrichst das Glas, und die Grossmutter hat nichts. Und wenn du in ihre Stube kommst, so vergiss nicht, guten Morgen zu sagen und guck nicht erst in allen Ecken herum." "Ich will schon alles gut machen", sagte Rotkäppchen zur Mutter, und gab ihr die Hand darauf. Die Grossmutter aber wohnte draussen im Wald, eine halbe Stunde vom Dorf. Wie nun Rotkäppchen in den Wald kam, begegnete ihm der Wolf. Rotkäppchen aber wusste nicht, was das für ein böses Tier war, und fürchtete sich nicht vor ihm. "Guten Tag, Rotkäppchen", sprach er. "Schönen Dank, Wolf." "Wo hinaus so früh, Rotkäppchen?" "Zur Grossmutter." "Was trägst du unter der Schürze?" "Kuchen und Wein: gestern haben wir gebacken, da soll sich die kranke und schwache Grossmutter etwas zugut tun und sich damit stärken." "Rotkäppchen, wo wohnt deine Grossmutter?" "Noch eine gute Viertelstunde weiter im Wald, unter den drei grossen Eichbäumen, da steht ihr Haus, unten sind die Nusshecken, das wirst du ja wissen", sagte Rotkäppchen. Der Wolf dachte bei sich: "Das junge zarte Ding, das ist ein fetter Bissen, der wird noch besser schmecken als die Alte: du musst es listig anfangen, damit du beide erschnappst." Da ging er ein Weilchen neben Rotkäppchen her, dann sprach er: "Rotkäppchen, sieh einmal die schönen Blumen, die ringsumher stehen, warum guckst du dich nicht um? Ich glaube, du hörst gar nicht, wie die Vöglein so lieblich singen? Du gehst ja für dich hin, als wenn du zur Schule gingst, und ist so lustig haussen in dem Wald". Rotkäppchen schlug die Augen auf, und als es sah, wie die Sonnenstrahlen durch die Bäume hin- und her tanzten und alles voll schöner Blumen stand, dachte es: "Wenn ich der Grossmutter einen frischen Strauss mitbringe, der wird ihr auch Freude machen; es ist so früh am Tag, dass ich doch zu rechter Zeit ankomme", lief vom Wege ab in den Wald hinein und suchte Blumen. Und wenn es eine gebrochen hatte, meinte es, weiter hinaus stände eine schönere, und lief darnach, und geriet immer tiefer in den Wald hinein. Der Wolf aber ging geradeswegs nach dem Haus der Grossmutter, und klopfte an die Türe. "Wer ist draussen?" "Rotkäppchen, das bringt Kuchen und Wein, mach auf." "Drück nur auf die Klinke", rief die Grossmutter, "ich bin zu schwach und kann nicht aufstehen." Der Wolf drückte auf die Klinke, die Türe sprang auf und er ging, ohne ein Wort zu sprechen, gerade zum Bett der Grossmutter und verschluckte sie. Dann tat er ihre Kleider an, setzte ihre Haube auf, legte sich in ihr Bett und zog die Vorhänge vor. Rotkäppchen aber war nach den Blumen herumgelaufen, und als es so viel zusammen hatte, dass es keine mehr tragen konnte, fiel ihm die Grossmutter wieder ein, und es machte sich auf den Weg zu ihr. Es wunderte sich, dass die Türe aufstand, und wie es in die Stube trat, so kam es ihm so seltsam darin vor, dass es dachte: "Ei, du mein Gott, wie ängstlich wird mir?s heute zumut, und ich bin sonst so gerne bei der Grossmutter!" Es rief "Guten Morgen", bekam aber keine Antwort. Darauf ging es zum Bett und zog die Vorhänge zurück: da lag die Grossmutter, und hatte die Haube tief ins Gesicht gesetzt und sah so wunderlich aus. "Ei, Grossmutter, was hast du für grosse Ohren!" "Dass ich dich besser hören kann." "Ei, Grossmutter, was hast du für grosse Augen!" "Dass ich dich besser sehen kann." "Ei, Grossmutter, was hast du für grosse Hände!" "Dass ich dich besser packen kann." "Aber, Grossmutter, was hast du für ein entsetzlich grosses Maul!" "Dass ich dich besser fressen kann." Kaum hatte der Wolf das gesagt, so tat er einen Satz aus dem Bette und verschlang das arme Rotkäppchen. Wie der Wolf sein Gelüsten gestillt hatte, legte er sich wieder ins Bett, schlief ein und fing an überlaut zu schnarchen. Der Jäger ging eben an dem Haus vorbei und dachte: "Wie die alte Frau schnarcht, du musst doch sehen, ob ihr etwas fehlt." Da trat er in die Stube, und wie er vor das Bette kam, so sah er, dass der Wolf darin lag. "Finde ich dich hier, du alter Sünder", sagte er, "ich habe dich lange gesucht." Nun wollte er seine Büchse anlegen, da fiel ihm ein, der Wolf könnte die Grossmutter gefressen haben, und sie wäre noch zu retten: schoss nicht, sondern nahm eine Schere und fing an, dem schlafenden Wolf den Bauch aufzuschneiden. Wie er ein paar Schnitte getan hatte, da sah er das rote Käppchen leuchten, und noch ein paar Schnitte, da sprang das Mädchen heraus und rief: "Ach wie war ich erschrocken, wie war?s so dunkel in dem Wolf seinem Leib!" Und dann kam die alte Grossmutter auch noch lebendig heraus und konnte kaum atmen. Rotkäppchen aber holte geschwind grosse Steine, damit füllten sie dem Wolf den Leib, und wie er aufwachte, wollte er fortspringen, aber die Steine waren so schwer, dass er gleich niedersank und sich totfiel. Da waren alle drei vergnügt; der Jäger zog dem Wolf den Pelz ab und ging damit heim, die Grossmutter ass den Kuchen und trank den Wein, den Rotkäppchen gebracht hatte, und erholte sich wieder, Rotkäppchen aber dachte: "Du willst dein Lebtag nicht wieder allein vom Weg ab in den Wald laufen, wenn dir?s die Mutter verboten hat." Es wird auch erzählt, dass einmal, als Rotkäppchen der alten Grossmutter wieder Gebackenes brachte, ein anderer Wolf ihm zugesprochen und es vom Wege habe ableiten wollen. Rotkäppchen aber hütete sich und ging gerade fort seines Wegs und sagte der Grossmutter, dass es dem Wolf begegnet wäre, der ihm guten Tag gewünscht, aber so bös aus den Augen geguckt hätte: "Wenn?s nicht auf offener Strasse gewesen wäre, er hätte mich gefressen." "Komm", sagte die Grossmutter, "wir wollen die Türe verschliessen, dass er nicht herein kann." Bald darnach klopfte der Wolf an und rief: "Mach auf, Grossmutter, ich bin das Rotkäppchen, ich bring dir Gebackenes." Sie schwiegen aber still und machten die Türe nicht auf: da schlich der Graukopf etlichemal um das Haus, sprang endlich aufs Dach und wollte warten, bis Rotkäppchen abends nach Hause ginge, dann wollte er ihm nachschleichen und wollt?s in der Dunkelheit fressen. Aber die Grossmutter merkte, was er im Sinn hatte. Nun stand vor dem Haus ein grosser Steintrog, da sprach sie zu dem Kind: "Nimm den Eimer, Rotkäppchen, gestern hab ich Würste gekocht, da trag das Wasser, worin sie gekocht sind, in den Trog." Rotkäppchen trug so lange, bis der grosse, grosse Trog ganz voll war. Da stieg der Geruch von den Würsten dem Wolf im die Nase, er schnupperte, und guckte hinab, endlich machte er den Hals so lang, dass er sich nicht mehr halten konnte und anfing, zu rutschen: so rutschte er vom Dach herab, gerade in den grossen Trog hinein, und ertrank. Rotkäppchen aber ging fröhlich nach Haus, und tat ihm niemand etwas zuleid.

Quellen

Müller Peter, 2011, "Da grosse little Boxes Buch", "Webseiten gestalten mit HTML und CSS", Markt+Technik
http://de.wikipedia.org/wiki/Cascading_Style_Sheets, 24.10.2012
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active, 25.10.2012

Übungen zu CSS

Inhalte

Einführung

Repetition der wichtigsten Punkte zu HTML

CSS

Einbinden

Definition im Header

Definition in eigenem Dokument

Tags

<a>-Tag

ID (speziell bei <div>-Tags)

Klassen

Auftrag

Quellcodes

CSS-Vorlage

HTML-Vorlage

Beispieltext

Quellen