Keine Variablen, keine Schleifen, keine Arrays: Mit Cascading Style Sheets (CSS) möbeln Sie Ihre Web-Seiten ohne große Programmierkenntnisse auf. Änderungen im Layout geschehen im Handumdrehen über eine zentrale Datei.

Zu Beginn der 90er Jahre sollte HTML nichts anderes tun, als Text darzustellen und zu verlinken. Die Layout-Funktionen kamen erst später auf Druck der Industrie hinzu. Die Folgen sieht man noch heute: Ellenlange Tabellenkolonnen und überdimensionierte Schriftartendefinitionen. Um einen Text von 100 Zeichen zu layouten, benötigt man etwa die doppelte Menge an HTML-Code.

Um das Problem in den Griff zu bekommen, gab das World Wide Web Consortium (W3C)[1] 1996 die erste Version von CSS frei. CSS kann für jedes HTML-Element, zum Beispiel für einen einzelnen Buchstaben, ein eigenes Layout definieren. Es verändert die Größe des Elements, entwirft einen Rahmen und fügt Abstände hinzu. Hier geht es um die aktuelle Version 2.1, HTML-Kenntnisse setzt der Artikel voraus (Infos zu HTML lesen Sie im Artikel ab Seite 28). Da der Text einen breiten Überblick zu CSS gibt, finden Sie hier nicht sämtliche verfügbaren CSS-Eigenschaften. Das kostenlose Internet-Tutorial SELFHTML und verschiedene CSS-Bücher helfen Ihnen in dieser Frage weiter [2,3,4].

Arbeit sparen, Zeit sparen

Um CSS zu schreiben, benötigen Sie eigentlich nur einen gewöhnlichen Text-Editor. Der KDE-Editor Kate prüft gleich automatisch, ob Sie die Syntax korrekt umgesetzt haben. Notwendig ist das nicht, aber ein nettes Feature – zumal CSS, im Gegensatz zu HTML, bei Syntaxfehlern den Dienst verweigert. Programmierkenntnisse brauchen Sie nicht.

Die Vorteile von CSS verdeutlichen zunächst ein paar Beispiele. Angenommen Sie haben eine HTML-Seite mit einigen Links, deren Farbe Sie im $body§-Tag definieren.

$body link="#000000" alink="?
#CCCCCC" vlink="#666666"§

Da Sie die Farbe eines einzelnen Links in HTML nicht ändern können, werden sämtliche Links in diesen Farben dargestellt. Mit CSS manipulieren Sie auch einzelne Links ganz unproblematisch:

$a href="http://www.linuxuse?
r.de" style="color: white; text-?
decoration: none;"§

Das style-Element beinhaltet die Layout-Eigenschaften für den Link. Der ist nun weiß (color: white;) und nicht mehr unterstrichen (text-decoration: none). CSS kann also Dinge, die HTML nicht kann.

Ein anderes Problem: Sie haben mehrere Seiten Text, der mit Zitaten (blockquote) gespickt ist. Nun wollen Sie die Schriftarten der Zitate ändern. Gewöhnlich öffnen Sie dazu alle HTML-Seiten und nehmen die Änderungen über Suchen und Ersetzen vor. Diese Methode ist nicht besonders effizient. In CSS genügt es, eine Zeile in der zentralen CSS-Datei zu modifizieren.

blockquote {font-family: ?
Arial, Helvetica, Courier;}

Alle HTML-Dateien, in die das zentrale Style Sheet eingebunden ist, verwenden nun automatisch eine der drei Schriftarten für Zitate. CSS erspart Ihnen in diesem Fall eine Menge Handarbeit. Zugleich erhalten Sie ein Werkzeug, um das Aussehen wiederkehrender Elemente zentral zu definieren und zu ändern. Schließlich dient CSS auch dazu, eine Web-Seite für andere Ausgabemedien zu optimieren. Sie erstellen einfach ein alternatives Style Sheet, das die HTML-Seiten für den Druck optimiert. Sobald ein Nutzer eine Seite ausdrucken möchte, wird das Style Sheet aktiv und entfernt die Menüs und Bilder aus dem Text, vergrößert die Schrift oder ändert die Schriftart.

Was Sie layouttechnisch mit einer gewöhnlichen HTML-Seite anstellen können, beweist eindrucksvoll die Seite Csszengarden[5]. Hier entwerfen Besucher ihre eigenen Style Sheets für ein vorgefertigtes HTML-Dokument. Die Ergebnisse sind verblüffend und zeigen, was mit CSS grafisch möglich ist. Die Funktionalität von CSS 2.1 schöpfen jedoch nur die aktuellen Browser aus. Eine ausführliche Tabelle [6] im Internet listet auf, welche Browser welche CSS-Eigenschaften unterstützen. Das hilft dabei, Ihre Web-Seite auch älteren Browsern zugänglich zu machen.

Rein oder Raus?

Wie aber bauen Sie die Stildefinitionen in Ihren HTML-Code ein? Dafür gibt es drei Möglichkeiten. Eine davon kennen Sie schon: Sie integrieren die Definitionen direkt in die Tags im HTML-Quelltext.

$A href="www.linuxuser.de"?
 style="color: #FFFFFF; text-?
 decoration: none;"§ Das ?
 ist ein Link $/A§

Das Element style kündigt an, dass nun CSS-Code folgt. Die Eigenschaften setzen Sie in Anführungsstriche und trennen Sie durch Semikolons voneinander. Eine zweite Möglichkeit besteht darin, das Layout einer HTML-Seite innerhalb von $style§-Tags zu definieren, die im Header der Seite stehen.

        $head§
                $title§
                        Meine Web-Seite
                $/title§
                        $style type=?
                        "text/css"§
                        h1 {color: red;}
                        $/style§
        $/head§

Die dritte Methode sieht vor, die Style Sheets in eine eigene Datei auszulagern. Das hat den Vorteil, dass Sie die Style Sheets über einen einzigen Link in die Header der HTML-Seiten einbinden. Dadurch erhalten sämtliche HTML-Seiten ihre Layout-Informationen aus einer einzigen Datei, hier trägt sie den Namen sheet1.css.

        $head§
        $link rel="stylesheet" ?
type="text/css" href="sheet1.?
css" title="test" media="?
screen"§
        $/head§

Um das Aussehen der Web-Seiten zu verändern, müssen Sie nicht jede HTML-Datei einzeln öffnen, sondern modifizieren einfach die eingebundene CSS-Datei.

Living in a box

Was passiert nun genau, wenn Sie CSS auf ein HTML-Element, also einen Textabschnitt, ein Bild oder einen Buchstaben anwenden? CSS erzeugt eine so genannte Box (Abbildung 1). Diese besteht aus dem Inhalt, den Innenabständen, dem Rahmen und den Außenabständen. Zunächst hat das Element selbst eine gewisse Höhe (height) und Breite (width). Der Innenabstand (padding) reicht vom Rand des Elements bis zum Rahmen. Auch der Rahmen (border) selbst trägt zur Gesamtbreite bei. Der Außenabstand (margin) reicht schließlich vom Rahmen bis zur benachbarten Box. Für fast alle Elemente verändern Sie Abstände und Rahmen nach Belieben.

Abbildung 1: Die Parameter “width” und “height” bestimmen Größe und Breite des Elements selbst. Um die Breite und Höhe der gesamten Box zu erhalten, addieren Sie “padding”, “border” und “margin” hinzu und verdoppeln diese Werte.

Die Gesamtbreite einer solchen Box zu ermitteln, erfordert ein wenig Addition. Ist das Element selbst 12 Pixel breit, der Innenabstand 3 Pixel, der Rahmen 1 Pixel und der Außenabstand 4 Pixel, so liegt die Gesamtbreite des Elements bei 28 Pixeln. Die Rechnung geht so: 12 Pixel (Inhalt) + 6 Pixel (linker + rechter Innenabstand) + 2 Pixel (linker + rechter Rahmen) + 8 Pixel (linker + rechter Außenabstand) ergeben 28 Pixel. Rahmen und Abstände definieren Sie in CSS – anders als in HTML – für jede Seite einzeln. Um nur oberhalb eines Elements einen Rahmen einzufügen, geben Sie border-top: 1px solid black; ein. Die Eigenschaft padding-right: 10px; verändert den Innenabstand zum rechts stehenden Element. Außerdem unterscheidet man zwischen Block- und Inline-Elementen. Block-Elemente erzeugen Absätze, Inline-Elemente können Teil eines Block-Elements sein, schaffen aber keine Absätze. Das $b§-Tag ist ein typisches Inline-Element, $hr§ ein typisches Block-Element. Mit dem Tag display: block; kann ein Inline-Element in ein Block-Element verwandelt werden, display: inline; bewirkt den gegenteiligen Effekt.

Pimp your HTML

Da Web-Seiten in erster Linie Informationen in Textform transportieren, geht es zunächst um die Textgestaltung mit CSS. Ob Sie Ihre CSS-Anweisungen in eine separate Datei schreiben oder eine der anderen erwähnten Methoden nutzen, bleibt Ihnen überlassen. Das folgende Beispiel beschreitet den ersten Weg. Erzeugen Sie eine HTML-Datei mit den gängigen Tags wie $html§, $head§ und $body§ und speichern Sie diese als index.html (Abbildung 2). In den $Body§ der Datei schreiben Sie den kurzen Text aus Listing 1 inklusive sämtlicher Tags.

Abbildung 2: Mit einem Texteditor wie Kate entwerfen Sie schnell eine Standard-HTML-Seite. Über den Link im “Header” binden Sie eine externe Style Sheet-Datei ein, in den “Body” kommt ein kleiner Beispieltext.

Öffnen Sie dann mit Kate eine leere Datei, die Sie unter dem Namen sheet1.css im selben Verzeichnis speichern. Das Style Sheet binden Sie über einen Link im Header der index.html ein:

        $head§
        $link rel="stylesheet" ?
type="text/css" href="sheet1?
.css" title="sheet1"§
        $/head§

Ohne Layout-Vorgaben zeigt der Browser den Text der index.html in großen schwarzen Buchstaben an, wobei der mit $b§ markierte Text fettgedruckt und der Link blau unterstrichen erscheinen (Abbildung 3). Um Schriftart, Farbe und Schriftgröße zu ändern, editieren Sie nun die leere Datei sheet1.css:

b       {
        font-family: Arial,?
Helvetica,Courier;
        font-size: 130%;
        color: red;
        font-weight: bold;
        font-style: italic;
        }
p       {
        font-size: 16px;
        }

Abbildung 3: Traditionell schlicht. Ohne den Einsatz von Style Sheets oder HTML-Layout-Tags erscheint ein einfacher schwarzer Text mit fettgedruckten Einschüben. Der Link ist gemäß den Voreinstellungen blau unterstrichen.

Wenn Sie nun die Datei index.html im Browser öffnen, sehen Sie die Auswirkungen der Layout-Anweisungen aus dem Style Sheet (Abbildung 4). Über font-family legen Sie fest, in welcher Schriftart der Browser den Text präsentiert. Windows-Browser zeigen ihn vermutlich in Arial, Mac-Browser greifen auf Helvetica zurück und Linux-Browser geben den Text in Courier-Schrift wieder. Verfügt der Betrachter über keine der angeführten Schriftarten, wird die Standardschrift des Browsers benutzt. Über die Eigenschaft font-size legen Sie die Größe der Schrift fest. Gewöhnlich entspricht die im Browser voreingestellte Schriftgröße einer font-size von 100%. Im HTML-Quelltext umschließt aber das Tag $p§ mit der Schriftgröße von 16 Pixeln das $b§-Tag. Dieses orientiert sich hinsichtlich der Schriftgröße an seinem Eltern-Element. Wenn also die 16 Pixel des $p§-Tags für das $b§-Tag 100% bedeuten, entspricht die font-size von 130% umgerechnet 20,8 Pixeln.

Abbildung 4: Ein paar Layout-Einträge und schon verändert sich das Bild. Die in das “b”-Tag eingefassten Segmente erscheinen rot und in anderer Schriftgröße.

Das Festlegen der Farbe funktioniert wie in HTML. Sie geben für die Eigenschaft color entweder einen der voreingestellten Farbnamen an oder definieren die Farbe über hexadezimale Werte wie #FFFFFF. Durch die Eigenschaft font-weight wird die Schrift fett dargestellt. Sie können alternativ auch bolder, lighter oder normal als Werte einsetzen. Mit dem font-style stellen Sie die Schrift auf Wunsch kursiv (italic), normal (normal) oder schräggestellt (oblique) dar. Tragen Sie nun in die geschweiften Klammern des p-Tags vier weitere Zeilen ein:

        letter-spacing: 2px;
        line-height: 25px;
        text-align: center;
        vertical-align: top;

Der von $p§ eingerahmte Text verändert sich merklich (Abbildung 5). Das letter-spacing schafft Abstände zwischen den einzelnen Buchstaben, die line-height vergrößert den Abstand zwischen den Zeilen. Die beiden nächsten Eigenschaften positionieren den Text: text-align legt die horizontale Position des Textes fest, die zentriert (center), rechts- oder linksbündig (right, left) oder Blocksatz (justify) sein kann. Die waagerechte Lage wird über vertical-align definiert. Im Beispiel klebt der Text an der Oberkante des umgebenden Blocks (top), weitere mögliche Stellungen sind middle und bottom.

Abbildung 5: Sicherlich entspricht das Schriftbild nicht den Anforderungen professioneller Webdesigner, aber zu Demonstrationszwecken genügt es. Das Schriftbild sieht nun anders aus.

Rahm’s dir ein

Das Schöne an CSS ist: Sie können jedes Element recht individuell verzieren. Ergänzen Sie im Style Sheet das Element b um die Zeile border: 1px solid #000000;. Nun erscheinen die von $b§ eingeschlossenen Elemente mit einem schwarzen Rahmen, der aus einer durchgezogenen Linie von einem Pixel Breite besteht. Der Rahmen lässt sich verändern: Je nach Geschmack wählen Sie eine gestrichelte (dashed) oder gepunktete (dotted) Linie. Benötigen Sie nur einen Rahmen für eine einzelne Seite, geben Sie border-left: 1px dashed red; oder border-bottom: 1px dotted green; an.

Wahrscheinlich brauchen Sie auch Bilder in Ihrem Text. Die positionieren Sie über die Eigenschaft Float. Erzeugen Sie ein Bild mit dem Namen testbild.jpg und speichern Sie es im selben Verzeichnis wie die index.html-Datei. Binden Sie das Bild nach dem $p§-Tag in die HTML-Datei ein:

$img src="testbild.jpg"§

Um den Effekt zum Vorschein zu bringen, ordnen Sie den gesamten Text linksbündig an. Dazu wechseln Sie zum Style Sheet und löschen die Eigenschaft text-align: center; für das Element p. Außerdem fügen Sie eine Definition für den Umgang mit Bildern ein:

img     {
                width:50px;
                height:50px;
                float: left;
                margin-right: 20px;
                margin-bottom:0px;
                }

Die Angabe float: left; sorgt dafür, dass die Grafik links erscheint. Die Werte width und height skalieren die Grafik auf die gewünschte Größe und der Eintrag margin-right: 20px; schafft nach rechts einen Innenabstand zum Text (Abbildung 6).

Abbildung 6: Alles Banane. Das Bildchen “floatet” links in der oberen Ecke. Den Abstand von 20 Pixeln zum Text besorgt die “margin-right”-Anweisung.

Gutes Layout setzt häufig auf Hintergrundbilder. Legen Sie eine Grafik mit dem Namen hgbild.jpg in den Hauptordner und ergänzen Sie die Eigenschaften für das Element p in der Style Sheet-Datei.

        background-image: ?
        url(hgbild.jpg);
        background-position: ?
center;
        background-position: ?
top;
        background-repeat: ?
no-repeat;
        background-attachment: ?
fixed;

Hinter dem Text erscheint nun ein Bild (Abbildung 7). Aufgrund der Eigenschaft background-repeat: no-repeat; wird es nur ein einziges Mal angezeigt. Die Eigenschaften background-position: center; und background-position: top; zentrieren die Grafik und ordnen sie zugleich an der Oberkante des umgebenden Elements an, damit sie sichtbar bleibt. Mit dem Eintrag background-attachment: fixed; erreichen Sie, dass das Bild, egal was Sie tun, auf seiner Position bleibt. Mit Hilfe von CSS versehen Sie verschiedene Arten von Elementen mit Hintergrundgrafiken: sogar Links.

Abbildung 7: Hier dreht sich der Designer im Grabe um, aber das Prinzip wird klar: für die meisten HTML-Elemente können Sie Hintergrundbilder anlegen.

Auch Links verändern Sie nach Belieben. Gönnen Sie dem Hintergrund des Links eine andere Farbe, entfernen Sie die Link-Dekoration oder versehen Sie den Link mit einem Rahmen, indem Sie einfach das zentrale Style Sheet ergänzen:

a:link { color: white;?
 background-color: #CCCCCC;?
 text-decoration:none; }
a:hover { color: white; back?
ground-color: red; text-deco?
ration:none; }
a:active { color: orange; te?
xt-decoration:none; }
a:visited { color: grey; back?
ground-color: red; text-deco?
ration:none; }

Ungenutzte Links erscheinen nun weiß und mit grauem Hintergrund (Abbildung 8). Bewegen Sie die Maus über einen Link, verfärbt sich der Hintergrund rot, klicken Sie auf den Link, wird der Text orange. Besuchte Links wechseln die Farbe und erscheinen grau mit weißem Hintergrund. Was passiert aber, wenn Sie einige blaue und einige schwarze Links benötigen? Sicher wollen Sie auch nicht, dass alle Bilder auf der linken Seite erscheinen! In diesem Fall kommt die Vererbung ins Spiel.

Abbildung 8: Ungenutzte Links erscheinen mit grauem Hintergrund und weißer Schrift. Bewegen Sie den Mauszeiger auf den Link, wechselt die Farbe des Hintergrunds und die Schriftfarbe.

Eltern haften für die Kinder

Das Thema der Eltern- und Kind-Elemente tauchte vorhin bereits auf. Ein Eltern-Element geht dem Kind-Element voraus und umschließt dieses. Das Tag $b§ in der Datei index.html ist das Kind-Element von $p§, das wiederum das Kind-Element von $body§ ist. Liegt ein Element dazwischen, spricht man von Vorfahren und Nachfahren. Der $body§-Tag ist der Vorfahre des $img§-Elements, umgekehrt ist das $img§-Element der Nachfahre – nicht das Kind-Element – des $body§-Elements. Geschwister-Elemente heißen so, weil sie gleichwertig nebeneinander stehen, wie das $p§-Element und das dritte $b§-Element in der Grafik (Abbildung 9).

Abbildung 9: Der Baum skizziert die Hierarchie der Tags im HTML-Quelltext. Nebeneinander stehende Tags sind Geschwister-Elemente, aufeinander folgende sind Eltern- und Kind-Elemente.

Interessant an der Vererbung ist, dass Kind-Elemente in der Regel Eigenschaften ihrer Eltern-Elemente übernehmen. So nimmt ein Bild gewöhnlich nicht mehr Raum ein, als die Tabelle oder Zelle, in der es sich befindet, oder erbt das Kind-Element $b§ die Schriftgröße von $p§. Die Vererbung nutzen Sie zu Ihrem Vorteil, indem Sie Eigenschaften über so genannte Selektoren gezielt weitergeben. Dafür gibt es mehrere Möglichkeiten:

p b { color:green; }
p > b { color:blue; }
p + b { color:orange; }
* { color:violet; }

Die vier Selektoren setzen Sie alternierend in das Style Sheet ein, wodurch Sie unterschiedliche Effekte hervorrufen. Der Kontext-Selektor in der ersten Zeile stellt sämtliche $b§-Tags, die sich innerhalb des $p§-Tags befinden, in grüner Farbe dar. Der Kind-Selektor an der zweiten Stelle färbt das $b§-Element nur dann blau ein, wenn es ein direktes Kind-Element und kein Nachfahre von $p§ ist. Das +-Zeichen in der dritten Zeile sorgt dafür, dass die Formatierung auf das Element zutrifft, das nach $p§ kommt und zugleich von dem selben Eltern-Element abstammt. Im Beispiel (Abbildung 9) erfüllt das $b§-Element in der zweiten Zeile von oben diese Bedingung. Es ist das nächste Elemente nach $p§ und hat ebenfalls den $body§-Tag als Eltern-Element. Daher wird der Text innerhalb des $b§-Tags orange gefärbt. Im vierten Fall tritt der so genannte universelle Selektor auf den Plan. Er färbt einfach sämtliche Elemente ein, die über keine eigene Farbeinstellung verfügen.

Hefte raus, Klassenarbeit!

Als sehr hilfreich erweisen sich die so genannten Klassen-Selektoren, die man auch kurz als Klassen bezeichnet. Sie haben die Möglichkeit, jedes Style Sheet einzeln zu adressieren, indem Sie eigene Klassen definieren. Fügen Sie einfach die folgende Zeile in Ihr Style Sheet ein:

*.wort {color: blue;}

Öffnen Sie dann die Datei index.html und nehmen Sie folgende Änderung im Text vor:

… möglichst $b ?
class="wort"§nichtssag?
end$/b§ sein …

Zunächst generieren Sie im Style Sheet einen Wert {color: blue;}, der sämtlichen Tags (*) zugeordnet wird, die zur Klasse .wort gehören. Welche Tags zur Klasse .wort gehören, legen Sie im zweiten Schritt in der Datei index.html fest. Jedes Tag, das Sie mit dem Zusatz class="wort" versehen, übernimmt automatisch den Wert der Klasse .wort, wird also blau eingefärbt.

In CSS können Sie auch komplett eigene Tags entwerfen. Definieren Sie dazu zunächst ein eigenes Tag im Style Sheet, zum Beispiel rotbuchstabe {color: red;}. Wenn Sie in Ihr HTML-Dokument $rotbuchstabe§ beliebiger text $/rotbuchstabe§ einfügen, wird der darin enthaltene Text rot eingefärbt.

Container Love

Wollen Sie eine komplette Seite mit Hilfe von Style Sheets konstruieren, lohnt es sich, so genannte Container zu bauen. Dabei teilen Sie ihre Web-Seite in fest definierte Segmente auf, die Sie über die Eigenschaft position und mit Hilfe von $div§-Tags und Klassen festlegen. Übertragen Sie dazu die Zeilen aus Listing 2 in das Style Sheet. Den Inhalt des $body§-Tags in der Datei index.html rahmen Sie anschließend mit Hilfe von $div§-Tags ein:

        $body§
        $div class="container_?
zentral"§
        …
        $/div§
        $/body§

Der Seiteninhalt befindet sich nun innerhalb des $div§-Containers (Abbildung 10). Auf diese Weise legen Sie beliebig viele Container an und sparen sich mitunter Frames und Tabellen (Abbildung 11).

Abbildung 10: Das Container-Prinzip: Der Inhalt wird in einer Box verpackt, die Sie beliebig positionieren können. Dank der Scrollbalken werden auch Inhalte angezeigt, die größer sind als der Container.

Weil die Eigenschaft position den Wert fixed erhält, klebt der Container auf einer festen Position, nämlich 0% vom oberen und 30% vom linken Bildschirmrand entfernt. Über width und height stecken Sie das Ausmaß der Fläche ab, die Schriftfarbe setzen Sie mit color auf rot und ein padding von 20 Pixeln stellt einen breiten Abstand der Inhalte zum Rahmen her. Der Hintergrund der Fläche erscheint in grauer Farbe. Mit Scrollbalken, die aus der Anweisung overflow: scroll; entstehen, verhindern Sie, dass die Inhalte aus dem Rahmen fallen. Die Eigenschaften position: absolute und position: relative bergen alternative Möglichkeiten zur Positionierung. Absolut positionierte Elemente erzeugen Blöcke, die sich beim Scrollen mitbewegen. Texte oder Bilder fließen um diese Blöcke herum. Relativ positionierte Container erscheinen auch als Blöcke, rücken aber zur Seite, falls andere Inhalte Platzbedarf anmelden.

Abbildung 11: Lassen Sie Frames und Tabellen ruhig weg: Die Aufteilung der Seite mit Hilfe von Containern macht viele der alten HTML-Schachtellösungen überflüssig.

Eine weitere hilfreiche Eigenschaft besteht schließlich darin, dass sich Container stapeln lassen. Dafür erweitern Sie das Position-Element um einen z-index. Dieser besteht aus einer positiven oder negativen ganzen Zahl, wobei der Container mit der höchsten positiven Zahl weiter vorn steht. CSS löst also viele Layout-Probleme von HTML: Es lohnt sich, die Möglichkeiten einmal selbst zu testen.

$p§
$b§Rot$/b§ ist eine tolle Farbe. $a href="http://ww.example.org"§Saetze wie diese$/a§ werden
$br§ gern von Webdesignern verwendet, um ihre Layouts vorzufuehren.$br§ Sie sollen moeglichst
$b§nichtssagend$/b§ sein, um den Betrachter $br§ nicht vom Design abzulenken.
$/p§
Diese b-Tags liegen $b§ausserhalb$/b§ des ersten p-Tags.

div.container_zentral {
        position: fixed;
        top: 0%; left: 30%;
        background: #CCCCCC;
        width: 400px;
        height: 600px;
        color: red;
        border: 1px solid black;
        padding: 20px;
        overflow: scroll;
}