Handbuch Webdesign: CSS

CSS

Einleitung

Stylesheets sind vielleicht das wichtigste Werkzeug für Webdesigner. Mit Stylesheets (auch Formatvorlagen, oder CSS genannt) können Sie Ihre Gestaltungsmöglichkeiten von Webseiten wesentlich erweitern. Aber: Um CSS verwenden zu können, müssen Sie den HTML-Code Ihrer Webseite verstehen.

Wenn Sie an größeren Websites mit vielen einzelnen Seiten arbeiten, bieten Ihnen Stylesheets die Möglichkeit, die Seiten einheitlich zu gestalten und die Gestaltung von der Inhaltlichen Redaktion zu trennen. Das Stylesheet wird dabei von der DesignerIn erstellt, die HTML-Seiten von den ProgrammiererInnen oder RedakteurInnen.

Wenn dies Ihre erste Begegnung mit Stylesheets ist, können Sie die Kapitel Klassen, IDs und Layout mit Stylesheets überspringen, und diese Details später lernen.

Geschichte

Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten, wie der Text dargestellt werden soll – keine Schriftart oder Schriftgröße. HTML sollte nur strukturelle Information enthalten (das ist eine Überschrift, aber nicht Arial 24pt). Die Formatierungs-Information sollte in sogenannten Stylesheets gespeichert werden, das Format für die Stylesheets war aber noch nicht definiert. Im Jahre 1993 sah eine typische Webseite so aus:

 <html><body>
 <h1>Das Studium</h1>
 <p>Studienziel ist es, breit gefächerte technische 
 und wirtschaftliche Kompetenzen...
 </body></html>

Da es keine Stylesheets gab, erfand die Firma Netscape ab 1994 zusätzliche HTML-Tags:

<html><body>
<h1><font face="Arial" color="blue">Das Studium</font></h1>
<p><font size="+1">S</font>tudienziel ist es, 
breit gefächerte technische und wirtschaftliche Kompetenzen...
</body></html>

Ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet. In den Browsern war die Unterstützung für Stylesheets ab den Versionen Internet Explorer 3.0 (Juli 1996), Netscape 4.0 (Feb 1997), und Opera 3.5 (Juli 98) zu finden. Eine Webseite mit CSS (Cascading Style Sheets) zeigt Abbildung 47.

Die html-Datei	Die Datei fh.css
<html><head> <link rel="stylesheet" type="text/css" href="fh.css"/> <title>Titel: Das Studium</title> </head><body> <h1>Das Studium</h1> <p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen... </body></html>	h1 { font-family: Arial; color: blue; } p:first-letter { font-size: large; }

Abbildung 47: HTML-Datei und dazugehöriges Stylesheet

Wozu der ganze Aufwand? Stellen Sie sich vor, Sie betreuen 1000 Webseiten mit je 20 Absätzen und erhalten den Auftrag: Ändern Sie die Schriftart der Webseiten.

Ohne Stylesheets bedeutet das: in 1000 html-Dateien alle <font>-Tags suchen, und dort die Schriftart ersetzen. Mit Stylesheets bedeutet es: in einer Datei, der Stylesheet-Datei, eine Zeile ersetzen.

Stand der Technik

Die neueren Browser-Versionen (ab Internet Explorer 5.5, Mozilla 1.7, Netscape 6.0) unterstützen CSS1.0 und einen Teil von CSS2.0. Der letzte Browser, der ernste Probleme machte, war Netscape 4.7. Er unterstützte Teile von CSS1.0, stellte sie aber teilweise falsch dar. Netscape 4.7 ist aber ca. 2004 vom Markt verschwunden (hatte damals weniger als 3 % Marktanteil),^[1] kann also heute getrost ignoriert werden.

Unsere erste CSS-Anweisung

Noch sieht alles schwarz-weiß aus. Aber das kann sich ändern. Nun sagen wir dem Browser, dass der Text im Absatz fett und blau sein soll:

html

<p>Hallo Welt!</p>

css-Anweisung

p {color: blue; font-weight: bold;}

Das sieht dann so aus:

Hallo Welt!

Syntax von Stylesheets im Detail

CSS-Anweisungen setzen sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt), und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

/* einzeilig */
selektor {eigenschaft: wert;}

/* mehrzeilig */
selektor {
  eigenschaft_1: wert;
  eigenschaft_2: wert;
  eigenschaft_3: wert;
  …
  eigenschaft_x: wert;
}

Beispiele dazu:

p {text-align: justify;}
h1,h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: lightblue;
}
body {
    margin-left: 150px;
    background-color: white;
}

Was bedeuten diese Stylesheet-Anweisungen?

Erster Absatz: Normale Text-Absätze sind im Blocksatz darzustellen.

Zweiter Absatz: Die Tags <h1> und <h2> aus dem HTML-Dokument sollen mit der Schriftart Arial dargestellt werden, wenn diese Schriftart nicht vorhanden ist, mit Helvetica, wenn die nicht vorhanden ist, mit irgendeiner serifenlosen Schrift. Außerdem soll die Schrift in hellblauer Farbe dargestellt werden.

Dritter Absatz: Die gesamte Seite (<body>) soll links um 150 Pixel eingerückt werden, die Hintergrundfarbe der Seite ist weiß.

Was kann man stylen?

Man kann jeden HTML-Tag (html, body, div, p, h3, table, ul …) via Stylesheet beeinflussen. Will man noch genauer arbeiten, muß man Klassen oder IDs definieren

Welche Formatierungsanweisungen es gibt, können Sie in selfhtml nachschlagen; im Folgenden werden wir die wichtigsten behandeln.

CSS-Kommentare

Bei umfangreicheren Stylesheets ist es durchaus vorteilhaft, Kommentare einzufügen. Damit fällt es später leichter, nachzuvollziehen, was man mit der jeweiligen Anweisung beabsichtigt hat. Kommentare können außerhalb und innerhalb der geschweiften Klammer stehen:

body {
 // einzeiliger Kommentar
 background-color:white;
 color:black;
}

body {
 background-color: /* einzeiliger Kommentar, der auch mitten in der Zeile stehen kann */ white;
 color:black;
}

/*
ein Kommentar, der über
mehrere Zeilen geht und
natürlich auch sehr 
interessant ist
*/

Sehr praktisch kann man Kommentare auch dazu verwenden, bestimmte Anweisungen innerhalb eines Stylesheets auszukommentieren! So können kurzfristig Stylesheet-Anweisungen deaktiviert werden:

body {
 background:white;
 color:black;
 /* border:1px solid red; */
}

Verbindung zwischen HTML und CSS

Es gibt drei unterschiedliche Arten, CSS-Informationen in (x)HTML-Dateien einzubinden:

externe Stylesheets

Will man, dass mehrere HTML-Seiten gleich aussehen, sollte man ein externes Stylesheet verwenden. Ändert man in diesem Stylesheet etwas, hat dies unmittelbar Einfluß auf alle damit verknüpften HTML-Dateien. Die Datei muß mit der Datei-Endung .css (demostyle.css) gespeichert werden, damit sie von den Browsern als Stylesheet erkannt wird. Sie wird im <head>-bereich der jeweiligen HTML-datei folgendermaßen eingebunden:

<head>
 ...
   <link rel="stylesheet" type="text/css" href="pfadZumStyle/mystyle.css" media="all"/>
 ...
</head>

interne Stylesheets

Interne Stylesheet haben 2 wichtige Anwendungsgebiete:

die Stylesheet-Informationen beziehen sich nur auf ein HTML-Dokument
das HTML-Dokument nutzt Informationen des externen Stylesheets, man möchte jedoch für dieses spezielle Dokument andere CSS-Einstellungen verwenden als für die restlichen Dokumente
1. beispielsweise könnten auf einer Website alle Dokumente mit weißem Hintergrund dargestellt werden - nur ein Dokument soll einen roten Hintergrund erhalten; dies könnte man gut mit einem internen Stylesheet erreichen, in dem nur für die Hintergrundfarbe ein neuer Wert angegeben ist…

interne Stylesheets werden folgendermaßen im <head>-bereich der jeweiligen HTML-datei eingebunden:

<head>
 ...
   <style type="text/css" media="all">
     body {color:#000;background:#fff;font:0.8em/1.4 "Lucida Grande",Verdana,Sans-Serif;}
     ...
   </style>
 ...
</head>

Inline-Stylesheets

Style Angaben können auch direkt zu einem bestimmten Tag innerhalb des body geschrieben werden. In diesem Fall gilt die Angabe nur für diesen ganz speziellen Tag: dazu müssen Sie innerhalb des Tags das Attribut style verwenden. Die einzelnen Formatanweisung folgen dann als Wert dieses Attributes. Sie können beliebig viele Formatanweisung angeben. Diese Werte werden in derselben Form geschrieben, wie Sie es auch in einer Datei oder im head-Bereich der Datei innerhalb der geschwungenen Klammer angeben würden.

 <h1 style="color:red; text-align:center;">Rote, zentrierte Überschrift </h1>

Vorsicht! Diese Art, CSS direkt in einen bestimmten Tag einzubinden, sollte nur ganz selten gemacht werden! Sie widerspricht der Forderung, Inhalt und Aussehen möglichst voneinander zu trennen und somit die HTML-Seiten einfach pflegbar zu machen. Stellen Sie sich vor, Sie haben in 100 Dokumenten innerhalb diverser Tags eine Farbangabe gemacht; jetzt wollen Sie die Farbe ändern und sind deswegen gezwungen alle Dokumente zu öffnen und zu durchsuchen – keine angenehme Art, sich die Zeit zu vertreiben!

Die Cascade

Wie gerade gesehen, können Sie also auf drei Arten Style-Anweisungen in eine HTML-Datei einbinden. Was passiert nun, wenn sich die verschiedenen Style Angeben widersprechen?

Dann tritt das ein, was den Cascading Stylesheets ihren Namen gegeben hat: Die Cascade, die festlegt, welcher CSS-Befehl Vorrang vor einem anderen hat:

Die Angaben in einem einzelnen Tag haben immer Vorrang.
Danach folgen die lokalen Angaben im head-Bereich
und erst zum Schluss die externe Datei.

Nach diesem Einblick in die Syntax von CSS können wir nun erste Anwendungsbeispiele verstehen.

Vererbung

Wie ein Kind von seinen Eltern bestimmte Eigenschaften erben kann, können auch HTML-Elemente Eigenschaften von übergeordneten Elementen übernehmen. Dazu ein Beispiel:

CSS-Angabe:

body {
 font-family:Georgia;
 font-size:1em;
 color:red;
}

HTML-Code (Ausschnitt):

<body>
 <h3>eine überschrift</h3>
 <p>ein ganz normaler Paragraph</p>
 <ol>
   <li>Listeneintrag</li>
   <li>Listeneintrag</li>
 </ol>
 <table border="1">
   <tr>
     <td>Typ</td>
     <td>Jahrgang</td>
     <td>Datum</td>
   </tr>
   <tr>
     <td>Brompton</td>
     <td>1997</td>
     <td>20.3.2007</td>
   </tr>
 </table>
 </body>

So schaut es aus:

eine überschrift

ein ganz normaler Paragraph

Listeneintrag
Listeneintrag

Typ	Jahrgang	Datum
Brompton	1997	20.3.2007

Die Angaben zu Schrift (Georgia), Schriftgröße (1em) und Farben (red) wurden nur bei body gemacht! Weil aber alle (sichtbaren) Elemente einer HTML-Datei innerhalb des <body>-Tags stehen müssen, erben diese folglich die CSS-Eigenschaften, die man bei body angegeben hat... Will man aber z.B. der Überschrift eine andere Farbe geben, muß man dies explizit machen:

h3 {color:blue;}

Tip: Das Vererben kann man sehr gut dazu nutzen, Abstände und Rahmen zu eliminieren, deren Default-Einstellungen bei jedem Browser unterschiedlich sind! Dadurch wird das Aussehen in verschiedenen Browsern einheitlich(er)…

* {margin:0;padding:0;border:none;}

Der Stern (*) bedeutet, dass dies für alle Elemente gilt. Will man bei bestimmten Elementen wieder Margins, Paddings oder Rahmen haben, muss man diese explizit setzen!

Ich setze diese Anweisung ganz am Anfang meiner CSS-Anweisungen - und habe damit eine "Tabula Rasa" zum Designen…

Texte und Farben mit Stylesheets

In diesem Kapitel lernen Sie die wichtigsten Formatierungs-Anweisungen von CSS für Schriftarten, Absätze, Links und Farben kennen. Dabei wird immer wieder das selbe HTML-Dokument verwendet, der Code ist hier abgebildet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
 <title>Titel der Seite</title>
</head>
<body>
 <p>dieser Paragraph wird via CSS geändert!</p>
</body>
</html>

Schriftfamilie, Schriftgröße

Zuerst wollen wir die Schriften im Dokument festlegen: Eine mit Serifen für den Fließtext und eine serifenlose Schrift für Überschriften:

1. body {
2.   font-family: Georgia,Times,serif;
3.   font-size: 0.9em;
4. }
5. h1,h2 {
6.   font-family:"Trebuchet MS",Verdana,Arial;
7. }
8. h1 { font-size: 180%; }
9. h2 { font-size: 150%; }

In Zeile 1 bis 4 von Listing 2 werden zwei Anweisungen für alle Elemente innerhalb des <body>-Tags gegeben: die Schriftfamilie in Zeile 2 und die Schriftgröße in Zeile 3. Bei Schriftfamilien gilt es, wie in Kapitel 1.2.4 beschrieben, die Einschränkungen des Web zu beachten. In Zeile 2 werden mehrere Schriften angegeben, diese Liste wird vom Browser von links nach rechts abgearbeitet, die erste Schrift die er findet verwendet er. Vergleichen Sie Zeile 2 mit Zeile 6: Schriftnamen die ein Leerzeichen enthalten müssen in Anführungszeichen gesetzt werden, so wie Trebuchet MS in Zeile 6.

sans-serif,
serif,
cursive,
fantasy,
monospace

Das letzte Wort in Zeile 2 serif ist ein CSS-Kürzel für irgendeine Serifen-Schrift. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert wenn alle Stricke reißen anzugeben, links sehen Sie eine Liste der in CSS1 angebotenen Kürzel.

Die Schriftgrößen-Angabe in Zeile 3 verwendet Ems als Maßeinheit. Alternativ wäre auch eine Angabe in Punkt (pt), Pica (pc), Inch (in), Millimeter (mm), Zentimeter (cm), Pixel (px), iX-Höhe der aktuellen Schrift (ex), Prozent (%).

Viele dieser Maßangaben kommen aus dem Druck-Bereich und machen eigentlich am Bildschirm keinen Sinn… sinnvolle Maßangaben sind: px (dazu mehr etwas weiter unten), em (vielleicht die beste Maßeinheit) und %;

Ausserdem gibt es für Schriftgrößen sieben Standardgrößen: xx-small, x-small, small, medium, large, x-large, xx-large und die relativen Angaben smaller und larger.

Zum Thema Schriftgrößen gibt es verschiedene Ansichten:

Da Webseiten hauptsächlich auf Bildschirmen gelesen werden kann man argumentieren, dass das Pixel die natürliche Maßeinheit auf Webseiten ist. Wenn Sie gif, jpg oder png-Bilder in Ihrer Webseite verwenden ist die Breite und Höhe der Bilder in Pixel fix. Pixel auch als Größe für Schrift macht es einfach die Größenverhältnisse von Bild und Schrift zu fixieren.

Gibt man die Schriftgrößen in Pixel (px) an, hat dies den großen Nachteil, dass Benutzer, die mit dem Internet Explorer 5 oder 6 die Website betrachten, die Schriftgröße nicht ändern können! – aus diesem Grund sollte man diese Maßeinheit so lange nicht verwenden, bis der Internet Explorer 7 auf der Mehrzahl von Windows-Rechnern installiert ist (oder man die Leute davon überzeugt hat, dass es viele sehr viel bessere Browser gibt ;-))

Eine andere Position lautet: Bildschirme und Displays sind sehr unterschiedlich groß; Leserinnen und Leser haben sehr unterschiedliche Sehstärken und -schwächen. Deswegen muss das Verändern der Schriftgröße in der Hand der LeserIn bleiben. In einem Browser wie Firefox geht das ja auch bequem mit einem Tastendruck.

Wenn nun die LeserIn die Schriftgröße ändert, sollte diese Veränderung alle Schriften auf der Webseite betreffen: Fließtest, Überschrifen, Aufzählungen, etc. Dabei könnte das Layout und die Bilder auf der Seite entweder fix bleiben oder sich ebenfalls vergrößern oder verkleinern (falls deren Breite und Höhe ebenfalls in Ems oder Prozent angegeben sind!)

Absätze

Betrachten wir als nächstes den Absatz. Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspekte des Absatz-Layoutes steuern:

p {text-align:right;}

text-align verändert die Ausrichtung des Texts im Absatz: left, right, center oder justify (Blocksatz).

Farbangaben

Text – aber auch Rahmenkanten – können via CSS eingefärbt werden. Dazu gibt es gleich mehrere Möglichkeiten:

reservierte Farbnamen

Es gibt eine lange Liste mit Farbnamen, die (angeblich) die meisten Browser erkennen. Dies ist jedoch nicht sehr zuverlässig! Will man genau einen bestimmten Farbton angeben, sollte man diesen in RGB-Werten oder Hexadezimal-Werten angeben.

Um jedoch schnell mal etwas farbig zu machen, sind diese Angaben sehr praktisch:

 h2 {color:red;background:green;}
 p.wichtig {color:blue;border-bottom:1px solid red;}
 h1 {color:maron;background:lime;}

RGB-Werte

RGB-Werte können in Prozent (%) oder in Werten von 0 bis 255 angegeben werden:

 h3 {color:rgb(40%,50%,90%)}
 div#zitat {color:rgb(0,255,40)}

Hexadecimal-Werte

Hexadezimal-Werte benutzen eine 6-stellige "Zahlenreihe" (#RRGGBB) um einen Farbwert wiederzugeben; häufig ist es etwas einfacher, einen Farbwert z.b. aus Photoshop zu kopieren als die etwas mühsamer RGB-Schreibweise… Modernen Browsern ist es egal, ob Sie die Farbangabe hexadezimal oder als RGB-Wert machen!

 h4 {color:#dcdcdc}
 p#zitat strong {background-color:#EE99BF;}

Klassen und IDs

Wenn Sie mit den Style-Angaben den <p>-Tag umformatieren, betrifft das alle <p>-Tags in der Webseite. Oft möchten Sie aber vielleicht nur eine spezielle Art von Absatz anders formatieren als die anderen Absätze. Zu diesem Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen - Klassen oder IDs - definieren:

Klassen

So sieht die Anweisung im Stylesheet aus:

.wichtig { color: red; }

Diesen Klassen können Sie eigene Namen geben. Um Klassennamen von HTML-Tags zu unterscheiden, muss vor dem Namen einer Klasse ein Punkt stehen. Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem Attribut class und dem Namen der speziellen Klasse.

 <p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p>
 <p class="wichtig">Eine ganz wichtiger Absatz</p>
 <p>Ein ganz normaler Absatz</p>

Zur "normalen" Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu: der Text ist in diesem Beispiel also rot. Wenn Sie einem Bereich ihres HTML-Codes eine bestimmte Klasse zuweisen möchten, aber kein passender HTML-Tag vorhanden ist, können Sie die beiden Tags <span> und <div> verwenden, die beide selber kaum Eigenschaften aufweisen. <span> eignet sich für die Verwendung in Fließtext, <div> ist ein blockbildender Tag, erzwingt also einen Zeilenumbruch.

 <p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen. </p>

Die Worte besonders interessante erscheinen rot.

IDs

Ids bewirken auf den ersten Blick das gleiche wie Klassen:

 #wichtig { color: red; }

 <p>Es gibt hier ganz <span id="wichtig">besonders interessante</span> Meldungen. </p>

auch hier erscheinen die Worte besonders interessante rot;

Ids dürfen jedoch pro HTML-Dokument nur einmal vorkommen! Sie sind vergleichbar mit einem Personalausweis - auch dieser wird nur für eine Person ausgestellt… (hat man mehrere HTML-Dokumente, kann natürlich in jedem dieser Dokumente einmal die gleiche ID vorkommen!)

Die aktuellen Browser sind (noch) relativ tolerant, wenn man innerhalb eines Dokumentes mehrmals die gleiche ID verwendet – fatal wird es, wenn man versucht, via Javascript genau ein Element anzusprechen (getElementByID()) – dann funktioniert wahrscheinlich überhaupt nichts!

Verschachtelte Elemente

Verschachtelte Elemente (descendant selectors) ermöglichen es, nicht nur Elemente mit bestimmten Klassen oder IDs via CSS zu "stylen", sondern auch Elemente, die sich innerhalb von den Eltern-Elementen befinden. Hier ein einfaches Beispiel dazu:

 <div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

Will man dem Wort Beziehung, das im gezeigten Beispiel durch den Tag "<strong>" ausgezeichnet ist, via CSS ein besonderes Aussehen geben, braucht man in der CSS-Anweisung nur folgendes schreiben

 .marginale strong {background:blue;color:white;}

Diese CSS-Anweisung veranlaßt den Browser, jedes <strong>-Element innerhalb des divs mit der Klasse "marginale" mit einem blauen Hintergrund darzustellen;

hier ein einfacher Text, der die Beziehung verdeutlichen soll

Dies kann man natürlich beliebig weitertreiben:

 .marginale li li strong {border:1px solid red;}

Diese CSS-Anweisung zwingt den Browser, <strong>-Elemente, die innerhalb einer Liste einer Liste, innerhalb der divs mit der Klasse "marginale" vorkommen mit einem 1px starken, roten Rahmen darzustellen…

Die Möglichkeit von CSS auch verschachtelte Elemente anzusprechen ist extrem praktisch! Man muss nicht jedes Element explizit kennzeichnen – manchmal ist dies auch gar nicht möglich (z.b. bei Content Management Systemen oder Wikis!)

Feinjustierung

Man kann die Auswahl der verschachtelten Elemente noch genauer einstellen:

der liebe Internet Explorer – zumindest bis zur Version 6 – erkennt diese Formatierungen leider nicht!

direktes Kind

damit kann man Elemente "stylen", die die direkten Kinder eines Elementes sind:

div.marginale > strong {background:blue;color:white;}

Hier wird das Wort Beziehung blau hinterlegt, weil der Tag <strong> ein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

hier ein einfacher Text, der die Beziehung verdeutlichen soll

Hier wird das Wort Beziehung NICHT blau hinterlegt, weil der Tag <strong> kein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text,  der <em> die <strong>Beziehung</strong> verdeutlichen </em> soll</div>

hier ein einfacher Text, der die Beziehung verdeutlichen soll

benachbarte Kinder

zum "Stylen" eines Elementes, das direkt einem vorhergehenden folgt:

p + p {margin:0;text-indent:2em;}

die Anweisung bewirkt folgendes: Treten 2 Paragraphen direkt hintereinander auf, wird der 2. Paragraph ohne Abstand zum ersten dargestellt; gleichzeitig wird in der 1. Zeile des 2. Paragraphen der Text um 2em eingezogen

Lorem ipsum sea ad nisl vidit facete, mea tota laoreet ad, est no prompta salutatus. Vis et doctus habemus postulant, usu suscipit assueverit in, an mel iriure omittam adversarium. Vel et labore nemore referrentur, mazim vivendo consetetur vim id. No vix repudiandae suscipiantur necessitatibus. Brute aliquid laoreet an pri.

Epicurei percipit evertitur id vel, at vim elit invidunt. Ad sea tantas disputando. Laudem lobortis splendide an quo. Sed no timeam sapientem. Inani suscipiantur mei ea, cu movet interpretaris mel. Ea vim velit zzril dissentias, nec brute iudicabit eu, volumus perpetua intellegebat an pro.

CSS Box

CSS geht davon aus, das jedes sichtbare Element einer HTML-Datei eine Element Box erzeugt. Darin befindet sich der eigentliche Inhalt (z.b. ein Wort oder ein Bild); dieser Inhalt kann durch paddings, border oder margins von den umgebenden Elementen abgegrenzt werden:

innere Abstände (padding)

Durch padding erzwingt man einen Abstand vom Inhalt zum Rand der Element Box:

<div id="demo">der Innenabstand</div>

div#demo {
  width:6em;
  padding-top:1.5em;
  padding-right:0.5em;
  padding-bottom:1.5em;
  padding-left:0.5em;
}

/* oder in kurzform */

div#demo {
  width:6em;
  padding:1.5em 0.5em; /* 1. wert = oben + unten; 2. wert = rechts + links
}

der Innenabstand

Äußere Abstände (margin)

Durch margin erzwingt man einen Abstand von einer Element Box zu einer anderen:

<div id="box_1">1. Element</div>
<div id="box_2">2. Element</div>

div#box_1, div#box_2 {
  width:5em;
  border:1px solid black;
  margin-bottom: 30px;
}

1. Element

2. Element

Rahmen (border)

Eine Element Box kann mit einem rechteckigen Rahmen versehen werden:

<div class="mitRahmen">Element</div>

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  border-color:red;
  border-width:1px;
  border-style:solid;
}

Element

damit kann man auch richtig schräge Sachen machen:

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  width:8em;
  height:8em;
  border-color:lime blue red gold;
  border-width:20px 10px 4px 8px;
  border-style:solid dashed dotted groove;
}

Element

Layout mit Stylesheets

Kaum etwas hat den Aufbau von Website so fundamental verändert wie der Einsatz von Stylesheets zum Layouten der einzelnen Seiten.

Kurzer geschichtlicher Ausflug

Bevor die Browser dazu fähig wurden, Stylesheet-Positionierungen zuverlässig darzustellen, "mißbrauchten" Webdesigner HTML-Tabellen, um Screenelemente auf der Seite zu positionieren. Mit Hilfe von komplizierten Tabellen-Strukturen und unsichtbaren Gifs, die die einzelnen Tabellen-Zellen aufspannten, war es möglich, visuell ansprechende Seite zu gestalten. Die Websites verloren dabei jedoch einen ihrer größten Vorteile: Inhalt und Präsentation waren nicht mehr voneinander getrennt:

Website-Besucher wurden gezwungen, die neuesten Browser zu verwenden
die Browser benötigten eine hohe Rechenleistung, um die komplizierten Tabellen richtig darzustellen
die Ladezeiten verlängerten sich
Screenreader (Lesehilfen für Blinde und Sehbehinderte) konnten keine sinnvollen Zusammenhänge mehr erkennen

Auch heute noch wird ein Großteil der Websites nach diesem veralteten Schema aufgebaut. Dies liegt hauptsächlich an WYSIWYG-Editoren (Frontpage, Go live, Dreamweaver usw.) oder an veralteten Content Management Systemen

Wie gut, dass Sie diesen komplizierten, veralterten Weg des Web-Layoutens nicht mehr lernen müssen!

Normaler Seitenaufbau

Ohne Beeinflussung einer HTML-Datei via CSS wird der Inhalt einfach von oben nach unten abgearbeitet. Was also oben steht, wird auch im Browser oben dargestellt…

Dies sollte man nie vergessen: alle Leute, die die Website mit einem Browser besuchen, der kein CSS versteht, werden Ihre Seite so sehen, wie Sie diese in HTML aufgebaut haben! Nehmen Sie sich beim Umsetzen Ihrer Website ab und zu die Zeit und deaktivieren Sie das CSS:

Ist die Seite auch so verständlich?
Was kommt zuerst? Das Menü oder der Inhalt?
Kann man Zusammenhänge auch so verstehen?

Minimale Beeinflussung des Layouts via CSS

Durch das Verwenden von Margins, Borders und Paddings können Sie Abstände zwischen verschiedenen Elementen schaffen, Beziehungen verdeutlichen und visuelle Spannungen aufbauen – ohne die Reihenfolge der Elemente zu verändern!

Floaten

Beim Floaten wird das im HTML-Code oben liegende Element links oder rechts nach unten neben das im HTML-Code unten liegende Element gesetzt...

Verwirrt? Anhand eines Beispiels wird die Sache verständlicher:

<h2 id="einleser">Floating ist sehr praktisch!</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:left;
6.   margin:0 10px 10px 0;
   }

Floating ist sehr praktisch!

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

Haben Sie gesehen, wie die <h2>-Überschrift nach links unten in den nachfolgenden Paragraph (<p>) rutscht? Würde man in Zeile 5 des Stylesheet statt float:left; float:right; eingeben, würde die Überschrift nach rechts unten rutschen…

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:right;
6.   margin:0 0 10px 10px;
   }

Floating ist sehr praktisch!

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

Clearen

Clear ist das Gegenstück zum Float; es bewirkt, dass das Floaten ab dieser Stelle aufhört. Auch dafür ein einfaches Beispiel:

<h2 id="einleser">Floating ist sehr praktisch, sollte aber nicht endlos weiterlaufen</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>
<p class="clearLeft">Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen</p>

.clearLeft {clear:left;}

Floating ist sehr praktisch, sollte aber nicht endlos weiterlaufen

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei.

Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen

Es gibt die Aufrufe clear:left, clear:right und clear:both;

Positionieren

Positionieren ist der radikalste Eingriff in die von HTML vorgegebene Struktur einer Website; es ist damit möglich, Elemente, die im HTML-Code ganz unten stehen, am obersten Rand des Browser zu plazieren und umgekehrt.

Bitte fragen Sie sich dabei immer: Ist dies Umsortieren wirklich notwendig - oder könnte es nicht einfacher sein, den HTML-Code entsprechend umzustellen?

Absolutes Positionieren

Absolut positionierte Elemente fallen komplett aus dem normalen "Fluß" einer HTML-Datei heraus; man könnte sich vorstellen, dass sich diese Elemente auf einer eigenen Ebene befinden und somit weder andere Elemente beeinflussen können noch von anderen Elementen beeinflußt werden können;

Absolut positioniert relativ zum Browserfenster

Für den Anfänger verwirrend ist die Beziehung zwischen dem absolut positionierten Element und seinem "Elternelement": erklärt man ein Element einfach absolut und gibt ihm dann Positionsangaben, beziehen sich diese direkt auf das Browserfenster:

<body>
 <p>hier eine Menge Text…</p>
 <div id="wichtig">dieser Text ist absolut positoniert</div>
</body>

div#wichtig {
  text-align:center;
  background:red;
  color:white;
  border:1px solid white;
  position:absolute;
  width:9em;
  top:30px;
  left:30px;
}

Die graue Fläche stellt das gesamte Browserfenster dar!

hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. Hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. Hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird

dieser Text ist absolut positoniert

Wichtig: um ein Element absolut zu positionieren, müssen mindestens folgende Angaben gemacht werden:

position:absolute;
width: eine breitenangabe
top und/oder left (alternativ ist auch bottom und right möglich!)

Absolut positioniert relativ zu einem übergeordneten Element

Will man ein HTML-Element innerhalb eines anderen Html-Elementes absolut positionieren, muß man bei den CSS-Angaben des äußeren Elementes zumindestens die Angabe position:relative; machen. Hier das Beispiel:

<div id="aussen">
   <div id="innen">innen div</div>
</div>

/* im css-bereich */
div#aussen {position:relative;background:yellow;
width:100px;height:100px;}

div#innen {position:absolute;width:70px;
left:20px;top:20px;background:blue;color:#fff;}

innen div

Relativ Positionieren

relatives Positionieren verschiebt die Position eines HTML-Elements relativ zur normalen Position. Die Lücke, in der das Element normalerweise stehen würde, bleibt erhalten.

<p>dies ist normaler fliesstext</p>
<h2 id="rausrueck">hier eine relativ gesetzte zwischenüberschrift</h2>
<p>hier wieder normaler fliesstext</p>

/* im css-bereich */
h2#rausrueck {position:relative;left:6em;top:-1.4em;background:#ccc;}

dies ist normaler fliesstext

hier eine relativ gesetzte zwischenüberschrift

hier wieder normaler fliesstext

Navigationsmenü

Praktisch alle modernen Navigationsmenüs sind als ungeordnete HTML-Listen erstellt und via CSS dem Look & Feel der jeweiligen Seite angepaßt. Diese Listen haben den großen Vorteil, dass sie auch bei deaktivierten CSS als zusammengehörige Navigations-Elemente erkannt werden.

Der HTML-Code ist sehr einfach:

<ul>
 <li><a href="/home/" title="our homepage">home</a></li>
 <li><a href="/products/" title="a selection of products">products</a></li>
 <li><a href="/news/" title="latest news">news</a></li>
 <li><a href="/clients/" title="our clients">clients</a></li>
</ul>

mit Hilfe von CSS kann man das Aussehen der Liste verändern:

Bullets entfernen: ul {list-style:none;}

Zusammenfassung und Einsatz von Stylesheets

Wichtige Argumente für den Einsatz von Stylesheets sind:

Zusätzliche Gestaltungsmöglichkeiten
Einheitliche Gestaltung von mehreren Webseiten
Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte erstellen)

Aber Achtung: CSS ist nicht die Lösung jedes Problems. Was CSS nicht leisten kann ist z.b:

Mit Stylesheets können Sie nur Objekte verändern, die schon in der HTML-Datei vorhanden sind. Es können keine neuen Objekte eingefügt werden.
Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags kennen, z.B. wissen, dass h1, h2, h3 für die Überschriften stehen.
Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML-Dokument erstellt, die richtigen HTML-Tags verwenden, z.B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht mit b, i, font.

Quellen

↑ http://www.upsdell.com/BrowserNews/stat.htm

Übungen

Wikiversity

Folgende Übungen sind zu dieser Buchseite verfügbar:

Übungen und Fragen zu CSS zur Textgestaltung

Übungen und Fragen zu CSS für Layout

[1] ttp://www.upsdell.com/BrowserNews/stat.htm

[1]