Übungen zu CSS

Inhalte


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

Tags

Mit CSS können die Eigenschaften für bestimmte Tags angepasst werden. Dabei ist die folgende Syntax zu beachten:

[Tag-Name] {
	[Attribut1]:[Wert1];
	[Attribut2]:[Wert2];
}

Wollen wir zum Beispiel für alle <input>-Tags (Formularfelder) eine blaue Schriftfarbe, einen roten Rand und die Schriftart Impact definieren, sieht der CSS-Code folgendermassen aus:

input {
	font-family: Impact;
	border: 1px solid #FF0000;
	color: #0000FF;
}

↑nach oben

<a>-Tag

Weitere Möglichkeiten zu detaillierterer Anpassung bietet das <a>-Tag mit sogenannten Pseudoklassen. Wenn du Eigenschaften für die Links auf deiner Seite anpassen und z.B. eine rote Schriftfarbe willst, so wird der folgende CSS-Block nichts bringen:

a {
	color:#FF0000;
}

Du musst das <a>-Tag weiter spezifizieren mit den Pseudoklassen :link, :visited, :hover, :activated. Dein CSS sieht dann z.B. folgendermassen aus:

a:visited {
	color:#FF0000;
	text-decoration:none;
}

Mit diesem Codeblock werden alle Links, welche der Benutzer bereits besucht hat, rot eingefärbt und die Unterstreichung entfernt. Der folgenden Übersicht kannst du entnehmen, welche Pseudoklasse welche Effekte hat.

  • a:link {...}: Legt die Eigenschaften von Links fest, welche noch nicht besucht wurden.
  • a:visited {...}: Legt die Eigenschaften von Links fest, welche bereits besucht wurden.
  • a:hover {...}: Legt die Eigenschaften von Links fest, wenn der Benutzer mit der Maus darüber fährt.
  • a:active {...}: Legt die Eigenschaften von Links fest, wenn der Benutzer mit der Maus darauf fährt und die Maustaste drückt.

Die :hover- und :active-Pseudoklassen funktionieren auch mit anderen Tags.

↑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.

  1. Kopiere den CSS- und den HTML-Code in die entsprechenden Felder auf deiner Seite.
  2. CSS kennenlernen - spiele etwas im CSS herum, um die verschiedenen Befehle kennen zu lernen.
  3. Ändere die Hintergrundfarbe zu einer dunklen, edel wirkenden, Farbe.
  4. Formatiere den Container so, dass er in der Mitte steht.
  5. Die Schrift auf deiner Seite soll komplett in Arial und etwas kleiner erscheinen.
  6. Die Schrift im Inhaltsbereich soll etwas Abstand zum Rahmen erhalten.
  7. Formatiere die Links neu.
  8. 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

HTML-Vorlage

Beispieltext

Quellen