CSS Tutorial

Herzlich Willkommen beim CSS Tutorial. Mit diesem Tutorial soll dir der Einstieg in CSS entsprechend ermöglicht werden. Mit CSS hast du dabei ein mächtiges Werkzeug zur Gestaltung einer Webseite in der Hand. Du kannst dazu auch zahlreiche CSS-Snippets aus der CSS-Kategorie für deine Website nachbauen.

Dieses CSS Tutorial besteht dabei aus insgesamt 8 Kapiteln, die du dir hier am Bildschirm ansehen kannst. Alternativ steht das CSS Tutorial zudem auch als Download im PDF-Format (210 KB) zur Verfügung.

Ich wünsche dir schließlich viel Spaß beim Lesen und Ausprobieren.

 

1. Einleitung

Du hast also inzwischen deine erste Website ins Netz gestellt. Doch irgendwie wirkt alles im Grunde genommen ein wenig trocken und farblos. Mit HTML lässt sich die Website dabei auch nicht ansprechend gestalten, da HTML nicht für das Styling einer Website zuständig ist.

Genau hier setzen schließlich die Cascading Style Sheets, oder auch CSS abgekürzt, an. Mit CSS ist es dabei sehr leicht, deiner Website ein ansprechendes Layout zu verpassen. Somit kommt niemand um den Einsatz von CSS herum, wenn die Website etwas Farbe abbekommen soll.

Dieses Tutorial wurde dafür geschrieben, um dir einen Einblick in CSS und die Möglichkeiten, die sich damit eröffnen, zu ermöglichen. Um mit CSS zu beginnen, solltest du sich daher bereits ein wenig mit HTML auskennen. Sollte das hingegen noch nicht der Fall sein wäre es ratsamer, dass du dir zuerst das HTML Tutorial anschaust.

Ähnlich wie beim Erstellen von Webseiten generell, benötigst du im Grunde genommen nur einen Texteditor und einen Browser.

Und nun wünsche ich dir schließlich viel Spaß beim Lesen dieses Tutorials und beim Ausprobieren der Beispiele, die du in dieser Lektüre findest.

 

2. CSS einsetzen, und wie es funktioniert

CSS ist HTML dabei gar nicht mal so unähnlich. Viele Eigenschaften von CSS gleichen folglich denen von HTML. Doch gibt es auch einige Unterschiede, bspw. in der Anwendung. In diesem Kapitel erkläre ich dir zuerst, wie CSS angewandt wird.

 

2.1 CSS-Syntax

Die CSS-Syntax wird immer in drei Teilen betrachtet und ist dabei wie folgt aufgebaut:

selector { eigenschaft: wert; }

 

Beachte dabei bitte die Verwendung der spitz zulaufenden Klammern und auf das Semikolon am Ende jedes Wertes.

Beispiel:

body { background-color: lightblue; }

 

2.2 Die CSS-Syntax anwenden

Wie schon erwähnt, ist CSS ähnlich aufgebaut wie HTML. Dabei gibt es mehrere Möglichkeiten, CSS in die Webseite einzubauen:

 

2.2.1 Methode 1: als Tag (In-document)

Mit dem HTML Tag <style> lässt sich das CSS dabei auf das gesamte Dokument anwenden.

Beispiel:

<html>
 <head>
   <title>CSS In-document einbinden</title>
   <style type="text/css">
     body {background-color: lightblue;}
   </style>
 </head>
 <body>
 ...
 </body>
</html>

 

Erläuterung:
Mit diesem Beispiel wird folglich eine Website erzeugt, die einen hellblauen Hintergrund hat. Wählst du statt des body-selectors beispielsweise den für einen Absatz (p), so würde diese Auswahl dabei für das gesamte HTML Dokument gelten.

 

2.2.2 Methode 2: Als Attribut (In-line)

Du kannst CSS dabei auch per Attribut einbinden. Dazu wird dem HTML Tag die entsprechende CSS Definition als Attribut hinzugefügt.

Beispiel:

<html>
 <head>
   <title>CSS In-line einbinden</title>
 </head>
 <body style="background-color: lightblue;">
 ...
 </body>
</html>

 

Erläuterung:
Auch mit diesem Beispiel wird dazu wieder eine Webseite mit einem hellblauen Hintergrund erzeugt. Der Unterschied bei dieser Methode ist, dass CSS hier als Attribut dem HTML-Tag hinzugefügt wird. So lassen sich bspw. für einzelne Absätze verschiedene Layouts definieren. Diese Methode sollte nicht zu häufig angewandt werden, da hierdurch der HTML Quellcode der Website unnötig aufgebläht wird. Es ist daher ratsam, hauptsächlich die nachfolgend genannte, dritte Möglichkeit zu verwenden.

 

2.2.3 Methode 3: Extern (per Style Sheet)

Die dritte Methode, CSS in deine Webseite zu bringen, funktioniert dabei über ein externes Style Sheet. Diese Methode hat dazu den Vorteil, dass auf all deinen HTML Dokumenten dieses Style Sheet als Layout-Definition dienen kann, ohne dass du immer wieder einzelne Tags mit Attributen versehen, oder in jedem HTML Kopf dein komplettes Style Sheet einfügen musst. Das externe Verfahren ist daher auch jenes, welches ich dir ans Herz legen möchte.

Ein weiterer Vorteil dieser Methode ist, dass dabei Änderungen wesentlich einfacher gemacht werden können. Du brauchst hierzu nur die CSS Datei anpassen. Das Layout ändert sich daraufhin auf der gesamten Website, ohne dass du dabei jede einzelne Seite bearbeiten musst.

Um die externe Methode anwenden zu können, musst du zuerst eine neue Textdatei erstellen. Anschließend speicherst du sie mit der Dateiendung .css ab. Diese CSS-Datei legst du danach einfach auf deinen Webserver ab. In den HTML Dokumenten musst du dazu nun auf diese Datei verweisen. Das funktioniert dabei wie folgt.

Beispiel:

<html>
 <head>
   <title>CSS per Style Sheet einbinden</title>
   <link rel="stylesheet" type="text/css" href="stylesheet.css" />
 </head>
 <body>
 ...
 </body>
</html>

 

In der CSS Datei selbst definierst du anschließend das Layout deiner Webseite in der In-document-Methode. Fortan werden alle Webseiten, die dieses Style Sheet als Vorlage benutzen, von dieser einen, zentralen Datei aus gesteuert.

Du kannst darüber hinaus auch mehrere Stylesheet-Dateien in den <head>-Bereich deiner Website einbinden. So könntest du beispielsweise zwischen Layout- und Design-Elementen einen Unterschied machen und beides separat steuern. Allerdings solltest du darauf achten, nicht zu viele Separationen vorzunehmen, da eine große Anzahl von Elementen den Seitenzugriff verlangsamt.

 

2.3 Mehrere Eigenschaften miteinander kombinieren

Selbstverständlich können auch in CSS mehrere Eigenschaften eines selectors zusammen kombiniert werden.

Beispiel:

body {
      background-color: darkred;
      background-image: url("background.jpg");
      background-repeat: no-repeat;
      }

body { background: darkred url("background.jpg") no-repeat; }

 

Beide Beispiele zeigen dabei das gleiche Prinzip: Verschiedene Eigenschaften werden unter einem selector (in diesem Fall: body) zusammengefasst.

Im Endeffekt musst du dabei selbst entscheiden, was du für übersichtlicher empfindest. Ich selbst präferiere das erste dieser Beispiele. Aber das ist Geschmackssache.

 


Anzeige


 

3. Farben und Hintergründe

Da du nun CSS anwenden kannst, möchtest du sicherlich auch schnell die ersten Dinge ausprobieren. Neben dem Inhalt ist natürlich auch das Aussehen der Webseite wichtig. Was dabei als erstes Auffällt, sind die Farben der Webseite und die Hintergrundmotive. Deren Einsatz wollen wir nun gemeinsam betrachten.

Bitte beachte, dass ab hier alle CSS-Beispiele nur noch als CSS-Element angegeben werden, ohne HTML-Aufbau. Diese CSS-Elemente kannst du so, wie sie sind, in deine Webseite übernehmen. Entweder im Inline Verfahren oder, was ratsamer wäre, über ein externes Stylesheet.

 

3.1 Hintergrundfarbe

Mit der Eigenschaft background-color: kannst du die Hintergrundfarbe eines Elementes bestimmen.

Beispiel:

body { background-color: lightblue; }
h1 { background-color: darkred; }

 

Erläuterung:

Mit diesen beiden Beispielen wird eine Webseite mit einem hellblauen Hintergrund und dunkelroter Hinterlegung der Überschriften angezeigt.

 

3.2 Vordergrundfarbe (oder auch: Textfarbe)

Die Vordergrundfarbe in CSS wird mit der Eigenschaft color: definiert.

Beispiel:

h1 { color: darkred; }
h2 { color: red; }
h3 { color: lightred; }

 

Erläuterung:
In diesem Beispiel werden für die drei Überschrift-Arten verschiedene Farben definiert. Die Überschrift erster Ebene wird dabei dunkelrot, die Überschrift zweiter Ebene rot und die Überschrift dritter Ebene hellrot angezeigt.

 

3.3 Hintergrundbilder

Um ein Hintergrundbild in deine Webseite einzufügen, musst du die CSS-Eigenschaft background-image: verwenden.

Beispiel:

body { background-image: url("image.jpg"); }
body { background-image: url("../grafiken/background.jpg"); }
body { background-image: url("http://www.deineurl.de/background.jpg"); }

 

Erläuterung:
Je nachdem, wo die Bilddatei, die du als Hintergrundbild verwenden möchtest, abgelegt worden ist, kannst du entsprechend den Pfad oder die URL verwenden. Liegt die Datei im gleichen Verzeichnis wie die CSS-Datei, kannst du auch einfach nur den Namen der Grafik angeben.

 

3.4 Hintergrundbild-Wiederholung definieren

CSS bietet gegenüber HTML viele verschiedene Möglichkeiten zur Wiederholung des Hintergrundbildes.

 

3.4.1 Horizontale Wiederholung

Mit CSS ist es möglich, das Hintergrundbild nur horizontal wiederholen zu lassen.

Beispiel:

body { background-repeat: repeat-x; }

 

3.4.2. Vertikale Wiederholung

Genau so ist es möglich, das Hintergrundbild nur vertikal zu wiederholen.

Beispiel:

body { background-repeat: repeat-y; }

 

3.4.3 Horizontale und vertikale Wiederholung

Ähnlich wie in HTML, last sich natürlich auch ein Kacheleffekt erzeugen, indem das Hintergrundbild sowohl horizontal als auch vertikal wiederholt wird.

Beispiel:

body { background-repeat: repeat; }

 

3.4.4 Keine Wiederholung

Selbstverständlich ist es mit CSS auch möglich, das Hintergrundbild nur einmal, ohne Wiederholung anzuzeigen.

Beispiel:

body { background-repeat: no-repeat; }

 

3.5 Fixierung des Hintergrundbildes

Es ist auch möglich, das Bild zusammen mit dem Text scrollen zu lassen, oder es auf dem Hintergrund zu fixieren. Der Unterschied ist der, dass bei einer Fixierung im Hintergrund das Hintergrundbild an der vorgegebenen Stelle stehen bleibt, während der Besucher über die Seite scrollt. Ist das Bild nicht fixiert, scrollt es zusammen mit den restlichen Elementen „nach oben“.

 

3.5.1 Hintergrundbild fixieren

Um das Hintergrundbild zu fixieren, also um es an der Stelle zu lassen, wo es steht muss folgende CSS-Eigenschaft verwendet werden.

Beispiel:

body { background-attachment: fixed; }

 

3.5.2 Hintergrundbild nicht fixieren

Soll das Hintergrundbild zusammen mit der Seite scrollen, wird hingegen folgende CSS-Eigenschaft verwendet.

Beispiel:

body { background-attachment: scroll; }

 

3.6 Positionierung eines Hintergrundbildes

Etwas, was mit reinem HTML so nicht möglich ist, wird durch den Einsatz von CSS hingegen kinderleicht: Die Positionierung eines Hintergrundbildes.

In der Standardeinstellung wird das Hintergrundbild im Browser links oben positioniert. Jedoch ist es auch möglich, mithilfe von CSS das Bild mittig oder rechts unten im Fenster darzustellen – oder eben an jeder Position, die du gerne hättest. Das funktioniert über den Tag background-position:.

Beispiel:

body { background-position: 100px 200px; }
body { background-position: 100% 100%; }
body { background-position: bottom left; }

 

Erläuterung:
Die Angabe der Koordinaten kann dabei als fester Wert erfolgen (in Pixel oder Zentimeter), in Prozent oder mit festen Angaben in Worten. Dabei wird im ersten Wert die Position vom linken Bildschirmrand, im zweiten Wert die Position vom oberen Bildschirmrand angegeben.

Für das erste Beispiel bedeutet dies, dass das Hintergrundbild 100 Pixel vom linken Bildschirmrand und 200 Pixel vom oberen Bildschirmrand entfernt ist. Im zweiten Beispiel hingegen ist das Bild sowohl 100% vom linken, als auch vom rechten Bildschirmrand entfernt (sprich: rechts unten). Das dritte Beispiel hingegen sagt, dass das Hintergrundbild unten links am Bildschirmrand positioniert sein soll.

 

4. Textformatierung

CSS bietet natürlich ebenso eine breite Palette zur Textformatierung an, ähnlich wie es bei Grafiken und Farben der Fall ist. In diesem Teil des Tutorials möchte ich dir zeigen, was so alles mit dem Text angestellt werden kann.

 

4.1 Schriftart auswählen

Schriftarten lassen sich in CSS recht einfach über die Eigenschaft font-family: auswählen.

Beispiel:

p { font-family: arial; }

h1 { font-family: verdana, arial, sans-serif; }

h2 { font-family: "times new roman", serif; }

 

Erläuterung:
Diese drei Beispiele bewirken dabei unterschiedliche Dinge. Das erste Beispiel wählt dabei einfach die Schriftart Arial für alle Standard-Texte aus.

Das zweite Beispiel hingegen wählt für alle Überschriften bevorzugt die Schriftart Verdana aus. Ist Verdana auf dem PC des Nutzers jedoch nicht verfügbar, wird die Schriftart Arial ausgewählt. Ist auch Arial nicht verfügbar, wird schließlich in Zeichensatz aus den serifenlosen Schriften ausgewählt.

Beispiel drei zeigt dabei, dass für die Überschrift die Schriftart Times New Roman gelten soll. Schriftarten, die Leerzeichen enthalten, müssen immer in Anführungszeichen stehen. Ist Times New Roman nicht verfügbar, würde in diesem Beispiel demzufolge eine andere Schriftart mit Serifen genommen werden.

 

4.2 Texte formatieren

CSS besitzt einige Möglichkeiten, die gewählten Schriftarten bzw. Texte zu formatieren.

 

4.2.1 Text ausrichten

Mit der Eigenschaft text-align: lässt sich der Text grundlegend ausrichten. Ähnlich wie bei dem HTML-Attribut lässt sich mit text-align: der Text in CSS linksbündig, rechtsbündig, zentriert oder in Blockschrift ausrichten.

Beispiel:

p { text-align: right; }
p { text-align: left; }
p { text-align: center; }
p { text-align: justify; }

 

4.2.2 Text einrücken

Mit CSS kannst du sogar bewerkstelligen, dass dein Text in der ersten Zeile um einen bestimmten Wert eingerückt wird.

Beispiel:

p { text-indent: 20px; }

 

Erläuterung:
Mit diesem Beispiel würde jeder Text, der mit dem HTML-Tag <p> eingeleitet wird, um 20 Pixel eingerückt werden.

 

4.2.3 Texte und Schriftarten formatieren

CSS bietet verschiedene Möglichkeiten, Texte hervorzuheben. Dazu gibt es drei Eigenschaften zur Auswahl: text-decoration, font-style oder font-weight.

Beispiel:

h1 { font-style: italic;
     font-weight: bold;
     text-decoration: overline;
   }

 

Erläuterung:
Mit diesem Beispiel würde die Überschrift kursiv, fett und überstrichen (ja, man kann Text mit CSS auch „überstreichen“) dargestellt werden.

 

Im Folgenden habe ich dazu noch eine Liste mit verschiedenen CSS Eigenschaften tabellarisch zusammengefasst.

 

CSS-Eigenschaft Erläuterung
text-decoration: underline; Unterstrichener Text
text-decoration: overline; „Überstrichener“ Text
text-decoration: line-through; Durchgestrichener Text
text-decoration: blink; Blinkender Text
font-style: italic; Kursiver Schriftstil
font-style: oblique; Schräggesteller Schriftstil
font-weight: bold; Fettgedruckt
font-weight: bolder; Extrafettgedruckt
font-weight: lighter; Dünngedruckt
font-weight: 100, 200, … , 900 Druckstil extra dünn (100) bis extra fett (900) in 100er-Schritten
font-weight: normal; normales Schriftgewicht
font-variant: small-caps; Schriftvariante kapital (kleine Großbuchstaben)
font-size: xx-small; winzige Schriftgröße
font-size: x-small; sehr kleine Schriftgröße
font-size: small; kleine Schriftgröße
font-size: medium; mittlere Schriftgröße
font-size: large; große Schriftgröße
font-size: x-large; sehr große Schriftgröße
font-size: xx-large; riesige Schriftgröße

 

Natürlich sind auch prozentuale, oder andere relative Angaben möglich, wie zum Beispiel:

 

1em ist dabei die vom Nutzer im Browser standardmäßig eingestellte Schriftgröße.

CSS Eigenschaft Erklärung
font-size: 1em;
word-spacing: 0.5em; Wortabstand 0.5em
letter-spacing: 0.3em; Zeichenabstand 0.3em
text-transform: capitalize; Wortanfänge sind Großbuchstaben
text-transform: uppercase; Nur Großbuchstaben
text-transform: lowercase; Nur Kleinbuchstaben

 

Du kannst hier ebenso auch feste Angaben wie bspw. px machen. Allerdings rate ich an dieser Stelle davon ab, wenn es dabei um Textformatierungen geht. Da immer häufiger über mobile Endgeräte auf eine Website zugegriffen wird, ist ein responsive Webdesign daher wesentlich sinnvoller.

 

4.3 Verweise (Links) gestalten

Auch Links lassen sich mit CSS ebenso einfach gestalten. In der folgenden Tabelle liste ich alle Eigenschaften, die du dabei verwenden kannst, auf und erläutere sie kurz. Im Grunde genommen kannst du die Links nach deinen eigenen Vorstellungen gestalten. Du kannst dabei die bereits bekannten Textformatierungen nutzen. Im Anschluss zeige ich dir dazu noch ein Anwendungsbeispiel.

 

CSS-Eigenschaft Erläuterung
a:link Verweis zu noch nicht besuchten Seiten
a:visited Verweis zu bereits besuchten Seiten
a:focus Link, der gerade den Fokus hat (z.B. beim „Durchspringen“ der Links mit der Tabulator-Taste)
a:hover Link, auf dem gerade der Mauszeiger ruht
a:active Gerade aktiver Link

 

Beispiel:

a:link { text-decoration: none; color: red; }
a:visited { text-decoration: none; color: red; }
a:focus { text-decoration: none; color: red; }
a:hover { text-decoration: underline; color: blue; text-transform: uppercase; }
a:active { text-decoration: underline; color: blue; text-transform: uppercase; }

 

Erläuterung:
Mit diesem Beispiel stellst du einen Link auf deiner Website dabei rot und nicht unterstrichen dar. Das gilt dabei sowohl für bereits besuchte, als auch für noch nicht besuchte Seiten.

Fährt der Benutzer jetzt aber mit dem Mauszeiger über den Link oder klickt ihn an, wird der Link unterstrichen und in blauer Farbe dargestellt. Dazu kommt, dass alle Buchstaben des Verweises in Großbuchstaben dargestellt werden.

Wie du siehst, lassen sich links so im Grunde genommen sehr frei formatieren. Das funktioniert übrigens mit so manchen Eigenschaften auch für andere selectoren. Beispielsweise könntest du Tabellenzellen beim Überfahren des Mauszeigers mit der Eigenschaft td:hover mit einer anderen Hintergrundfarbe versehen. Deiner Fantasie sind dabei keine Grenzen gesetzt.

 

 

5. Gruppierung von Elementen

Du willst bestimmte Textabschnitte besonders hervorheben? Du möchtest in Aufzählungslisten bestimmte Elemente extra kenntlich machen? Das ist mit CSS überhaupt kein Problem. Extra für solche Wünsche kann man mit CSS seine verschiedenen Elemente gruppieren. Dazu stehen die Eigenschaften class und id zur Verfügung.

 

5.1 Gruppieren von Elementen in Klassen

Nehmen wir für dieses Beispiel an, dass du ein Fußball-Fan bist. Auf deiner Homepage erstellst du eine Liste mit verschiedenen Verweisen zu verschiedenen Vereinen. Jetzt möchtest du, dass alle Links, die zum Verein Bayern München verweisen, in rot dargestellt werden und alle Links, die zum Hamburger Sportverein verweisen, in blau dargestellt werden. Mit einer Klassendefinition ist dies überhaupt kein Problem.

Beispiel:

<p>Bayern München</p>
 <ul>
   <li><a href="kader.htm" class="bayern">Kader von Bayern München</a></li>
   <li><a href="statistik.htm" class="bayern">Statistik des Clubs</a></li>
   <li><a href="tabelle.htm" class="bayern">Tabellenplatzentwicklung</a></li>
 </ul>

<p>Hamburger Sportverein</p>
 <ul>
   <li><a href="kader.htm" class="hsv">Kader vom HSV</a></li>
   <li><a href="statistik.htm" class="hsv">Statistik des Clubs</a></li>
   <li><a href="tabelle.htm" class="hsv">Tabellenplatzentwicklung</a></li>
 </ul>

 

In unserer CSS-Datei müssen wir den Klassen nun noch die entsprechenden Eigenschaften zuweisen.

 

Beispiel:

a.bayern { color: red; }
a.hsv { color: blue; }

a { color: green; }

 

Erläuterung:
Mit diesem Beispiel würden alle Links, die die Klasse bayern enthalten, rot angezeigt werden, während alle Links, die die Klasse hsv enthalten, blau angezeigt würden. Da du in diesem Beispiel Werder Bremen-Fan bist, werden alle normalen Links natürlich grün angezeigt.

 

In diesem Beispiel habe ich dabei nur die Farbe des Links angepasst. Du kannst aber auch die Aufzählungsliste an sich formatieren. Ich erkläre dabei in einem separaten Artikel, wie du Listen erstellen und gestalten kannst.

 

5.2 Einzelne Elemente hervorheben

Wenn du hingegen auf deiner Seite nur ein einzelnes Element hervorheben möchtest, solltest du die Eigenschaft id nutzen.

 

Beispiel:

<h1 id="css">CSS-Tutorial</h1>
<h2 id="k1">Kapitel 1</h2>
<h2 id="k2">Kapitel 2</h2>

 

In der CSS-Datei müssen wir nun die ID entsprechend formatieren.

 

Beispiel:

#css { color: darkred; text-transform: uppercase; }
#k1 { color: darkblue; text-transform: lowercase; }
#k2 { color: yellow; text-transform: lowercase; }

 

Erläuterung:
Mit id ist es dabei möglich, einzelne Elemente innerhalb deiner Webseite zu gestalten. Dabei kann jedes ID-Element nur einmal vorkommen. Der Einsatz dieser Eigenschaft ist immer dann sinnvoll, wenn du vereinzelt ein bestimmtes Element auf deiner Seite hervorheben oder anders gestalten möchtest.

 

5.3 Weitere Möglichkeiten zur Gruppierung von Elementen

Um nicht bestimmte Elemente von vornherein klassifizieren zu müssen, ist außerdem auch der Einsatz von <span> und <div> hilfreich. Diese beiden HTML Tags fügen der Website dabei nichts hinzu. So lassen sich einzelne Textpassagen oder ganze Listen einfach formatieren, ohne dass man dazu in der Webseite ein extra Element, wie z.B. eine Aufzählungsliste, anlegen müsste.


Beispiel:

<p><span class="red">Hervorhebungen</span> sind eine feine Sache, um dem Leser hierdurch etwas <span class="red">deutlich</span> zu machen.</p>

<div id="linksbuendig">
<p>Es ist jedoch natürlich auch möglich, komplette Bereiche, mit allem was dazugehört, auf einmal zu formatieren.</p>
</div>

<div id="rechtsbuendig">
<p>Oder man macht es schließlich ganz anders. Das ist einem dabei völlig selbst überlassen.</p>
</div>

 

Die CSS-Datei sieht dabei dann wie folgt aus:

Beispiel:

span.red { color: red; font-weight: bold; }

#linksbuendig { text-align: left; }
#rechtsbuendig { text-align: right; }

 

Erläuterung:
Meistens wird span dann eingesetzt, wenn es entsprechend einzelne Dinge innerhalb eines Elementes zum Hervorheben gibt. Das div-Element hingegen gebraucht man dann, wenn es komplette Elemente zum formatieren gibt. Mit Hilfe dieser beiden Tags lassen sich jedoch noch viel mehr Dinge anstellen. Doch dazu mehr in den kommenden Lektionen.

 

6. Kästchenmodell

CSS definiert dabei ein Kästchenmodell, oder auch Box-Modell genannt, um die einzelnen HTML Elemente herum. Dieses Modell besteht ferner aus mehreren Elementen, die ich nun näher erläutern möchte.

 

Anzeigebeispiel:

Kästchenmodell aus dem CSS Tutorial
Darstellung des CSS Kästchenmodells (anklicken zum Vergrößern).

 

Diese Abbildung zeigt, dass jedes HTML-Element (hier als „Inhalt“ gekennzeichnet) im Grunde genommen von verschiedenen Kästchen umgeben ist. CSS kann dabei jedes dieser Kästchen ansteuern und verändern, so dass sich individuelle und vielfältige Gestaltungsmöglichkeiten ergeben. Dabei ist es auch egal, was du verändern möchtest. Du kannst hierdurch den Außenabstand (margin), die Ränder (border), Innenabstände (padding) und den Inhalt (content) frei gestalten.

 

6.1 Außenabstand verändern

Der Außenabstand eines HTML-Elementes lässt sich im Folgenden mit dem Wert margin verändern.

Beispiel:

body { margin-top: 200px;
       margin-right: 100px;
       margin-left: 100px;
       margin-bottom: 200px;
     }

 

Erläuterung:
Wie du sehen kannst, besteht der Außenabstand dabei aus vier Teilen: Oben, Unten, Links und Rechts. Jeder diese Werte lässt sich schließlich verändern. In diesem Beispiel würde die Webseite erst bei 200 Pixeln unter dem oberen Bildschirmrand beginnen, dabei zum linken und zum rechten Seitenrand jeweils 100 Pixel Abstand halten und nach unten noch einmal 200 Pixel Abstand haben.

 

6.2 Innenabstand verändern

Auch die Innenabstände der Elemente lassen sich hierdurch verändern. Dazu dient der Wert padding.

Beispiel:

td { background: lightblue;
     padding-top: 10px;
     padding-right: 120px;
     padding-left: 100px;
     padding-bottom: 10px;
   }

 

Erläuterung:
In diesem Beispiel würde dabei alles, was in eine Tabellenzelle hineingeschrieben wird, 10 Pixel Abstand zum oberen Rand der Zelle haben, 120 Pixel Abstand zum rechten Rand, 100 Pixel zum linken Rand und noch einmal 10 Pixel zum unteren Rand halten. Dazu kommt, dass der Tabellenzellen-Hintergrund in hellblau dargestellt wird.

 

6.3 Rahmen erstellen und verändern

Mit CSS ist es dabei ein Leichtes, verschiedene Rahmen um einzelne HTML-Elemente herum zu bauen.

Beispiel:

h1 { border-style: dotted;
     border-color: red;
     border-width: thick;
   }

 

Erläuterung:
Hierdurch werden alle Überschriften mit einem gepunkteten, dicken Rahmen versehen. Der Rahmen hat dabei eine rote Farbe.

 

Weitere Anzeigemerkmale findest du im Folgenden:

CSS-Eigenschaft Erläuterung
border-style:  dotted; Gepunkteter Rahmen
border-style: dashed; Gestrichelter Rahmen
border-style: solid; Durchgezogener Rahmen
border-style: double; Doppelter, durchgezogener Rahmen
border-style: groove; Schattenwurf nach oben
border-style: ridge; 3D-Effekt
border-style: inset; Äußerer Schatten
border-style: outset; Innerer Schatten
border-width: thin; Dünner Rahmen
border-width: medium; Mittelstarker Rahmen
border-width: thick; Dicker Rahmen
Die Rahmenstärke lässt sich auch mit einer px-Angabe definieren.
border-top-color: blue; Obere Rahmenlinie ist blau
border-right-color: blue; Rechte Rahmenlinie ist blau
border-left-color: blue; Linke Rahmenlinie ist blau
border-bottom-color; Untere Rahmenlinie ist blau
border-color: red blue green black; Verkürzte Version der eben genannten Gestaltungsmöglichkeiten*

 

Tipp:
Ähnlich wie bei der border-color lässt sich schließlich auch für border-width und border-style die Angaben für die oberen, unteren, linken und rechten Rahmen separat definieren. Hierdurch stehen einem viele verschiedene Gestaltungsmöglichkeiten zur Auswahl.

* folgende Regeln sind dazu bei dieser verkürzten Version zu beachten:

Zwei Angaben:
Die erste Angabe bestimmt den Rahmentyp für oben und unten, die zweite Angabe dabei den Rahmentyp für links und rechts.

Drei Angaben:
Die erste Angabe bestimmt den Rahmentyp für oben, die zweite den Rahmentyp für links und rechts und die dritte Angabe schließlich den Rahmentyp für unten.

Vier Angaben:
Die erste Angabe bestimmt den Rahmentyp dabei für oben, die zweite für rechts, die dritte für unten und die vierte den Rahmentyp für links.

 


Anzeige


 

7. Das Floating-Modell

Du kennst das sicher aus einer Zeitung: Links oben im Artikel ist zum Beispiel ein Bild abgedruckt. Rechts daneben beginnt infolge der Text. Ist der Text länger, als das Bild hoch ist, wird der Text dabei unter dem Bild fortgesetzt. Du möchtest ein solches Erscheinungsbild ebenso auch für deine Website einrichten? Mit CSS ist das dabei kein Problem. Die Eigenschaft float sorgt dabei für einen Effekt, der genau so ist.

 

7.1 Ein float-Element definieren

Beispiel:

<div id="floating">
  <img src="bild.jpg" alt="Ein Bild">
</div>

 

In unserer CSS-Datei definieren wir schließlich die floating-Box:

Beispiel:

#floating {
            float:left;
            width: 200px;
          }

 

Erläuterung:
Wenn wir dieses Beispiel benutzen, um den Text um unser Bild herum „floaten“ zu lassen, ergibt sich dabei der Effekt, dass der Text sich rechts vom Bild befindet. Das hängt damit zusammen, dass wir das Bild als „links floatend“ eingestuft haben, oder anders gesagt: Das Bild befindet sich durch die Angabe float:left; demnach auf der linken Bildschirmseite.

Die Eigenschaft float kann entweder den Wert left oder den Wert right haben.

 

7.2 float stoppen

Manchmal ist es auch sinnvoll, nur eine Überschrift neben einem „floatenden“ Bild zu positionieren, den Text aber dennoch unter das Bild zu stellen. Dazu muss die Eigenschaft clear benutzt werden.

Beispiel:

<div id="floating">
  <img src="bild.jpg" alt="Ein Bild">
</div>

<h1>Dies ist ein Beispielbild</h1>

<p class="floatingstopp">Dieser Text wird dazu wieder unter dem Bild dargestellt.</p>

 

Unsere CSS-Datei ist dabei wie folgt aufgebaut:

Beispiel:

#floating {
            float: left;
            width: 200px;
          }

.floatingstopp { clear: both; }

 

Erläuterung:
Mit diesem Beispiel würde neben unserem Bild zudem die Überschrift „Dies ist ein Beispielbild“ erscheinen. Der Text hingegen wird nicht mehr neben dem Bild dargestellt, sondern unter dem Bild fortgesetzt.

Die Eigenschaft clear kann dabei folgende Werte haben: both, left oder right.

 

8. Elemente auf der Webseite positionieren

Ein weiterer, designtechnisch sehr nützlicher Vorteil von CSS ist, dass man Elemente frei auf der Webseite positionieren kann. Und das ist dabei noch nicht einmal schwer.

Man kann entweder eine absolute oder eine relative Positionierung wählen. Den Unterschied zwischen den beiden Möglichkeiten beschreibe ich dabei im Folgenden.

Die relative Positionierung wird dabei von der eigentlichen Stelle des Elementes aus berechnet, an dem es auf die Seite gesetzt wurde. Das heißt, wenn du bspw. ein Bild links oben in die Ecke setzt und dann die Position des Bildes relativ bestimmst, bewegst du dieses Bild von seiner ursprünglichen Koordinate aus nach oben, unten, links oder rechts. Dabei wird ein kleiner Freiraum hinterlassen. Die Positionierung orientiert sich ferner an der ursprünglichen Position des Elementes.

Bei der absoluten Positionierung würde das Bild hingegen quasi „auf die Seite drauf geworfen“. Du kannst es frei positionieren, ohne dass dabei eine Lücke hinterlassen wird. Die Positionierung orientiert sich also am Browser-Fenster. In beiden Versionen können dabei andere Webseiten-Elemente überlagert werden.

 

8.1 Absolute und relative Positionierung

Beispiel absolute Positionierung:

#bsp1 {
        position: absolute;
        top: 50px;
        left: 50px;
      }

#bsp2 {
        position: absolute;
        top: 50px;
        right: 50px;
      }

#bsp3 {
        position: absolute;
        bottom: 50px;
        left: 50px;
      }

#bsp4 {
        position: absolute;
        bottom: 50px;
        right: 50px;
      }

 

Die HTML-Datei könnte dann wie folgt aussehen:

Beispiel:

<div id="bsp1"><p>Hallo von links oben</p></div>
<div id="bsp2"><p>Hallo von rechts oben</p></div>
<div id="bsp3"><p>Hallo links unten</p></div>
<div id="bsp4"><p>Hallo von rechts unten</p></div>

 


Erläuterung:
Wenn du dieses Beispiel so in deine Webseite kopierst, erscheint in jeder Ecke der Webseite – und zwar mit einem Abstand von 50 Pixeln zum jeweiligen Rand – der im Beispiel genannte Text. Dieser Text überlagert dabei auch schon eventuell bereits vorhandene Elemente.

 

Beispiel relative Positionierung:

#bsp1 {
        position: relative;
        top: 50px;
        left: 50px;
      }

#bsp2 {
        position: relative;
        top: 50px;
        right: 50px;
      }

#bsp3 {
        position: relative;
        bottom: 50px;
        left: 50px;
      }

#bsp4 {
        position: relative;
        bottom: 50px;
        right: 50px;
      }

 

Erläuterung:
Benutzt du nun eine relative Positionierung der Elemente, so würde sich, wenn du das Beispiel von vorhin nimmst, der genannte Text um die angegebenen Werte von seiner ursprünglichen Position entfernen und dabei eine Lücke hinterlassen.

Nehmen wir also an, der Text wäre Teil eines längeren Abschnittes. Verwendest du nun dieses Beispiel, wird dabei der Text aus dem Beispiel vorhin aus dem Abschnitt „herausgeschnitten“ und an die entsprechende andere Position wieder „drauf geworfen“ – berechnet von seiner ursprünglichen Position aus.

 

8.2 Ebenen definieren

Mit CSS kann man sogar in der dritten Dimension arbeiten: Die Tiefe. CSS beherrscht eine Ebenen-Funktion mit der sich die verschiedenen Elemente einer Webseite bspw. überlappen lassen können. Dabei ist es völlig egal, ob es sich um ein Bild, einen Text, eine Tabelle oder sonst irgendwas handelt.

Beispiel:

#ebene1 {
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 1;
}

#ebene2 {
  position: absolute;
  left: 150px;
  top: 150px;
  z-index: 2;
}

#ebene3 {
  left: 200px;
  top: 200px;
  z-index: 3;
position: absolute;
}

 

Die HTML Datei sieht dazu wie folgt aus:

Beispiel:

<div id="ebene1"><img src="04.jpg"></div>
<div id="ebene2"><img src="04.jpg"></div>
<div id="ebene3"><img src="04.jpg"></div>

 

Erläuterung:
Das Bild „04.jpg“ wird in diesem Beispiel dabei dreimal überlappt – mit jeweils 50px Abstand mehr zur vorigen Ebene. Dabei zu beachten wäre, dass die Ebene mit dem höheren z-index-wert die Ebene mit dem niedrigeren z-index-wert überlappt.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.