CSS - Cascading Style Sheets - Übungen

  • Wie kann ich einen Text in die Mitte der Seite bekommen?
  • Wie kann man ein Hintergrundbild einbringen?
  • Wie kann ich die Textgröße ändern?
  • Wie kann ich die Textfarbe ändern?

All diese Fragen werden heutzutage beantwortet mit CSS (Cascading Style Sheets).
CSS können Sie wie folgt nutzen.

Aufgabe 1: Übernehmen Sie die folgenden Zeilen in Ihre HTML-Datei!

<head>
 
  <!-- Hier stehen title und meta Tag etc. -->
 
  <style type="text/css">
 
     /* Dieses ist ein Kommentar.
        An dieser Stelle im Quelltext
        stehen nach dieser Übung die Formatierungen der Seite */
 
  </style>
 
</head>
Stylesheets in HTML-Seiten einbinden, siehe http://de.selfhtml.org/css/formate/einbinden.htm
Kommentare in CSS, siehe http://www.script-inside.de/Css/All_klas/komment.php

Aufgabe 2: Ändern Sie den Schrifttyp für die ganze HTML-Seite auf "verdana"!

Die ganze sichtbare Seite befindet sich innerhalb des body-Tags. Alle Formatierungen, welche für die ganze Seite gelten sollen, müssen wir also für das body-Tag vornehmen.
Wenn z.B. innerhalb des body-Tags der Schrifttyp Times angezeigt werden soll und die Schrift die Farbe grün haben soll, dann macht man das wie folgt:
body
{
  font-family: Times;
  color:       green;
}
Wichtig: Die obigen Zeilen stehen zwischen den style Tags im Header (siehe vorherige Aufgabe)!!! Auch das Wort body gehört mit zu den zu kopierenden Zeilen, denn Sie wollen ja den body der HTML-Seite formatieren.

Aufgabe 3: Fügen Sie ein Hintergrundbild mit CSS ein!

siehe z.B. http://www.mediaevent.de/css/background.html
Die folgende Zeile fügen Sie bitte den Formatierungen des body-Tags hinzu mit einem eigenen Bild!
background: url(meinbild.gif) center top;
Wenn das Hintergrundbild nicht "gekachelt" werden soll, dann können Sie zusätzlich folgende Eigenschaft hinzufügen:
background-repeat: no-repeat;
Für das Ausfüllen des ganzen Desktops mit diesem Bild (d.h. Skalieren, Vergößern bzw. Verkleinern) gibt es die folgende Eigenschaft:
background-size: cover;

Aufgabe 4: Zentrieren Sie den Text für die ganze Seite!

Fügen Sie die folgende Zeile der Formatierung des body-Tags hinzu!
text-align: center;

Aufgabe 5: Ändern Sie die Textfarbe für Absätze!

Was ist ein Absatz? Alles was zwischen den div-Tags steht!
Wo finde ich die richtigen Farben? z.B. hier http://colorschemedesigner.com/
Fügen Sie jetzt die folgende Formatierung den bereits existierenden Formatierungen hinzu!
Ändern Sie den Farbton entsprechend Ihrer Vorstellung.
div
{
  color: #00ff00;
}

Aufgabe 6: Ändern Sie die Hintergrundfarbe für das div-Tag!

Fügen Sie die folgende Zeile mit einer Farbe Ihrer Wahl der div-Formatierung hinzu:
background-color: #777777;

Aufgabe 7: Verwenden Sie zwei unterschiedlich formatierte Absätze!

Das folgende Beispiel zeigt zwei ganz einfache Absätze für das leichtere Verständnis der Zusammenhänge:
<div>
  lala
</div>
 
<div>
  haha
</div>
Diese beiden Absätze werden unterschieden über so genannte Identifier, welche den Tags hinzugefügt werden, z.B. id="singen und id="lachen":
<div id="singen">
  lala
</div>
 
<div id="lachen">
  haha
</div>
Diese beiden Absätze kann man jetzt wie folgt mit CSS formatieren:
#singen
{
  color: green;
}
 
#lachen
{
  color: red;
}

Aufgabe 8: Alle Absätze sollen gleiche Formate aufweisen!

Anstelle der Identifier werden zum Zweck einer einheitlichen Formatierung so genannte Klassen verwendet. Alle div-Tags, welche die gleiche Klasse verwenden, bekommen so das gleiche Format.
Beispiel:
<div class="singen">
  lala
</div>
 
<div class="singen">
  haha
</div>
Jetzt kann man also im CSS-Teil der Seite einfach nur die Klasse "singen" mit den gewünschten Formatierungen versehen und beide Absätze erscheinen im gleichen Layout. Bei Klassen steht anstelle des Zeichens "#" einfach ein Punkt ".".
.singen
{
  color: green;
}
 
Diese Form der Formatierung erscheint z.B. besonders sinnvoll für Farben und Schriftgrößen, welche mit beliebigen Tags kombiniert werden können.
.rot
{
  color: red;
}
z.B. <h1 class="rot">Rote Überschrift</h1>
Eine Beschreibung der Formatierung von Schriftgrößen mit CSS finden Sie z.B. hier:

Aufgabe 9: Verwendung von div und span mit css-Formatierung

Das Div-Tag kennen Sie bereits. Das Span-Tag wird verwendet zur Formatierung von Textbestandteilen, z.B. ein unterstrichenes oder ein fett geschriebenes Wort oder ein. Erstellen Sie folgende HTML-Ausgabe unter Verwendung der Tags div und span. Formatieren Sie die Ausgabe mit Cascading Style Sheets!
DivSpanCss.JPG




Für Fortgeschrittene!


Aufgabe 10: Lagern Sie die CSS-Formatierungen in eine separate Datei aus!

Um die gleichen Formatierungen auf allen von Ihnen erstellten Seiten nutzen zu können, müssen diese in einer separaten Datei stehen! Wie macht man das?
<link rel="stylesheet" type="text/css" href="meine_formate.css">
Hinweis:
  • Die Auslagerung der CSS-Formatierungen in eine eigene Datei ist nur nützlich, wenn die Formatierungen auf mehreren Seiten verwendet werden sollen, ansonsten sollte man darauf verzichten!

  • Wenn Sie Ihre HTML-Seiten zusammen mit ausgelagerten CSS-Dateien verwenden und weiter daran arbeiten, kann es manchmal Probleme mit der automatischen Aktualisierung der Anzeige geben. Ein Neustart des Browsers oder zumindest das erneute Öffnen der HTML-Datei hilft meistens.


Für Könner!

Aufgabe 11: Formatieren Sie die folgende Tabelle mittels CSS!

Voraussetzung: Kenntnisse zur Erstellung von Tabellen, siehe entsprechendes Kapitel!
z.B.
  • unterschiedliche Farben für Kopfzeile und verschiedene Spalten
  • ansprechender Rahmen
  • Zentrierung der Texte
  • gleich breite Spalten
  • usw.
<table>
 
  <tr>
    <th></th>
    <th>USA</th>
    <th>Deutschland</th>
    <th>China</th>
  </tr>
 
  <tr>
    <td>Bevölkerung (Millionen)</td>
    <td>310</td>
    <td>81</td>
    <td>1366</td>
  </tr>
 
  <tr>
    <td>Fläche (Quadratkilometer)</td>
    <td>9.826.675</td>
    <td>357.168</td>
    <td>9.571.302</td>
  </tr>
 
</table>

Aufgabe 12: Erstellen Sie unterschiedliche CSS-Dateien für die Anzeige auf dem Bildschirm und für den Druck!

Bei der Anzeige auf dem Bildschirm bereitet es keine Probleme, wenn eine Seite einen dunklen Hintergrund aufweist. Für den Druck sollte die gleiche Seite aber doch lieber einen hellen Hintergrund mit dunkler Schrift aufweisen. Hierfür benötigt man verschiedene Formatierungen der gleichen Seite. Wie macht man das?

Aufgabe 13: Überprüfen Sie Ihre CSS-Formatierungen

Auch zur Überprüfung Ihrer CSS-Formatierungen gibt es einen Validator:
Bitte überprüfen Sie hiermit die Ergebnisse Ihrer Übungen!

Aufgabe 14: CSS-Generatoren

Im Internet gibt es einige sehr gute CSS-Generatoren. Probieren Sie z.B. mal den folgenden aus:
Weitere:

Aufgabe 15: Realisieren Sie die folgende Mitteilung

Möglichst identisch bitte (Farben, Schriftart, Größe, Text-Umbrüche, ..., ohne den schwarzen Rahmen).
Die Meldung könnte z.B. auf Ihrem Smartphone in einer App als Popup-Window eingeblendet werden.
PopupMessage.png

Aufgabe 16: Noch Zeit? Weitere Tutorials abarbeiten

Die folgenden Seiten sind nur für Schüler mit einigen Vorkenntnissen interessant!