Style @ PS-Trainer

Die "Programmiersprache" des Internet, HTML, diente in den Anfängen des Internet nur zur Verbreitung von Texten. Die Möglichkeiten für Formatierung und Layout waren gering und orientierten sich an wenigen dazu vorgesehenen "Fix"-Formaten. Später wurden (z.B. von Netscape) zahlreiche mächtige Werkzeuge zur Formatierung ergänzt. Immer mehr Medien wurden integriert, die Formatierung lässt mittlerweile kaum noch Wünsche offen.

Heute hat sich das Web zu einer MultiMedia-Plattform entwickelt, weit umfangreicher und vielfältiger als die einstigen Vorstellungen reichten. Das erfordert eine Anpassung der Werkzeuge: Struktur, Inhalt und Formatierung werden voneinander getrennt.
Dieser Artikel bietet Informationen zum Thema Style, das aktuelle Werkzeug für alles, was unter die Stichworte Stil und Formatierung im Webdesign fällt.

Alt und neu:
Alle HTML-Elemente, die Formatierung zum Inhalt haben, werden durch CSS (cascading style-sheets) ersetzt. Dort, wo sie vorhanden sind, können sie getrost noch ein Zeit lang bleiben. Auf neuen Webseiten sollte man sie allerdings nicht mehr einsetzen:
<b>fett</b>, <i>kursiv</i>, <u>unterstrichen</u>,
<basefont>, <font>Schrift, Farbe, Grösse, Hintergrund</font>,
<blockquote>Einzug</blockquote>,

<center>zentriert</center>

Diese Attribute werden überflüssig: align, background, bgcolor, border, bordercolor, color, face, leftmargin, marginheight, marginwidth, rightmargin, size, topmargin, ...

Die Liste ist unverbindlich und unvollständig, kann aber einen Eindruck vermitteln. Falls ihnen diese Angaben nichts sagen, dann werfen sie einmal einen Blick auf den Quelltext von Webseiten: <center> ist schon lange "out", aber <font> wird allgemein noch sehr oft eingesetzt.

Alte HTML-Elemente werden nicht durch neue ersetzt: An deren Stelle treten Attribute innerhalb der HTML-Elemente bzw. ganz neue weitreichende Style-Konzepte.

Die neuen tags <style> und <link>, die neuen Attribute class und style. Diese Eingrenzung ist der Gewinn der Ausgliederung von Style-Elementen aus HTML.

Auf der anderen Seite kommt eine neue Technik der Formatbeschreibung dazu: CSS als "Beschreibungs-Sprache" mit einer grossen Anzahl eigener Sprach-Elemente.

Gute HTML-Editoren (Programme zur Erstellung von Webseiten) erlauben die Einstellung, styles an Stelle veralteter tags und attributes zu verwenden.

Begriffe:
Eine Webseite wird aus Objekten aufgebaut. Objekte sind durch symmetrische "tags" wie <body>...</body> begrenzt. Zwischen dem Anfang und dem Ende eines Objekts kann Text stehen (der auch als Text auf der Webseite angezeigt wird), aber auch andere Objekte, die selbst wieder Objekte enthalten können, usw.
Attribute: Um die Objekte näher zu beschreiben, kann man in das Start-tag Attribute integrieren, z.B. <font size="3" color="red"> ... </font>
Attribute sind in Paare Name="Wert" gegliedert, die untereinander durch Leerzeichen getrennt sind.

Mit <style> werden CSS-styles für eine ganze Webseite definiert, mit <link> externe Style-Dateien in eine Webseite integriert.

Das Attribut style erlaubt die Festlegung von styles für einzelne HTML-Objekte:
<div style="color:blue; font-size:12pt;"> ... </div>
Das Attribut class erlaubt die Anwendung vor-definierter styles auf HTML-Objekte:
<div class="myclass"> ... </div>
Die einzelnen CSS-Elemente sind in Paare Name:Wert gegliedert, die untereinander durch ; getrennt sind.

3 Ebenen der Anwendung:
CSS-styles können bei weitgehend gleicher Syntax ("Grammatik") auf verschiedenen Ebenen eingesetzt werden. Ausschlaggebend ist die gewünschte Reichweite eines styles:

(1) Geringe Reichweite: Wenn es notwendig ist, ein einzelnes HTML-Objekt zu formatieren, dann setzt man das style-Attribut innerhalb des HTML-tags ein. Das sollte allerdings eher selten vorkommen, denn diese Art der Anwendung ist ähnlich aufwendig wie die alte Arbeitstechnik.
Beispiel:
<div style="color:red;"> Beispiel</div>

(2) Reichweite 1 Webseite: Am Anfang der Seite kann man für jedes beliebige HTML-Objekt eigene Styles festlegen:
<style>
body {background-color:#E8E8E8; font-size:10pt;}
table {background-color:#CCFFFF;}
</style>

Diese styles werden ohne weitere Massnahmen auf alle betreffenden HTML-Objekte angewendet. In diesem Beispiel wird der gesamte Hintergrund hellgrau (#E8E8E8) gefärbt, die Schrift der gesamtern Seite in Größe 10 Punkt gesetzt.

Alle darauf vorhandenen Tabellen zeigen hellblauen (#CCFFFF) Hintergrund.

Vorteil: Styles werden mit wenig Aufwand in zentralen <style>-Objekten definiert. Abweichungen sind möglich, nur mehr diese müssen einzeln formatiert werden.

An zentraler Stelle lassen sich auch eigene Styles definieren:
<style>
.mystyle {color:purple; font-weight:bold;}
</style>
Eigene Styles werden mit dem class-Attribut angewendet:
<div class="mystyle"> Eigener Stil</div>

(3) Reichweite mehrere Webseiten: Mit einer höchst einfachen Methode wird die CSS-Technik auf mehrere Webseiten, typisch auf ein ganzes Web, angewendet: Man schreibt die style-Definitionen auf eine eigene, kurze Text-Datei, ein Stylesheet.
Eine CSS-Datei lässt sich mit jedem Text-Editor, natürlich auch mit allen professionellen HTML-Editoren herstellen und ändern. Sie enthält nur die CSS-Inhalte der style-Definitionen, keine eigenen <style>-tags.

Um die gleiche Wirkung wie im Beispiel (2) für beliebig viele Webseiten zu erzielen, schreiben sie folgenden Text in eine Datei (z.B. my.css)

body {background-color:#E8E8E8; font-size:10pt;}
table {background-color:#CCFFFF;}
.mystyle {color:blue; font-weight:bold;}

Um diese Datei auf einer Webseite zu verwenden, setzen sie das <link>-tag am Anfang (im header) der Seite ein:
<link rel=stylesheet type="text/css" href="my.css">
Mit dieser Technik können sie die grösste Wirkung bei geringem Aufwand erzielen: Eine kleine Änderung in der CSS-Datei wirkt sich sofort auf alle (!) Webseiten aus, welche diese CSS-Datei ge-linkt haben.

Ein erfreulicher Neben-Effekt von CSS-stylesheets: Sie werden sanft dazu gedrängt, sich eigene, typische Formate zurechtzulegen, die sie dann überall einsetzen können. Damit wird die "Zusammengehörigkeit" ihrer Webseiten deutlich, sie entwickeln eigene "Identität". - Auf diese Weise lassen sich Vorschriften für Layout und Formatierung auch besonders einfach und effizient an andere MitarbeiterInnen oder Geschäftspartner weitergeben. Und wenn es ihnen gefällt, dann ändern sie eben den Stil ihres gesamten Webs in wenigen Minuten ...

Aktuelle Daten dieser Seite	Letzte Änderung: