Das tag, das Skript, der Quelltext

Das Englische hat sich im Internet eingebürgert.
Für viele Bezeichnungen im Internet gibt es kaum ein deutsches Äquivalent. Einige Worte wurden mittlerweile eingedeutscht: zB browsen, floaten, coden usw.

Wie in der Schifffahrt kann man das Englische in Bezug zum Internet als Verkehrsprache, als Standard betrachten.

Das Skript

Oft stößt man auf die Bezeichnung Skript.
Als ein Skript kann jede Form einer Computeranweisung bezeichnet werden.

Html als rudimentäre Computersprache stellt allgemeine Anweisungen und Mittel zur Kennzeichnungen eines Textes zur Verfügung. Aber html muss von einem Browser verstanden werden. Der Quelltext, der in html geschrieben ist, ist daher ein Skript, und die sogenannten CSS-Anweisungen (in einem Stylesheet) sind ebenso ein Skript.

Auch Suchroboter orientieren sich an einem Skript der Webseite, die sie durchsuchen.

Der Quelltext ist also fundamental, weil er alles enthält, was ein Lesegerät (also der Browser) benötigt, um mit einem Text etwas anzufangen, ihn darzustellen oder Grafiken zu positionieren.

Es gibt einige, die meinen, html sei ganz bestimmt keine Computersprache. Nun genau genommen ist es das, da das html-Skript dem Browser sagt, was zu tun ist, und der Browser sagt es dem Betriebssystem und dieses dem Computer. Selbst Javaskript oder C+ ist nur eine Vereinfachung von Anweisungen, die letztlich alle dem Computer (den Prozessbestandteilen) sagen, was zu tun ist. Und oft wird auch ein sogenannter Interpreter zwingend erforderlich, den wir in Bezug zu html mit dem Browser finden.

Fliesstext

Der Text, den man auf seinen Webseiten präsentieren will, wird innerhalb von tags gesetzt, und als Fliesstext bezeichnet.

Html-Maskierungen

Manchmal kommen innerhalb des Quelltextes besondere Zeichen vor, die umgeschrieben wurden, oder anders gesagt, ihre wahre bedeutung wurde vor dem html maskiert. So wird zum Beispiel das Zeichen

durch

&lt;

im Quelltext dargestellt - in der Anzeige des Browser wird das Zeichen wiederum richtig angezeigt als < (es wird sozusagen übersetzt).

Dies gilt für viele Sonderzeichen, die - weil im Quelltext stehend - keine Befehls-Syntax ergeben sollen!

Die tags, also zB <body>, werden im Quelltext so dargestellt, wie sie dort auch geschrieben werden, aber wenn die tags nicht als Befehl zu interpretieren sein sollen (!), schreibt der html-Editor gewöhnlich die verwendeten Zeichen, die Bestandteile von html-Anweisungen sein können, um.

Manchmal wird ein Umlaut wie ä, ö, ü im Quelltext umgeschrieben. Aus "persönlichen" wird: persönlichen. Nicht immer scheint jeder html-Editor in den Ausmaßen der Übersetzung wie ein anderer Editor vorzugehen. Würde man aber die Webseite mit dem notepad öffnen, könnte man alle diese Umschreibungen erkennen. Mancher html-Editor zeigt uns also in seiner Quelltext-Ansicht nicht alle Umschreibungen an.

Es ist wohl so, dass die modernen Browser die tags selektieren, die eine verstehbare Anweisung enthalten. Wenn man dann nur > schreibt, wird dieses Zeichen dargestellt. Aber schreibt man <p>, dann erkennt der Browser (und manche html-Editoren) ein gültiges html-Tag und es würde interpretiert, und nicht als Fliesstext dargestellt; - wenn man also <p> auf dem Bildschirm darstellen will, muss man es umschreiben - wenn man mit zB dem Notepad seine Webseiten editiert oder mittels seines html-Editors in der Quelltextansicht schreibt.

Ansonsten erledigt das Umschreiben gewönlich der html-Editor, den man benutzt, und der eine What-You-See-Is-What-You-Get Ansicht (WYSISYG) ermöglicht. Er zeigt in der WYSISYG Ansicht, was man auf dem Bildschirm sieht, und schreibt in den Quelltext die richtigen Zeichen.

Das tag und das html-Element

Das Wichtigste in Bezug zu html ist das tag.

Tag bedeutet im deutschen:
Etikett, Marke, Auszeichner.

Ein Anfangstag sieht zB für einen Textabsatz so aus:
<p> und das dazugehörende Endtag ist </p>.

Es handelt sich mit beiden tags um ein html-Element. Ein tag hat nur entweder mit einem Anfangs- oder einem Endtag zu tun. Spricht man von beiden, sollte man den Begriff html-Element verwenden.
Wenn man von tag spricht, meint man nicht die eventuell darin vorhandenen Attribute und Werte.

Als html-Element bezeichnet man gewöhnlich einfach das Anfangstag, und betrachtet das notwendige Endtag als zwingend dazugehörend.

Was zwischen beiden tags steht, also der Fliesstext, wird als Teil des html-Element betrachtet.

Dieser <p>-Textabsatz kann wie jedes andere html-Element bestimmte Formatierungen tragen (das sind Attribute und Werte).

Ein Endtag setzt sich immer mit einem Schrägstrich zusammen und ist als solcher Endtag zu erkennen, diesen hier: / und er steht immer vor dem entsprechenden Kürzel. Es gibt nur sehr wenige html-Elemente, die kein Endtag benötigen, dazu gehört das <br> Element, das einen einfachen Zeilenumbruch erzwingt, ohne einen ganzen Absatz zu erzeugen.

Ein anderes html-Element wird für die Darstellung von Bildern verwendet und kennt auch kein Endtag, es ist das <img>-Element.
Es soll an dieser Stelle nicht verschwiegen werden, das das <img>-tag notwendige Attribute aufweist und nicht aus <img> allein bestehen darf, sondern zB auftauchen darf als:

<img alt="Bildname" src="bilddatei.gif" height="60" width="400">

Hier sieht man auch gleich, dass solche tags Attribute und Werte aufweisen können. Diese machen die Angelegenheit des Lernens von html auch spannend.

Es ist zunächst wichtig zu begreifen, dass in der Regel zu einem Anfangstag immer das spätere Endtag gehört. Sie treten immer nur paarweise auf. Das heisst, ein html-Element (bis auf wenige Ausnahmen) muss immer durch ein nachfolgendes Endtag geschlossen werden.

Ein Beispiel, wie es im Quelltext aussieht:

<p>Dies ist ein Textabsatz. Dieser Text wird durch die Formatierungen beeinflusst,
die dem html-Element p gegeben wurden. Das html-Element p gilt in einem Bereich, der
bis zum "End-tag" des betreffenden html-Elements gilt.</p>

<h1>Das ist eine Überschrift ersten Grades</h1>
<h3>Das ist eine Überschrift dritten Grades</h3>

Der Textabsatz <p> ist übrigens fundamental für jeden Text.

Der Textabsatz bildet einen eigenständigen Blockbereich.
Solche Blöcke bedeuten eine wichtige Rolle für die Strukturierung einer Webseite aber auch für das Konzept eines Layouts, welches man gestalten möchte. Zu den Blockelementen komme ich noch weiter unten. Am wichtigsten ist seine Eigenschaft, eine eigene Zeile zu beanspruchen und zu erzeugen.

Ein Kürzel p muss also von diesen Zeichen <> umschlossen sein und ergibt <p>, damit es als eigentliches html-Element zu erkennen ist.

Eine Überschrift kan zB mit <h1> gebildet werden. Auch dieses html-Element trägt bestimmte Formatierungen, die es von anderen html-Elementen unterscheidet. Und es gibt noch viel mehr Kürzel, bzw. html-Elemente.

Durch diese tags wie <p>, <h1> und ihren Endtags entstehen hierarchische Strukturen des Dokuments. Typischerweise zum Beispiel in dieser Form:
<div>
<h1></h1><p></p>
<h2></h2>
<ul><li></li><li></li></ul>
<p></p>
</div>
Hierarchisch gesehen steht hier das Div-Element an oberster Stelle und die anderen html-Elemente sind darin verschachtelt oder eingeschlossen.

Ein sauberer Quelltext zeichnet sich dadurch aus, dass das ganze html-Skript im Sinne der Computersprache fehlerfrei ist, und dass zudem die Strukturierung irgendwie übersichtlich bzw. logisch geordnet ist (was aber eher zum guten Stil gehört, weil es - im Gegensatz zu offensichtlichen Skriptfehlern - mehr der menschlichen Willkür gehört, wie man bei der Strukturierung genau vorgeht; der Browser versteht die Strukturierung nicht besonders, allerdings kann es manche Layoutprobleme allein dadurch geben, dass das Dokument nicht sauber strukturiert ist und jeder Browser damit anders umgeht!).

Der von tags umschlossene Bereich, also das, was dazwischen steht, der eigentliche Fliesstext, ist eigentlich nur besonders ausgezeichnet, eben durch die tags. Dieser Bereich, bei dem es sich um einen darzustellenden Inhalt handelt, ist damit ein Bestandteil des html-Elementes. Er wird ausgezeichnet durch html-Elemente!

Die Anweisung selbst, zum Beispiel das html-Element <p>, erscheint nicht im Fliesstext (Fliesstext ist das, was auf dem Bildschirm dargestellt wird).
Die Anweisung bezeichnet nur einen Textabsatz, der nach dem Anfangs-tag folgt, bis dass das Endtag gegeben ist.

Der Fliesstext? Das ist der normale Text, den man veröffentlichen will, der Inhalt. Zum Beispiel dieser Text, der Dir hier vorliegt.

Was ist Auszeichnung ?

Ein html-Element sorgt für eine Anweisung, die den Fliesstext einerseits strukturiert und andererseits bezüglich der Darstellung auf einem Ausgabemedium (zB Bildschirm) mit bestimmten Eigenschaften und Werten auszeichnet.

Es sind Auszeichnungen, die die Darstellung des Fliesstextes optisch beeinflussen oder den Fliesstext, Grafiken und ähnliches positionieren.

Positionieren kann man nur mit Blockelementen, das wird im Zuge der Beschäftigung mit html und CSS bald einleuchtend werden.

Die Positionierung ist für viele Fragen des Designs einer Webseite natürlich sehr wichtig, man will ja auch etwas gestalten und nicht einfach nur einen Text veröffentlichen. Dazu würde man sich sicher nicht mit CSS beschäftigen und html als Anfänger nicht besonders vertiefen wollen.

Früher hat man einfache Tabellenlayouts erstellt, die zwar einfachste Positionierung ermöglichen, jedoch auch viele Nachteile mit sich bringen.
CSS ist dagegen mehr als nur eine Alternative. CSS macht nur anfänglich vielleicht Schwierigkeiten, aber ist bald schon spielerisch leicht handzuhaben. Viel leichter, als wie man mit html gewisse Positionierungen erreichen könnte, kann man zB einen div-Container benutzen (auch Layer genannt).
Mit CSS erhält man übrigens auch mehr Möglichkeiten der Positionierung, als wie es allein mit Tabellen möglich wäre.

Es sind in jedem Fall auch Strukturierungs-Elemente. So wird eine Überschrift, die zwischen den tags <h1> und </h1> steht, als solche immer erkennbar sein, und mit der entsprechenden "Bedeutung" der Überschrift versehen.

Das ist auch für Suchmaschinen wichtig, da sie anhand der Strukturierung eines Textes die Relevanz von im Text auftauchenden Worten (=Suchbegriffe) bestimmen. Überschriften sollten daher für den Text immer einen wichtigen Begriff enthalten, da Suchmaschinen den Überschriften besondere Relevanz beimessen und nachfolgenden Text weiterhin darauf untersuchen - und so wird klar, wieviel Sinn darin steckt, wenn man einen Text mit <p>, <h1>, <h2> usw. strukturiert.

Übrigens: nicht jede Überschrift soll ja gleich gross sein. Die erste Überschrift, die am Anfang des Textes steht, wird in der Regel besonders hervorgehoben, aber weitere Überschriften können im Text folgen, die nicht so gross sein sollen. Daher gibt es die verschiedenen Möglicheiten von <h1>, <h2> usw.. Sie sind auch vom Standard her unterschiedlich formatiert: <h1> ist standardgemäß am grössten.

All diese durch den Standard bedingten Formatierungen kann man selbst - im Rahmen seiner Webseite - nach Belieben ändern.

CSS-Skript

Die heutzutage nicht mehr wegzudenkenden CSS-Skripte beinhalten Anweisungen, wie ein bestimmtes html-Element mit Eigenschaften und Werten ausgestattet werden soll.

Die CSS-Skripte tauchen im sogenannten Stylesheet auf. Man ersieht an diesem Begriff schon, dass es um einen einheitlichen Stil geht (stylesheet), den man auf seinen Webseiten anwenden kann: man kann dieses Skripte bequem kopieren oder sogar ein solches Skript auslagern (man nennt es dann externes Skript), so dass verschiedene seiner Webseiten nur noch auf ein einziges Skript zurückgreifen brauchen.

Man kann, anstatt ein Stylesheet zu benutzen, aber auch CSS direkt auf die tags anwenden (inline-style) oder beides kombinieren. Auch die CSS-Anweisungen, die in den spitzen Klammern stehen (im stylesheet), können unterschiedlich bezeichnet werden: zB als Anweisungen, Formatierungen, Selektoren, styles, Regeln.

Zum CSS-Skript folgen weiter unten detaillierte Erläuterungen.

DocType und der Head-Bereich der Webseite

Man gewöhnt sich schnell an die Syntax und Form des für jedes Dokument notwendigen Bereiches, der am Anfang einer Webseite steht:

<!doctype> <html> <head> und <meta content>.

Mit <html> wird das Dokument als html gekennzeichnet. Im <head>-Bereich stehen weitere Anweisungen, die nicht auf dem Bildschirm dargestellt werden, aber wichtige Informationen über die Webseite enthalten, einerseits technische Hinweise für die Browser, externe Daten, die zusätzlich eingeladen werden sollen, und zum Teil kann es sich auch um die Beschreibung des Inhaltes handeln (mittels meta content).

Was nach dem <body> tag steht, ist dazu gedacht, auf dem Bildschirm dargestellt zu werden, falls es sich um Fliesstext handelt (html-tags werden auch im body nicht dargestellt).

Mit dem <meta content> werden verschiedene Inhaltsangaben zum Dokument getroffen und besonders auch der Zeichensatz (charset) des Dokuments bestimmt - die charset-Angabe sollte niemals fehlen , denn das englische oder amerikanische System hat zum Beispiel eine andere Tastaturbelegung als wie die deutsche oder schweizerische Tastatur. So wird verhindert, dass eine Webseite unter Umständen mit anderen Zeichen dargestellt wird, als wie es vom Webseitenersteller beabsichtigt wurde; Umlaute werden sonst statt ö zu einem =; und so weiter.

Nachdem <head> geschlossen wurde, durch </head>, kommt der eigentliche Body der Webseite mit dem tag <body>.

Der Body wird erst am Ende des Dokuments geschlossen. Ebenso am Ende des Dokumentes geschlossen wird <html>, welches zB in der Form <html lang="de-de"> geöffnet werden kann und mit der language Anweisung so auch gleich einen Hinweis auf die benutzte Sprache des Dokuments gibt. Das gesamte Dokument wird mit dem <html>-tag als html-Dokument gekennzeichnet, und mit lang einer Sprache zugwiesen. Da zuerst das <html>-tag im Dokument geöffnet wird, wird es auch am Ende des Dokuments zuletzt geschlossen, daher sieht das Ende eines jeden html-Dokuments auch immer so aus: </body></html>.

Der Bereich zwischeb <body> und </body> bezeichnet nur den "Körper" der Webseite, also den Bereich, wo Fließtext stehen kann, der ja meist der ganze Sinn einer Webseite ist. Im Grunde ist der Body also ein abgetrennter Bereich, und vor ihm steht ein anderer abgetrennter Bereich, nämlich der <head>-Bereich.

Einleitende und schliessende Head- und Body-tags können nur einmal im Dokument auftauchen.

Diese einfache Strukturierung kann man sich leicht merken:

Das typische Schema eines Anfangsbereichs mit den notwendigsten Angaben sieht zB für eine deutsche Webseite (aus Deutschland) wie unten stehend aus.

Man kann eine solche Vorlage immer wieder in den Head-Bereich neu zu erstellender Webseiten kopieren. Zur besseren Übersicht habe ich die Elemente farblich voneinander unterschieden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:
//www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head> 
<meta http-equiv="content-language" content="de">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Irgendein Seitentitel</title>
</head>
<body>

Nach //EN" sollte ein Leerzeichen stehen,
bevor "http://www.w3 folgt.
Generell scheint es aber valide zu sein, auch wenn man die beiden Anführungszeichen ohne Leerzeichen unmittelbar nebeneinander setzt.

Man findet solche Deklarationen und weitere Informationen zum Doctype auf folgender Webseite von Self.html: http://de.selfhtml.org/...htm#dokumenttyp

Die sprachliche Anweisung lang wird in dem obigen Beispiel bei <html> als Attribut hinzugeschrieben, was vor allem für Suchdienste und Übersetzungsdienste nötig ist; aber auch aus allgemeinen Erwägungen sollte man immer die hauptsächlich benutzte Sprache des Dokuments angeben. Man kann die Sprache auch zusätzlich in einem <meta> tag angeben, was bei einigen Validatoren erst zu einem validen Skript führt, also
<meta http-equiv="content-language" content="de">.

Natürlich kann man auch nur <html> an den Anfang setzen, um das Dokument als html zu kennzeichnen.

Es scheint jedenfalls erst wirklich 100% valide, wenn man auf jeden Fall in einem <meta>-tag die Sprache angibt nach obigen Format. Man kann sowohl bei der html- als auch der meta-Sprachanweisung statt "de" noch genauer schreiben "de-DE" wenn man aus Deutschland kommt (und nicht aus Österreich oder Schweiz), um gewisse Spezifizität zu schaffen. Länderkennung für Österreich: at. Andere Länder siehe: http://meta.rrzn.uni-hannover.de/buecher/inet/all-inet-a1.html

Zum 100% validen Skript gehört auch eine meta-Anweisung über die im Dokument verwendete style-sheet Sprache - das wäre, wenn man wie zu erwarten CSS benutzt, dann wie im folgenden Format:

<meta http-equiv="Content-Style-Type" content="text/css">

Es gibt noch weitere Einsatzmöglichkeiten von <meta>-tags, die sinnvoll sind. Dazu gehören unter anderem vor allem das <meta>-tag "description" und "keywords". Nähere Angaben dazu auf self.html: http://de.selfhtml.org/html/kopfdaten/meta.htm

Dass dieser "body"-Bereich einen "Körper" bedeutet, passt begrifflich (body im Englischen, zu deutsch "Körper").

Dieser body ist das tragende Fundament einer Web-Seite bzw. trägt den eigentlichen Fliesstext und alle anderen für den darzustellenden Text massgeblichen tags. Im Headbereich stehen Anweisungen , die nötig sind, damit der ganze nachfolgende "Körper" mitsamt allen Anweisungen einer Webseite auch vom Browser richtig verstanden werden kann. Der Headbereich enthält weitere Angaben, die zwingend nötig sind, zB den Titel. Die tags für den Titel müssen immer angegeben werden, selbst wenn zwischen den tags <title></title> nichts stehen sollte. Es sollte aber eine Angabe gemacht werden und wenn es ein Leerzeichen ist.

Im Quelltext ist es übrigens belanglos, ob die Anweisungen in einer (langen) Zeile stehen, oder über mehrere Zeilen verteilt sind. Denn es kommt im Sinne einer standardgemäßen Interpretation auf die Syntax der Anweisungen an, das heisst auf die tags, evtl. Leerzeichen innerhalb der tags und die richtige Schreibweise. Allein die tags und Zeichen, die gesetzt werden, sind von Belang. Leerzeichen werden jedoch als Fliesstext interpretiert, sofern sie im <body>-Bereich stehen.

Leerzeichen brauchen im Quelltext übrigens zwischen verschiedenen tags nicht zu stehen: </head><body> ist also erlaubt.
Ausserhalb des Fliesstextes, also ausserhalb des <body>-tags, sind Leerzeichen irrelevant. Es sei denn diese befinden sich innerhalb der tags, denn darin haben Leerzeichen eine syntaktische Bedeutung (also innerhalb von < und >).

Manche Editoren ändern die optische Strukturierung wieder, die man vielleicht selbst mittels Zeilenumbrüchen im Quelltext vorgenommen hat. Diese werden zwar gespeichert, aber sind nicht relevant für die Lesbarkeit eines Skriptes von Seiten der Maschine (des Browsers).

Es gibt einige Anweisungen innerhalb der tags, wo Leerzeichen natürlich wichtig sind, zB bei der direkten Formatierung: <body style="color: green;">. Das Wort "bodystyle" würde nicht verstanden werden.

Es ist wichtig, dass im Quelltext der Anfangsbereich der Webseite korrekt ist, es gibt jedoch verschiedene html-Varianten. Die empfehlenswerte Deklaration ist gegenwärtig die 4.01 strict Variante. Sie ist trotz der einfacheren transitional Variante für Anfänger durchaus geeignet, sofern man als Anfänger ohne Kenntnisse noch nicht versteht, wie es wirklich um einige Besonderheiten des html stehen könnte. Bedingung ist, dass man sich konsequent damit vertraut macht, was die Besonderheiten in der strict Variante sind.

Man wird nämlich dazu gedrängt, html in seiner Essenz zu verstehen. Es ist ein etwas anspruchsvollerer Dialekt, der aber dazu anleitet, mit dem Quelltext und dem Layout seiner Webseite ebenso anspruchsvoll und effizient umzugehen. Das fördert die Betonung auf die strukturelle Komponenten einer Webseite.

In dieser html-Variante strict dürfen alle inline-Elemente, zB das <span> Element, und der normale Fliesstext nur innerhalb von Blockelementen verwendet werden. Ein Blockelement ist zum Beispiel <p> oder <div>. Ein <div> Container, in den der Text geschrieben ist, genügt also bei der strict-Variante, um das <span> zu ermöglichen. In den reinen Body darf man also <span> nicht verwenden, es wäre sonst kein valides Skript, ebenso wie kein normaler Fliesstext im body stehen darf.

Wenn man aber zum Beispiel eine Web-Statistik betreibt (kann evtl. von einem kostenlosen Anbieter bezogen werden), ist die Skriptzeile, die man in seinen Webseiten einfügen muss, oft nicht valide, wenn das Dokument im strict-Modus deklariert ist; - dann sollte man, um astreines Skript zu haben, die transitional-Variante wählen!

Statistiken, die auch in der transitional Variante nicht valide sind, oder einseitig auf xhtml eingestellt sind, sollte man vermeiden - es sei denn man kann die xhtml Variante ohne weiteres auf normales html umstellen, indem man zB die schrägen Striche / an einigen entsprechenden Stellen entfernt, was aber wohl nur für Fortgeschrittene in Frage kommt. Die Anweisungen der Skripthersteller ,wie man da vorgehen soll, sind hier leider oft nicht exakt genug.

Besonderheiten

Wenn Du Frames benutzt, musst du einerseits einen bestimmten html-Dialekt benutzen.

Das ist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.
org/TR/html4/frameset.dtd">

In frames-Seiten kann es übrigens sinnvoll oder sogar notwendig sein, das Attribut target="_top" zu einem <a>-Element (Link) zu gebrauchen, sonst wird unerwünschterweise eine fremde Seite als Teil des eigenen Framesets geladen. Das übergeordenete Frameset, das selbst den Link nicht enthalten braucht, herrscht über die geladenen frames, das meist die Links enthält. Da gilt es genau aufzupassen.

Es besteht übrigens meines Wissens nach auch mit CSS die Möglichkeit, zu entscheiden wie ein neuer Link geöffnet werden soll (zB in einem neuen Tab oder Fenster), aber noch nicht jeder Browser unterstützt das!
In der strict-Variante gilt das <a target="_top"> als nicht zulässig. Manchmal will man aber vielleicht aus irgendeinem Grunde auch in der strict-Variante erzwingen, dass eine verlinkte Seite in demselben Fenster und nicht in einem neuen tab geöffnet wird.

Ich selbst nutze die transitional Variante, aus Gründen des Statistik-Skripts. Aber auch wegen der Möglichkeit, gelegentlich <a target="_top"> anzuwenden.

In der absolut ersten Zeile des Dokuments sollte nichts anderes stehen als wie die Doctype Deklaration, da der IE 6 und einige andere Browser ansonsten in den sogenannten Quirks-Modus schalten. Beim IE 6 wird das wichtige CSS-Boxmodell dann absichtlich falsch interpretiert. Es wäre sogar am besten, wenn man die gesamte DocType Deklaration in die erste Zeile schreibt, also ohne Zeilenumbruch.

Die URL am Ende der Deklaration, zB http://www.w3.org/TR/html4/strict.dtd ist nicht zwingend vorgeschrieben, aber wenn man sie ebenso mit in den Quelltextanfang schreibt, geht man auf Nummer sicher, so wird es jedenfalls von manchen Leuten gesagt.

Im Dokument, das durch die URL aufgerufen werden kann, stehen die Regelanweisungen für den im Quelltext benutzten html-Dialekt. Am besten wählt man einfach die ausführliche Deklaration, so wie in dem Beispielen oben.

Hinweis zu den Codebeispielen:

Der Satzpunkt oder das Komma hinter den gelb gefärbten tags in meinem Text, gehören von der Syntax her gesehen nicht zu den html-tags: also zum Beispiel <html>. Wie man in Unkenntnis der ganzen Angelegenheit vielleicht annehmen könnte. Sondern Punkt oder Komma dienen bloss der richtigen Interpunktion des Textes selbst, etwa <p>; oder <html>. Ein Satz sollte durch einen Satzzeichen beendet oder unterteilt werden (und ich bin da doch etwas konservativ). Ich habe die html-Tags gelb gefärbt, die Interpunktion ist dann wieder weiss gefärbt.

Html, Textverarbeitung und die Standardvorgaben

Html bedeutet im wahrsten Sinne eine Textverarbeitung. Es ist sehr hilfreich, über diese html-Werkzeuge der Textverarbeitung zu verfügen.

Mit CSS und stylesheets kann man zB dem <p> Element global und ein für alle Mal Eigenschaften und Werte zuweisen, die dann für alle <p> Absätze gelten.

Eine Webseite nur mit html, aber ohne CSS, bleibt ein weitgehend ungestaltetes Objekt, obwohl die grobe Strukturierung von <p> Textabsätzen und <h1> oder <h2> Überschriften gegeben ist.

Alle html-Elemente verfügen über eine standardisierte Vorgabe, die im Grunde nichts anderes als Eigenschaften und Werte beinhalten. CSS ist nur ein Mittel, auf einfache Weise diese Eigenschaften und Werte zu ergänzen oder neu zu bestimmen.

Zum Beispiel: Ein unterer oder oberer Aussenabstand ist im Standard gegeben, aber ein linker und rechter bei den meisten Elementen nicht.

Übrigens: Man kann eine beliebige Web-Seite "nur als html" (also nicht "komplett") auf seine Festplatte speichern, externe CSS-Stylesheets werden nicht berücksichtigt, interne, die im Dokument stehen werden dagegen mitgespeichert. Auf diese Weise sieht man den groben html-Standard, der mit gutem Grunde so gewählt wurde, weil es die einfachsten Strukturierungen erlaubt.

Manche Webseiten, die externe Stylesheets verwenden, kann man sich auf diese Weise ganz grob auf Basis des weitgehend unformatierten html ansehen - in html kommt alles untereinander, weil im Grunde jedes html-Element mindestens eine Zeile beansprucht. CSS kann diese Elemente dagegen mittels verschiedener Methoden (zB float) nebeneinander positionieren, ähnlich wie es bei einer Gestaltung mit Hilfe von Tabellen der Fall ist.
Du kannst diese Webseite "nur als html" auf deine Festplatte speichern, um zu sehen, wie html ohne CSS aussieht, da diese Webseite ein externes Stylesheet verwendet.

Die Eigenschaften und Werte, die den html-Elementen angeheftet sind, entscheiden, was mit den von tags umschlossenen Text-Bereichen konkret geschieht.
Was also über die Strukturierung hinaus, in einem nächsten Schritt, die Präsentation und Ausgabe des Textes betrifft.

So lange ein Text nicht auf einem Ausgabemedium erscheint, sind natürlich diese Strukturierungen nicht allein an die Präsentation gebunden, sondern können auch zB für Suchmaschinen relevant werden.
Es gibt eine traditionelle Haltung von Hartgesottenen, die besonderen Wert auf diesen Unterschied legen, dass Html an und für sich ein Mittel zur Strukturierung ist, und nicht ein Mittel zur Präsentation eines Textes. Man versteht diesen Denkansatz besser, wenn man sich vorstellt, dass die html-Dokumente nicht ausschliesslich durch visuelle Medien erfahrbar sein können, sondern auch durch Sprachausgabe (ein Text kann vom Computer vorgelesen werden) und wie bereits erwähnt von Suchmaschinen, Übersetzungsdiensten usw.

Normalerweise sind also diese html-Elemente vorformatiert, das heisst durch einen Standard definiert, es sind daher immer Eigenschaften und Wertzuweisungen im Spiel, die mit den html-Elementen verbunden sind! Aber mit eigenen Formatierungen hat man natürlich eine Menge zusätzlichen Freiraum der Gestaltung.

Diese html-Elemente können Attribute aufweisen,
die der direkten Formatierung eines tags dienen, was man auch inline-style nennt, zum Beispiel:

<p style="font-size: 17px;">

Der Bereich, in wie weit das angesprochene Element gültig ist, wird auch hier durch das schliessende tag </p> bestimmt. Das html-Element trägt verschiedene Eigenschaften, die ihm zugewiesen wurden, und es wendet diese Eigenschaften innerhalb des gekennzeichneten Bereiches an.

Das Besondere ist, dass die html-Elemente eine standardisierte Vorformatierung aufweisen. Diese kann man in Details, wie zB allein in der Schriftgröße, oder aber auch sehr umfassend nach eigenen Bedürfnissen verändern.

Das <p> Element erzeugt beim Setzen des Anfangstag <p> ungefähr eine Zeile Abstand nach oben, und ebenso mit dem Endtag </p> einen Zeile Abstand nach unten, und so kennzeichnet das Element p einen ganzen Absatz. Dieser Abstand wird tatsächlich durch die Eigenschaft "margin", zu deutsch: Aussenabstand erzeugt.

Du kannst das an diesem Text hier sehen, dass es den Lesefluß und Informationsaufnahme fördert, wenn Textabsätze als Blöcke entstehen.
Weiterhin kann man mit <br> einen Zeilenumbruch erzwingen, wo eine Zeile nicht übersprungen wird, sondern nur zum Zeilenbeginn der nächsten Zeile gesprungen wird. In den meisten Editoren wird dieser manuelle Zeilenumbruch mit "Shift-Return" erreicht.

Wenn Dir diese Aussenabstände und verschiedenen Formatierungen, die mit den html-Elementen einher gehen, unklar sind, probiere <p> und <br> selbst aus und schreibe in den Quelltext zunächst irgendetwas in den (unformatierten) body, das wird als "normaler Text" bezeichnet, dann setze einen Text innerhalb <p> und schreibe nach dem Endtag </p> erneut ein paar Worte.
Zum Beispiel:

<body>
Text ohne Absatz wird als normaler Text bezeichnet.
<p>Ein Text-Absatz</p>
Das ist wieder normaler Text nach dem Textabsatz.<br>Zeilenumbruch.

Das ist der beste Weg, sich mit den Wirkungen der html-Elemente vertraut zu machen, indem man Vergleiche schafft (der Text vor, innerhalb <p> und </p> und nach dem </p> Element). Man schaut sich einfach an, wie die html-Elemente in der Wirklichkeit (des Browsers) aussehen. Einige Editoren können die Ansicht des Browsers simulieren, das nennt sich üblicherweise WYSIWYG-Ansicht.

Ein nicht zu unterschätzender Vergleichstest um sich mit den Wirkungen und auch den Standards vertraut zu machen! Und auch in Bezug auf die Wirkungsweise von tags, die man selbst formatiert hat.
Probieren geht über Studieren.

Dasselbe kannst du auch mit den <h1> Überschriften tun, die standardmässig einen grösseren Abstand nach oben und unten erzeugen. Der Standard bezieht sich streng genommen nur auf die Vorgabe des Browsers; denn er ist es, der eine Webseite interpretiert; in der Regel dürften die verschiedenen Browser eine nahezu einheitliche Regelung aufweisen, wie gross zB ein oberer Aussenabstand von <p> sein soll.

Diese Abstände zu einem anderen (anschliessenden) html-Element werden standardmässig nicht durch ein analoges <br> oder mehrere <br> erzeugt, sondern durch die Bestimmung des oberen oder unteren Aussenabstandes, also mit margin. Das heisst, man kann zwar einen Abstand nach oben durch <br><br> erzielen, aber besser ist es natürlich, einen solchen oberen Abstand mit Werten wie Pixeln zu erzielen, die man dem entsprechendem Element als Eigenschaft anheftet. Man kann auch einen Abstand nach unten erzielen, indem man dem oberen html-Element einen unteren Abstand zuweist. Weist man den html-Elementen sowohl unteren als auch oberen Abstand zu, so vergrössert sich entsprechend der Abstand (sozusagen der Zwischenraum) insgesamt.

Das Element p stellt einen Block dar, und ein Blockelement erzeugt eine neue Zeile, beansprucht also Raum, ein Inline-Element tut das nicht; ein Aussenabstand bezieht sich auf den Abstand eines anderen Block-Elementes zu diesem Blockelement, zum Beispiel dem p-Absatz. Zu Inline Elementen kann man keinen Aussenabstand zuweisen, nur padding funktioiniert bei Inline-Elementen.

Setzt man den Aussenabstand auf null, so bleibt nur die Eigenschaft bestehen, dass das entsprechende Blockelement eine eigene Zeile beansprucht (die Zeilenhöhe ist dann entscheidend). Mehr zu Block und Inline-Elementen.

Du kannst also den Aussenabstand des <p> mit margin-top und margin-bottom anders definieren und damit auch die Abstände, die ein <p> Textabsatz erzeugt.

Apropos eigene Formatierungen:

Man braucht nicht alles "kurz und klein" zu formatieren, mit dem Gedanken, diese Dinge unbedingt kontrollieren zu müssen, denn die Standardvorgaben sind in der Regel einheitlich und sinnvoll. Aber es ist nützlich darum zu wissen, dass es Standardvorgaben gibt - denn unter Umständen hängt davon das ganzes Layout-Schema ab, das man hat oder anwenden möchte. Oder der Standard gefällt einem nicht usw.

Merke:

Html-Elemente sind vorfomatiert, sie können neu formatiert werden. Sie tragen in der Regel irgendwelche Eigenschaften.

Das html-Element <span> ist ein besonderes html-Element, das so lange eigenschaftlos ist, wie man es nicht mit Eigenschaften und Werten belegt. Es ist ein inline-Element, weil es keinen eigenständigen Block, also keine neue Zeile erzeugt. Das html-Element <span> ist immer dann sinnvoll, wenn man gewisse Teile eines Textes formatieren will. Man weist dann <span> die gewünschten Eigenschaften zu, zB eine Textfarbe. Denn <span> macht Formatierungen unter gewissen Umständen erst möglich. Das Blockelement <div> und <span> sollte man sich einprägen als besonders wichtige html-Elemente.

Übrigens: Eine Schriftfarbe wird zB mit <span style="color: #113366;"> bestimmt und gilt solange, bis das Endtag </span> folgt. Ich kann auch andere html-Elemente auf diese Weise mit einer Schriftfarbe versehen: zB <p style="color: #223344;">

Die Begriffe "Inline-Style" und "Inline-Element" dürfen nicht verwechselt werden. Die Bezeichnung Inline-Style ist gleichbedeutend mit der direkten Auszeichnung eines tags, wie im vorigen Beispiel mit der Schriftfarbe vorgeführt, hier wird ein sogenanntes style-Attribut mit nachfolgenden Anführungszeichen (innerhalb denen die CSS-Anweisungen stehen) als Attribut zum tag gestellt.

Ein Inline-Element ist dagegen etwas ganz anderes: ein html-Element, das keine eigene Zeile beansprucht; span darf bei der html-strict Variante nur innerhalb von Blockelementen wie etwa <div> oder <p> verwendet werden, oder auch innerhalb eines solchen html-Elements, das mit display: block auf Blockelement umgesetzt wurde (span als inlin-Element darf in der strict-Variante nicht im "reinen" body-Bereich stehen).

Offiziell missbilligte Anweisungen

Es gibt offiziell missbilligte Anweisungen, die sich im Vergleich mit den Möglichkeiten von CSS als eindeutig veraltet herausgestellt haben und in zukünftigen html-Sprachen nicht mehr verwendet werden sollen.

Es ist allerdings kein Problem (!), diese missbilligten Elemente zu gebrauchen, wenn nur die doctype-Deklaration dem Typ der Sprache entspricht, in der diese Elemente vorkommen! So wird in html 5 <u> nicht mehr verstanden werden, aber in html 4.01 natürlich noch weiterhin.
Man braucht seine alten Webseiten deshalb nicht auf den neuesten Stand zu bringen, wenn eine neue Sprache veröffentlicht wird.

Missbilligte Elemente kommen in neuen html-Versionen nicht mehr vor.

Unter anderem gelten folgende html-Elemente offiziell als eindeutig missbilligt:

basefont
center
font color
fon face und andere font ...
s (für durchstrichenen Text)
strike (für durchstrichenen Text)
u (für unterstrichenen Text)
isindex
dir
applet (durch object zu ersetzen)
link, vlink, alink (im Bodybereich missbilligt; statt dessen Pseudoklassen verwenden a:link usw.)
align (im Body missbilligt)
bgcolor (mindestens im Body missbilligt)

Auch die width Angabe für Tabellen soll mit col und colgroup ersetzt werden. Ebenso ist die width Angabe für die horizontale Linie mit <hr> offiziell missbilligt. Eine solche Linie kann durch die CSS Anweisung border-bottom oder border-top erzeugt und die Länge mit width bestimmt werden, auch wenn die Überschrift selbst keine Worte beinhaltet oder nicht bis zum mit width vorgegebenen Zeilenende reicht.

Weiterhin sind auch Rahmenangaben (border) bei Img-tags anscheinend bald schon offiziell deplaziert. Man sollte einen Rahmen um Bilder deshalb zB mit <div>-Containern erzeugen, in denen man die Bilder plaziert.

Auch <b> galt als missbilligt, stattdessen sollte <strong> oder eine style-Anweisung gebraucht werden. Ähnliches galt für<i> . Statt <i> für Kursiv kann man in künftigen html-Versionen besser <em> verwenden.
Neuerdings - ab html 5 - sollen <i> und <b> aber umdefiniert werden, womit sie nicht mehr missbilligt sind, aber im Detail evtl. neue Darstellungsweisen ergeben, bzw. neue Intentionen der Auszeichnung. Siehe dazu den Wikipedia Artikel zu html 5.

Missbilligt scheint daher von diesen drei klassischen Elementen (u, i, b) nur noch <u>.

Wichtig! Missbilligte Elemente können eingesetzt werden! Nur muss eine DocType Deklaration gewählt sein, die diese Elemente versteht. Also gilt für diese Elemente html 4. Aber wer html 5 verwenden will, muss sich über diese Änderungen klar werden.

Ersatz für <hr-style>:

Da man mit CSS einen einseitigen Rahmen um fast jedes html-Element ziehen kann (einseitiger Rahmen= zB nur auf der oberen Seite einer Box), gilt auch das herkömmliche html-Elementt <u> als missbilligt, obwohl es eigentlich auf der Hand liegt, dass diese Methode schnell ein Wort zu unterstreichen viel kürzer ist, als eine umständliche CSS-Anweisung.

Ein <u> unterstreicht nur so lang, als wie der umfasste Bereich der beiden tags gilt, also bis zum Endtag </u>; das <u> ist ein inline-Element. Und ein tag mittels <u> und </u> zu setzen isst leicht und praktisch.

Um zum Beispiel eine Überschrift mit einem zu <u> analogen Effekt auszustatten, sind aber dreissig mal mehr Zeichen notwendig. Zum Beispiel:

h3 { display: inline; border-bottom: 1px dashed #9ba1a1; }

Um den Rahmen - also den Unterstrich - etwas weiter nach unten zu rücken, um ihn einen grösseren Abstand zum Text zu geben, benutzt man padding-bottom: 8px; (8 pixel ist ein Beispielwert).

Diese Methode mit display: inline; erzeugt eine Unterstrich, der so lang ist wie das Wort.
Man kann mit border-top auch einen Überstrich definieren.

Ansonsten, also ohne diese Angabe display: inline, würde der Unterstrich so lang sein, wie die ganze zur Verfügung stehende Breite (zB des übergeordneten Div-Containers). Immerhin kann man auf diese Weise die Erscheinungsweise noch im Detail bestimmen, was ein großer Vorteil ist! Der Nachteil: es ist ein inline-Element geworden und margin ist nicht mehr möglich.

Daher verwende ich selbst einfach ein span-Element, das auf die Überschrift abgestimmt ist, zB:

h3 span { border-bottom: 1px dashed #9ba1a1; }

Ich setze dann einfach den Text innerhalb der Überschrift in ein span-Element: <h3><span>Überschrift</span><h3>. Etwas umständlich, aber so wie es verlangt ist, top aktuell.

Warum nun <u> anscheinend offiziell missbilligt wird, ist für mich ein Rätsel, da es eine einfache Anweisung ist, im Gegensatz zu der Mühe, sich inline-styling auszudenken, oder den Umweg über span zu gehen.
Zumindest müsste man in Bezug zu möglichen Unterstreichungen eine Möglichkeit des CSS-Skripting einführen, dass solche Unterschriften genauso lang sind, wie das Wort lang ist, ohne dass es gleichzeitig ein inline-Element bedeutet, wenn <u> offiziell nicht mehr gewollt sein soll!

Weiteres:

Dann gibt es noch Anweisungen, die zwar nicht veraltet sind, aber aus bestimmten Gründen ungenau sein könnten. Bis ich selbst begann mich vertieft für html zu interessieren, benutzte ich unter anderem die einfachen Formatierungen <big> (grösser) und <small> (kleiner); allerdings schienen sie mir bereits als wenig verlässlich, um damit eine einheitliche Gestaltung des Textes zu erreichen. Es ist ja dann bei jeder einzelnen html-Formatierung (bei einer betreffenden Überschrift zB) das Augenmass entscheidend und nicht eine festgelegte Größe. Man betätigt gewissermaßen einen mechanischen Knopf, auch mehrmals mit <small><small>Test</small></small>, was an sich schon sehr umständlich aussieht. Es gibt bessere Möglichkeiten, mit demselben Aufwand Texte zu formatieren und dabei auch genauer zu sein. Diese <big> und <small> sind anscheinend nicht offiziell missbillig, aber man kann das gewünschte Ergebnis mit CSS genauer herbeiführen.

Missbilligt werden Anweisungen bzw. Anwendungen, die in zukünftigen Standards nicht mehr vorgesehen sind, aber aus Gründen der Abwärtskompatibilität noch in den aktuellen Standards vorgesehen sind. Irgendwann in ferner Zukunft werden sie in neuen html-Standards sicher ganz wegfallen.

Die eigentliche Formatierung, als Mittel zur Präsentation, wird heute bevorzugt mittels von CSS-Skripten vorgenommen, früher geschah es durch jene html-Anweisungen <font face="...">, <b> oder auch heute noch manchmal <smaller>.

Eine nachträgliche Veränderung der einmal ins Dokument geschriebenen und zugewiesenen Eigenschaften kann man mit CSS sehr viel einfacher erreichen, was die Handhabung und Wartung eigener Webseiten erheblich erleichtert.

Was ist der Body?

Der Body ist der eigentliche "Körper" eines Dokuments, und ein Text kann nur innerhalb des Body stehen. Mit dem <body>-tag beginnt der Fliesstext.

Alles was nach dem anfänglichen <body>-tag im Quelltext erscheint, ist normaler Fliess-Text. Es sei denn es handelt sich um ein html-Element (als Anweisung für einen Text), welches sich selbst nicht im Browserfenster zu erkennen gibt: so wird zum Beispiel das tag <p> nicht erscheinen, nur das, was zwischen <p> und </p> steht.

Der Fliesstext innerhalb der <p> und </p> tags gilt schon als strukturiert. Weitere Möglichkeiten sind <div>-Container, in die man einen Text stellt, und natürlich Überschriften, die als wichtige Beschreibung eines nachfolgenden Inhalts gelten.

Ein normaler Text, der sozusagen frei im Body steht, kann natürlich ebenso formatiert bzw. mit Eigenschaften belegt sein, wie ein Textabsatz <p> oder alle anderen Elemente. Aber in der html-Variante strict darf kein Fliesstext direkt im Body stehen (und ebenso kein Inline-Element). Der Fliesstext muss in der strict Variante mindestens mit <p>-Textabsätzen strukturiert sein. Allgemein empfiehlt es sich, immer einen <div>-Container über den body zu stellen, und darin allen weiteren Inhalt aufzunehmen.

In der transitional-Variante ist es dagegen möglich, den bloßen unstrukturierten Text in den reinen body zu stellen. In diesem Fall hat man den Text nicht mit Absätzen oder Überschriften formatiert und ihn auch nicht in einen div-Container gestellt.
Wenn man die Eigenschaften des Textes dann formatieren will, ist es klar, dass man das html- Element <body> formatieren muss, um die darin enthaltene Schrift zu formatieren, aber dass man damit auch potentiell alle anderen html-Elemente die im Dokument auftreten gleichsam mit formatiert (Stichwort: Vererbung ausgehend vom body), was zum Beispiel Schriftgrößen angeht; es sei denn, man weist den übrigen html-Elementen wiederum eigene Formatierungen zu, die die Formatierungen des body überschreiben.
Wenn ich dem body und auch keinem html-Element eigene Formatierungen zuweise, wird der Standard des Browser genommen, mit dem der Nutzer die entsprechende Webseite geladen hat.

<body>
Dieser Text würde im Browserfenster erscheinen und trägt die
Eigenschaften, die global dem Body-Element zugewiesen wurden.

<p>Auch dieser Text erscheint im Browserfenster, nur ist er als
Absatz gekennzeichnet und kann leichter gesondert formatiert werden.</p>

MERKE:

Es ist eigentlich eine Grundregel, an die man sich von Anfang an halten sollte, nämlich den hauptsächlichen Fließtext stets in <p> Absätzen zu strukturieren.

Vielleicht ist es optimal, wenn man diesen so strukturierten Text noch in einen zusätzlichesn <div>-Container steckt. Das hat viele Vorteile: ein div kann einheitlich formatiert werden, und man kann einen solchen Container im Zuge der Wartung einfach bearbeiten und kopieren usw.

Dieser Fliesstext ist ein zusammenhängendes Ganzes. Er erhält in der Regel auch eine Überschrift. Der Text, der ohne in ein <p> oder <div> eingebettet im body steht, hängt technisch gesehen immer in der Luft.

Es besteht hinsichtlich der Strukturierung in der transitional Variante keine Vorgabe, man kann alles tun, was man will: das heisst, man kann theoretisch den ganzen Fliesstext auch in den Body schreiben. Es wird dann nur schwerer, diesen Inhalt und Text zu formatieren bzw. zu strukturieren. Man würde zum Beispiel Zeilenabstände zwischen Textpassagen stets mit zwei hintereinanderfolgenden <br> erreichen müssen...

CSS - Cascading Style Sheets

In dem sogenannten Stylesheet kann ich für das gesamte Dokument geltende Formatierungen vornehmen, indem ich ein html-Element herauspicke (dieses html-Element wird innerhalb des CSS-Skripts als Selektor bezeichnet) und diesem Eigenschaften bzw. Werte zuweise.

So kann ich zum Beispiel alle <p> Textabsätze einheitlich formatieren, indem ich im stylesheet entsprechende Angaben mache.

Eingeleitet wird ein im Dokument befindliches stylesheet mit <style type="text/css"> und beendet wird das stylesheet mit </style>. Manchmal werden auch einzelne Elemente des CSS-Skript als stylesheet bezeichnet; streng gesehen bezeichnet das stylesheet immer einen Bereich zwischen den <style> tags.
Alles was zwischen diesen tags steht, beinhaltet die Formatierungen der html-Elemente (in den Beispielen auf dieser Webseite blau gekennzeichnet).

CSS: Selektoren und Eigenschaften

Zuerst kommt der Selektor und dann die Anweisung (in spitzen Klammern): p { font-size: 1.4em; }. Die Zuweisung von Eigenschaft und Wert zu einem Selektor wird in ihrem Zusammenhang als Regel bezeichnet. Die in blauer Schrift gehaltenen Codebeispiele sind also Regeln.

<html>
<head>
<style type="text/css">
 p { color:#1122ff; }
 h1 { font-size:2.5em; margin-top:2%; margin-bottom: 0; }
</style>
</head>
<body>

<p>Test: Eine besondere Schriftfarbe, die im stylesheet
definiert wurde.</p>

<h1>Eine Überschrift mit gesonderter Formatierung</h1>

Hier gilt zB die Schriftgröße 2.5em für alle h1 Überschriften des Dokuments. Der Abstand der Überschrift zum vorherigen html-Element wird hier auf 2em gesetzt (ein vorheriges html-Element kann zum Beispiel der Textabsatz sein, der auf der Seite oberhalb einer Überschrift steht).
Der untere Abstand (margin-bottom) wird auf null gesetzt (zum Beispiel der untere Abstand der Überschrift zu einem nachfolgenden Textabsatz); ein Wert von "0" kann sinnvoll sein, wenn man die Standardvorgaben des Browser überschreiben möchte, da dieser Standardwerte für die meisten html-Elemente einen gewissen Aussenabstand bereits vorgeben.

Eigenschaften sind zum Beispiel Schriftgröße, Schriftfarbe, Ausrichtung des Textes (Links, Mittig, Rechts), Innenabstand (padding), Aussenabstand (margin), und für die meisten html-Elemente ist es möglich auch einen Rahmen (border) zu definieren. Zu diesen Eigenschaften müssen auch Werte angegeben werden.
Die Eigenschaft "Schriftgröße" mittels font-size besagt nichts, wenn nicht auch ein Wert angegeben wird, zB "14px".

Es ist nur dann valides (=korrektes) Skript, wenn zu jeder Eigenschaft auch ein Wert angebeben wird, und wenn der Wert 0 (null) sein soll, dann muss man diesen Wert auch explizit angeben.

Alle html-Elemente können in Bezug zum CSS-Stylesheet als Selektoren verwendet werden. Der Begriff Selektor ist einfach nur eine besondere Bezeichnung in Bezug zum Stylesheet, und bezeichnet das html-Element, das mit Eigenschaften formatiert werden soll.

Die Farbangaben können übrigens in verschiedener Art erfolgen:
color: #10dd67; oder einfach color: green; oder mittels color: rgb (0, 220, 0).

Einzelheiten zu Wertzuweisungen kann man zB im entsprechenden Abschnitt von http://de.selfhtml.org/... erfahren.

Auch die Maßangaben sind unterschiedlich möglich, zB in pixel (px), oder em und % usw.

Einige Maße sind relative Maßangaben (zB em und %; wobei 100 % und 1 em vom Prinzip her nicht dasselbe meinen, allenfalls vom ersten Eindruck her. Und 4.5 em sind nicht automatisch 45%.

Relative Einheiten bieten sich an, wenn man ein liquides Design erreichen will, so dass zB die manuelle Änderung der Schriftgröße (beim Browser) - durch die Hand des Nutzers - das Layout nicht zerschießt.
Wer ein perfektes Layout haben will, muss daher ausschließlich relative Maßeinheiten verwenden. In manchen Angelegenheiten erweist sich dies aber auch als problematisch, zB bei Gestaltung von Menüs, die dann so oder so "zerschossen" werden können oder wenn der Nutzer die Fenstergröße des Browser verkleinert (dann kann die Zeilenbreite lächerlich schmall werden, wenn man zB margin oder padding relativ ansetzt). Meine Webseiten habe ich letztlich nicht komplett liquide gestaltet, und nehme - fahrlässigerweise vielleicht - das Zerschiessen des Layouts in Kauf. Ich gehe davon aus, dass meine Schrift für die meisten Nutzer gross genug ist und kein Anlaß besteht, die Schriftgröße manuell zu verändern.

Und es gibt absolute Maßangaben (zB px, pt, cm usw.). Diese Maßeinheiten bleiben gleich gross, egal welche Fenstergröße oder Bildschirmauflösung verwendet wird.

Pixel ist allerdings nicht unbedingt absolut, sondern seine dargestellte Größe hängt von der Bildschirmauflösung ab, die ein Betriebssystem bzw. Bildschirmtreiber verwendet (96 dpi bei Windows, ein Mac hat weniger Auflösung nämlich 72dpi, d.h. im Vergleich zu Windows erscheint 1 Pixel bei Mac etwas kleiner, bzw. bei Windows größer).

Es ist nicht immer ganz einfach, den Unterschied zB zwischen % und em zu bestimmen. Der Wert em bezieht sich auch auf die zugewiesene Schriftgröße des betreffenen html-Element. Meiner Meinung nach sollte man ein paar Versuchsreihen starten, um diese Unterschiede praktisch festzustellen, und dabei padding und margin sowohl mit % als auch em bei unterschiedlicher Fesnterbreite (width) austesten.

Ich kann Selektoren effizient verwenden, indem ich zB einen Textabsatz p innerhalb eines div-Containers ansprechen will, aber nur diesen und jene p, die sich ausserhalb von div -Containern befinden. Das wäre mit div p möglich, damit werden nur die p-Elemente angesprochen, die sich in einem div-Container befinden. Mit div div p spreche ich nur p Absätze an, die sich in einem Container befinden, der sich wiederum in einem Container befindet!

Wieso CSS eigentlich das Wort kaskardierend enthält, liegt an der besonderen Eigenschaft, wie Selektoren berücksichtigt werden, je nachdem in welcher Reihenfolge sie aufgestellt werden: im Stylesheet zuletzt genannte Selektoren mit Zuweisungen überschreiben die erstgenannten Zuweisungen zu einem gleichen Selektor, sofern sie Zuweisungen derselben Eigenschaften haben (ansonsten ergänzen sich die Zuweisungen!).

Beispiel:

p { font-size: 16px; color: red; }
p { font-size: 1.2em; margin-left: 2%; }

Hier wird die Schriftgröße (10px) mit 1.2em überschrieben, aber margin-left zu den bestehenden Anweisungen der vorherigen Zeile ergänzt und, da keine andere Schriftfarbe angegeben wird, bleibt die Schriftfarbe rot der ersten Anweisung erhalten.

Und es kommt drauf an, welche Spezifizität Selektoren haben: div p hat eine höhere Spezifizität als p, d.h. beide Selektoren können in einem stylesheet Zuweisungen von Werten erhalten, die je nach Stellung des html-Elementes berücksichtigt werden. Sie können in egal welcher chronologischer Reihenfolge im stylesheet angegeben werden, aber div p bezieht sich nur auf p Elemente, die innerhalb von div Elementen stehen, genauer gesagt, wenn p ein Kindelement des div ist. Die Reihenfolge der Selektoren ist allerdings eine weitere Angelegenheit: p div meint nur div, die sich in p Absätzen befinden!

Weiterhin spielt es eine Rolle ob sich ein stylesheet im selben Dokument befindet (höherer Rang bzw. höhere Spezifizität) oder von einer externen Quelle eingeladen werden (niedrigster Rang), oder ob CSS Stile direkt auf ein tag bezogen werden (allerhöchste Spezifizität), etwa mit <p style="...">.
All diese Zusammenhänge haben den Begriff kaskadierend hervorgebracht.

Blockelemente, Inline-Elemente und Verschachtelung

Typische Blockelemente sind zB <p> und <div>.

Blockelemente erzeugen einen eigenen Block, und beanspruchen Raum, faktisch eine Zeile, bzw. erzeugen eine neue Zeile im Fliesstext (analog eines Zeilenumbruches).

Im Gegensatz dazu erzeugen inline-Elemente keinen eigenen Raum, sie sind sozusagen in der Zeile (englisch: inline).

Mit dem typischen Inline Element <span> kann man zum Beispiel Schriftfarben kurzzeitig ändern, bis dass der tag mit </span> geschlossen wird. Beispiel:

 <span style="color: rgb(80, 220, 190);">
Test</span>

Das inline-Element <i> oder <em> ist ein gekennzeichneter Bereich, der kursiv hervorgehoben wird. Man kann <em> oder <i> statt <span style="font-style: italic;"> benutzen, denn <i> und selbst <em> ist kürzer und es trägt zu einem sauberen Skript bei, wenn man stets den Überfluss versucht zu vermeiden.

<em> ist übrigens nicht eindeutig kursiv, sondern betont und <strong> stark betont. <em> wird aber wie <i> für kursiv behandelt. Und üblicherweise wird <strong> wie <b> für fett behandelt.

Blockelemente besitzen hinsichtlich der Positionierung von Elementen einer Seite ein überaus grosse Bedeutung.

Verschachtelung:

Die tags müssen in einer gewissen Reihenfolge geschlossen werden, so darf ein <span>, das innerhalb eines <p> Elementes geöffnet wurde, nicht nach dem Schliessen des <p> Elementes geschlossen werden. Also richtig ist zum Beispiel:

Wenn ich mehrere <div> Container oder andere html-Elemente ineinander verschachtelt organisiere und ihre Eigenschaften festlege und jeweils Fliesstext darin anlege, ist dieses Vorgehen kein Problem, man muss nur daran denken, welcher Container wann geöffnet wurde, denn geschlossen wird mit dem Endtag </div> immer der zuletzt geöffnete Container; die Rangfolge sieht zum Beispiel so aus:

<div> Erster
<div> Zweiter
<div> Dritter
</div> Dritter
</div> Zweiter
</div> Erster

Darum zu wissen ist entscheidend, wenn man einen entsprechenden Container verändern will, oder an einer entsprechenden Stelle, zB kurz vor Ende eines bestimmten <div>-Containers noch etwas einfügen möchte oder einen Container löschen will. Denn nicht immer ist es egal, welchen Container ich schließe, meist dann nicht, wenn vor diesem ein Container geschlossen wurde, ich aber einen anderen schließen wollte. Der Container, der geschlossen wird, erhält damit seine Eingrenzung.

Übrigens, <p>-Textabsätze sind nicht erlaubt ineinander zu verschachteln - bevor ein neuer Absatz gesetzt wird, muss der vorherige mit dem Endtag geschlossen sein.

Besonderheit relativer Maßangaben in der Verschachtelung:

Oft kommt es vor, dass man innerhalb eines Dokuments verschiedene Schriftgrößen benutzen will, die mit den relativen Werten em oder % gebildet sind.

Relative Werte in verschachtelten Elementen können dazu führen, dass die Schrift zunehmend grösser oder kleiner wird. Wenn ich zB mehrere Div-Container ineinander verschachtele, und jeden div-Container mit 0.9em formatiert habe, so wird jeder nächstgeordnete div-Container (innerhalb der verschachtelten Div-Container) die Schrift kleiner anzeigen, als der vorherige Div-Container.

Wenn man einen Text stets in <p> Textabsätzen strukturiert hat und für diese Absätze schon Schriftgrößen in em oder % angegeben hat, und nun ein übergeordneter <div>-Bereich ebenso eine Schriftgröße zugewiesen bekommen hat, muss man um die Vererbung wissen. Bei Pixel kann der Einfluss des vorherigen Elementes sozusagen überwunden werden, weil direkt eine feste Größe angegeben wird; der <div>-Container kann formatiert sein wie er will, auch direkt - wenn der Texabsatz darin <p> 20 pixel erhält (also einen absluten Wert erhält), dann sind und bleiben es für diesen Absatz 20 pixel.

Ansonsten vererbt sich der relative Wert und die Schrift wird grösser oder kleiner, als wie man vielleicht gewollt hat. Man kann das natürlich berücksichtigen und wählt für den Absatz eben einen geringeren oder grösseren em Wert. Es kann aber auch sein, dass man dadurch die Einheitlichkeit seiner Seite schwerlich in den griff kriegt, deshalb muss man von Zeit zu Zeit überlegen, welche Elemente man wie formatieren will.

Ich könnte etwa niemals das <div> bezüglich der Schriftgrösse formatieren, sondern nur <p>, und wenn ich einige <p> abweichend von im übrigen Dokument enthaltenen <p> formatieren will, tue ich das vielleicht mit Klassen bzw. ID.

So gibt es im CSS-stylesheet die Möglichkeit eines effizienten Umgangs mit Selektoren, so dass man die betreffenden <p> Bereiche, die sich zum Beispiel in einem <div>-Container mit der ID "content" befinden, direkt anspricht:

div#content p { font-size: 1.2em; }

Wenn ich mehrere entsprechende Container habe, muss ich statt ID eine Klasse nehmen. Wie man Klassen definiert und wie man Stylesheets anlegt, wird weiter unten noch erörtert.

Es ist in Bezug zur Zugänglichkeit einer Webseite vorteilhaft, mit relativen Werten zu arbeiten. Auch kann manche Internet Explorer Version mit festen pixel Werten der Webseite keine manuelle Veränderung der Schriftgrößen bewirken.

Listen

Ein weiteres Blockelement ist zB <ul>, mit dem Listen erstellt werden können. Das html-Element <li> ist Bestandtteil dieser Listen und kann in beliebiger Menge zwischen den <ul> und </ul> tags gesetzt werden. Auch der Listenpunkt <li> ist ein Blockelement, darf aber nur in <ul> auftauchen.
Mit diesen <ul> und <li> werden die meisten Navigationsmenüs erstellt, es ist nützlich, mit ihnen vertraut zu sein.

Man kann die Eigenschaften der Liste beliebig festlegen, zudem gibt es besondere Eigenschaften, obs zum Beispiel der einzelne Listenpunkt <li> mit einem Symbol oder einem Icon gekennzeichnet werden soll.

Klassen und ID

Ich kann Eigenschaften und Werte über Klassen den html-Elementen zuweisen. So kann ich zum Beispiel <p> (ein Textabsatz) oder <div> (ein Container) mit im stylesheet definierten Klassen verbinden. Das tue ich, sobald diese html-Elemente (<p>, <div> etc.) im Dokument mit den Klassen in Zusammenhang gebracht werden.
Die Form dazu lautet: <p class="beispiel">.

Ich formatiere im stylesheet die Klassen, um später im Dokument diese Klassen auf die html-Elemente zu beziehen. Dem html-Element also eine Klasse zuzuweisen. Genau dasselbe kann ich mit ID tun - doch eine ID kann nur einmal im Dokument zugewiesen werden. Eine Klasse kann für mehrere tags im Dokument gebraucht werden.
Formatiert oder definiert wird eine ID im stylesheet wie alles andere, wie zB eine Klasse.

Eine Klasse (mit .) oder ID (mit #) zu definieren ist einfach zu erledigen:

<html><head>
<style type="text/css">
 .beispiel { color:#ff22ff; padding: 10px; font-size: 0.88em; }
 h1.beispiel { font-size:1.5em; font-weight: bold; }
 #abcd { font-size:2.3em; }
</style>
</head>
<body>
<p class="beispiel">test</p>
<h1 class="beispiel">test</h1>
<div id="abcd">test
</div>

Das erste Beispiel .beispiel erzeugt eine Klasse, die für alle html-Elemente angewendet werden kann, sofern man die Klasse "beispiel" diesen html-Elementen entsprechend zuweist.
Das Zuweisen geschieht in folgender Form <p class="beispiel">.

Für den Anfang genügt sicherlich eine solche einfache Art von Zuweisung. Aber ich finde es wichtig, hier schon eine etwas fortgeschrittene Art der Klassendefinition bzw. des Umgangs mit Selektoren kurz zu erläutern:

Das zweite Beispiel h1.beispiel gilt nur für h1 Elemente, die der Klasse beispiel zugewiesen werden. Die hier für h1 gegebenen Anweisungen (in spitzen Klammern) gelten also nicht für alle <h1> Elemente, auch nicht für andere html-Elemente. Wenn ich eine vorhandene Klasse namens .beispiel habe und sie benutzen will, gelten alle Anweisungen, die ich im stylesheet für .beispiel vornehme für grundsätzlich alle html-Elemente, die ich damit als Klasse verbinde.
Aber wenn ich eine h1.beispiel Klasse definiere, die also nur für h1 gilt, werden diese Formatierungen nur für h1 gelten. Aber nichtsdestotrotz werden auch alle unter .beispiel gegebenen Formatierungen für eine h1-Überschrift gelten, wenn ich sie der Klasse "beispiel" zuweise. Es sei denn, es werden in h1.beispiel die in .beispiel bereits auftauchenden Formatierungen neu gesetzt bzw. überschrieben.

Der Selektor h1.beispiel gilt nur für h1 Überschriften, die der Klasse .beispiel zugewiesen werden (mit <h1 class="beispiel">), aber nicht für <span class="beispiel">. Im letzteren Fall würden die Formatierungen abgerufen, die unter .beispiel definiert wurden und für alle tags gelten, die der Klasse "beispiel" zugewiesen werden.

Die Anweisungen für .beispiel gelten für alle html-Elemente, die der Klasse .beispiel zugewiesen werden, also auch für <h1>, oder <p> und so weiter, so sie mit <h1 class="beispiel"> und <p class="beispiel"> dieser Klasse zugewiesen werden.

Gibt es nun für h1.beispiel eine Anweisung, zum Beispiel eine Schriftfarbe "rot", die mit einer anderen Anweisung hinsichtlich derselben Eigenschaft konkurriert (wenn ich für .beispiel die Schriftfarbe auf "gelb" setze), dann gilt für das html Element <h1> immer die höhere Spezifität, das heisst der Selektor h1.beispiel wird berücksichtigt.

Wenn ich unter h1.beispiel keine Textgröße definiere, dies aber unter .beispiel tue, so wird das <h1> html-Element, das der Klasse "beispiel" zugewiesen wird, die Textgröße von den Angaben unter .beispiel beziehen.

Der Selektor .beispiel ist also etwas offener bzw. allgemeiner, als wenn ihm noch ein bestimmtes html-Element als Selektor beigestellt wird. Und ein p.beispiel oder span.beispiel ist spezieller, man sagt: spezifischer.

Mittels dieser Vorgehensweise kann man einerseits also sehr effizient vorgehen, allgemeine und spezielle Anweisungen verteilen und andererseits auch zum Kontext des Dokuments passende Bezeichnungen für die Klassen verwenden.

Die Eigenschaften, die einer Klasse oder ID zugeteilt sind, gelten nur, wenn einem html-Element diese Klasse oder ID zugewiesen wird. Das bedeutet, eine Klasse oder ID kann besondere Anweisungen enthalten, die nicht für alle html-Elemente gelten. Während ein normaler <p> Selektor ja alle <p> anspricht.

Man spricht auch von der Spezifizität, die einem Selektor zukommt, damit Konflikte vermieden werden. Hierbei ist auch die Reihenfolge wichtig:

Wenn ich einen Selektor nehme, zum Beispiel p { font-size: 13px; }, und benutze denselben Selektor nochmal um ihm dieselben Eigenschaften, aber andere Werte zuzuweisen: p { font-size: 16px; }, so gilt jene Zuweisung, die als letzte im Dokument bzw. stylesheet genannt wurde (hier 16px).

Klassen erhöhen die Spezifizität, das heisst sorgen für Differenzierung, und Klassen, die mit Selektoren verwendet werden: p.beispiel { font-size: 33px; }, haben eine noch höhere Spezifizität. Hier gilt die aufgestellte Formatierung nur, wenn später im Quelltext das html-Element p auch dieser Klasse .beispiel zugewiesen wird!

Es klingt verwirrend, aber sobald man im praktischen Einsatz damit umgeht, versteht man diese Spezifizität und ihren Nutzen besser.

Diese genannten Umstände sind - zusammen mit der Hierarchie der Vererbung - übrigens ausschlaggebend, dass CSS (Cascading-Style-Sheet) zu seiner Bezeichnung "kaskadierend" gekommen ist.

Der Selektor ID ist ähnlich wie eine Klasse zu verwenden, statt dem Punkt wird ein anderes Zeichen verwendet, das #: #abcd { color:red }. Zugewiesen wird es mittels id="abcd", zB <p id="abcd"> .

Wichtig ist bei ID, dass diese nur einmal im gesamten Dokument benutzt werden kann; - also wenn ich sie nun für ein <p> benutzt habe, kann ich diese ID nicht mehr verwenden!
Das ID bietet sich an, wenn man genau weiss, dass man nur eine einzige Stelle im Dokument beeinflussen möchte. Es erleichtert dem Webdesigner die Übersicht des Dokuments.

Die Namen für Klassen dürfen bestimmte Zeichen nicht enthalten, zum Beispiel kein Leerzeichen (aber "teil_eins" ist erlaubt), auch ü oder ö und bestimmten Sonderzeichen sind nicht erlaubt.

Es ist anscheinend so beschaffen, dass man einem Anker nicht dieselbe Bezeichnung zuweisen sollte , wie bereits bestehenden IDs. Jedenfalls klappte das bei mir regelmässig nicht (wenn die ID "up" genannt war und gleichzeitig ein Anker, der mit dieser ID einen Zusammenhang aufwies "up" genannt wurde).

Übrigens kann ich dem Body keine verschiedenen Klassen oder wechselnde Eigenschaften zuweisen, sondern nur einmal, weil das Endtag des Bodys erst am Ende des Dokuments geschlossen wird. Ich kann dem Body nur einmal Eigenschaften (also global für das Dokument) zuweisen.

Zuweisung von Klassen und ID (Zusammenfassung):

Zugewiesen (in Bezug auf html-Elemente) werden diese Klassen und ID folgendermassen mit class="xxx" bzw. id="xxx", nachdem sie im Stylesheet aufgestellt wurden:

<style type="text/css">
#eins { padding: 20px; } 
 .beispiel { font-family:georgia,serif; margin: 40px; }
 p.beispiel { margin: 10px; }
</style>
<body>
<div id="eins">
<h1 class="beispiel">Überschrift</h1>
<p class="beispiel">Text</p>
</div>

Wenn die zugewiesene Klasse im Stylesheet nicht durch p.beispiel definiert wurde, dann bezieht sich die Angabe der Klasse mit <p class="beispiel"> auf die stylesheet-Definitionen unter .beispiel!

Also ist p.beispiel { ... } grundsätzlich verschieden von .beispiel { ... }. Das heisst, ein zusätzlicher Selektor kann wie hier differenzieren.

Umgekehrt ist es so, dass .beispiel in p.beispiel praktisch gesehen enthalten ist. Wenn ich also das html-tag <p> dieser Klasse .beispiel zuweise, werden sowohl die Formatierungen in .beispiel als auch p.beispiel berücksichtigt.
Gibt es zu bestimmten Eigenschaften aber unterschiedliche Werte, erhält p.beispiel den höheren Rang und überschreibt praktisch die Werte unter .beispiel!

Ich kann die Klasse .beispiel auf alle html-Elemente anwenden, p.beispiel gilt aber nur auf <p>-Elemente.

Noch etwas:
Wenn ich ein und denselben Selektor zweimal gültig definiere, so ergänzen sie sich.
Bei denselben Eigenschaften, die ein und demselben Selektor zugewiesen werden, überschreibt der letzt genannte Wert den zuerst genannten. Das wäre der Fall, wenn ich im stylesheet zweimal den Selektor p anspreche, und etwa einmal mit color: white; und dann mit color: black; definiere. Eigentlich Unfug, denselben Selektor mit denselben Eigenschaften zwei mal zu verwenden, aber es soll der Vollständigkeit dienen, darauf hingewiesen zu haben.

Das Stylesheet

Das Stylesheet beinhaltet die einem html-Element zugewiesenen Eigenschaften und Werte. Das stylesheet kann im Dokument stehen, oder in einer externen Datei.

Typisches Beispiel:

<style type="text/css">

body { 
 font-family: arial,sans-serif; 
}
p {
 margin: 0.4em 3em 1.16em 0em;
 padding: 0;
 font-size: 1em;
 line-height: 1em;
}
h1 {
 border-top: 2px dotted #9ba1a1;
 margin: 1.3em 2em 0.5em -20px;
 padding: 0.3em 0 0;
 font-size: 1.85em;
 font-weight: normal;
}
div {
 padding: 2% 4% 2% 30px;
 margin-left: 30px;
 width: 500px;
 min-width: 400px;
 background-color: #6d757c;
 color: #ffffff;
}
</style>

Werden keine Eigenschaften für diese html-Elemente aufgestellt, wird die Standardvorgabe des Browsers gewählt, die meist ihrerseits auf allgemeine Standards bezogen sind.

Es hat sich eingebrannt, dass <em> eine kursive Schrift erzeugt. Das html-Element <em> hat bereits eine Eigenschaft kursiv in sich, die man natürlich nach Belieben anders formatieren kann, zB im Stylesheet mit

em { font-style:normal; font-weight:bold; }

Hier wird durch das Setzen von font-style: normal die kursive Schrift vom <em> aufgehoben und die Schriftstärke auf fett gesetzt! Auf diese Weise kann ich jedes html-Element eigenständig formatieren, wenn ich es so will.

Das Element <span> ist übrigens so lange eigenschaftslos (bzw. übernimmt die Werte seines Elternelementes, das kann zB p sein, dem eine Textfarbe gegeben wurde) bis man es formatiert, entweder im Stylesheet (mittels span { color: #334455; }, wodurch es aber für alle <span> gilt, oder direkt auf das Tag angewendet mit <span style="color: #7700ff;">.
Oder eben durch eine Klasse: <span class="beispiel"> und natürlich der nötigen vorherigen Klassendefinierung und Formatierung im Stylesheet .beispiel { color: #0055aa; }.

Im Dokument getroffene direkte Formatierungen eines tags (inline-styling), oder in der Rangfolge der direkten Formatierung nachgeordnet: ein internes Stylesheet, "überschreiben" ein durch link-Verweis eingebundenes externes Stylesheet.

Die direkte Auszeichnung eines tags hat die höchste Priorität. Zuerst kommt in der Rangfolge also das tag, dann das interne stylesheet und schliesslich das externe stylesheet.

Innerhalb jedes stylesheets gelten jeweils die Reihenfolge der Anweisungen (bei zwei Anweisungen mit denselben Eigenschaften, also zB in Bezug auf die Schriftfarbe von <p> innerhalb desselben stylesheets, gilt die letzt genannte Anweisung in diesem stylesheet). Hier würde color: #994488; für den Textabsatz gelten.

<style type="text/css>
p { color: #112218; }
p { color: #994488; }
</style>

Eingebunden in das eigene Dokument wird ein externes Stylesheet mittels:

<link rel=stylesheet type="text/css" href="formate.css">

Die Datei, die das Stylesheet enthält, trägt hier zB die Bezeichnung "formate.css". Die Endung .css ist nicht zwingend vorgegeben, aber es ist sinnvoll, CSS-Dateien mit dieser Endung zu versehen.

Der Link-Verweis zum externen Stylesheet muss vor dem <body> tag im Headbereich stehen, während ein internes Stylesheet theoretisch auch an anderen Stellen des Dokuments stehen kann. Es würde selbst am Ende der Webseite stehend, sich auf die Formatierung der gesamten Webseite beziehen.

Hinweise zu Pfadangaben:

Externe Dateien werden dem Dokument hinzu "interpretiert" bzw. in das Dokument eingebunden. Es besteht hinsichtlich der Verarbeitung kein prinzipieller Unterschied zu dem Umstand, als wenn die Inhalte dieser Dateien im selben Dokument stünden.

Ausgangspunkt ist immer das Verzeichnis, in dem auch das Dokument steht, von dem aus der Pfad gegangen wird. Steht das Dokument im selben Verzeichnis, braucht man nur den Namen des Dokuments anzugeben: href="stile.css".

Achtung: Es kann sein, dass die zu einem stylesheet gehörende Seite in einem anderen Verzeichnis steht, als wie das Stylesheet.
Wenn innerhalb des CSS-stylesheet zu einer Datei verlinkt wird, zB zu einer Grafik, muss man also von dem Verzeichnis ausgehen, in dem sich dieses CSS-Stylesheet befindet!

Wenn man vom aktuellen Ausgangpunkt (aktuelles Verzeichnis) zu einem Unterverzeichnis namens "grt" kommen will, lautet die Angabe: href="grt/stile.css".

Liegt die gesuchte Datei in einem anderen Verzeichnis, benutzt man entsprechend:

../ für ein Verzeichnis, das im Verzeichnisbaum höher gegangen werden soll. Anders ausgedrückt, ein Verzeichnis von der aktuellen Position zurück.

So bezeichnet href="../stile.css" ein übergeordnetes Verzeichnis, und die gemeinte Datei (sheet.css) befindet sich in diesem.

href="../../stile.css" bezeichnet zwei übergeordnete Verzeichnisse. Es wird dann die Datei zwei Verzeichnisse höher gesucht.

href="../../webdesign/stile.css" sucht das gewünschte Dokument im Unterverzeichnis "Webdesign" in zwei höher gelegenen Verzeichnissen, ausgehehend vom Ort des aktuellen Dokuments. Gedanklich geht man ein Verzeichnis hoch, dann noch eins, und von dort in das Verzeichnis webdesig hinein.

href="../../abc/dat/stile.css geht zwei Verzeichnisse hoch und von dort in das Unterverzeichnis "abc",und dann in das Unterverzeichnis "dat", in dem sich stile.css befindet.

Wer es genau haben will gibt eine absolute Adresse an, also die komplette http://www.beispieladresse.fr/css/data.css

Die Syntax für das stylesheet lautet:
<link rel=stylesheet type="text/css"
href="http://deine-domain.fr/abc/formate.css">

Für eine Grafik mittels Img-tag:
<img style="width: 568px; height: 436px;" alt=""
src="../img/neujahr.png">

Für eine Datei aus einem Stylesheet heraus:
Entweder:
url(http://www.domain-adresse.fr/abc/chat.gif)
oder
url(../abc/chat.gif)

Man nimmt also einfach nur das http:// und gibt die volle Webadresse hinzu, genau so wie es in der Adresszeile eines Browsers steht. Oder man wählt relative Pfadangaben.

Ob man eine relative oder absolute Pfadangabe benutzt
hängt von der eigenen Vorgehensweise mit seinen Webseiten ab.
Wenn man eine Domain langfristig angelegt hat, spricht nichts gegen absolute Pfad-Angaben. Auch ist eine Vorlage mit absoluten Adressen durchaus sinnvoll, denn leicht kopiert man eine Vorlage und vergisst die Links entsprechend zu ändern, oder man verwendet relative Adressen, sonst erfordert es eben mehrere Vorlagen, je nach Ordner, und eine diesbezügliche Achtsamkeit.

Unter Umständen kann ein Nutzer die Webseiten auf seiner Festplatte zum offline Browsen speichern, und wenn man zumindest die Hauptseite mit asboluter Adresse verlinkt, ergibt es Sinn: so findet er mit einer absoluten Domainangabe bei Interesse die Webseite im realen Netz wieder, wenn er wenigstens die Hauptbestandteile der Domain kennt (http://www.domain.de/ und nicht nur den Namen der Datei).

In der Datei mit dem CSS-stylesheet stehen dieselben Informationen, wie sie die hier in hellblau gekennzeichneten stylesheet-Bereiche in den code-Beispielen auf meiner Web-Seite aufweisen.

Das heisst, die Angabe <style type="text/css"> und </style> darf in dieser .css Datei nicht mehr vorkommen, denn es wurde bereits in dem Link-Verweis angegeben (siebe oben: link rel="stylesheet type="text/css"; das Dokument wurde massgeblich als CSS-Skript gekennzeichnet).
Das Skript wird dann von extern eingelesen. Diese stylesheets kann man bequem mit einem Texteditor, zum Beispiel notepad editieren.

Ein Kommentar im stylesheet (zwischen <style type"text/css"> und </style>) wird vom Browser ignoriert und hat die Form:

/* Kommentar */

Mit dem Verweis auf ein externes Skript, kann ich ein einziges CSS-Stylesheet für viele Webseiten verwenden und muss nicht in jedes Dokument dasselbe Stylesheet schreiben.

Ich kann aber Ausnahmen für einzelne Seiten ganz einfach handhaben, indem ich die Eigenschaften von bestimmten html-Elementen innerhalb des Dokuments neu bestimme und sozusagen die Anweisungen aus dem externen Stylesheet überschreibe, mit zusätzlichen Anweisungen ergänze. Eine andere Möglicheit ist es, sogar zwei externe stylesheets zu benutzen, zum Beispiel eines für das Navigationsmenü, das auf jeder Webseite im Kopfbereich oder an einer der Fenster-Seiten denselben Stil haben soll, und ein anderes stylesheet für den sonstigen (individiuellen) Inhalt der Webseite.

Der Inline-Style wird auch als direkte Auszeichnung eines tags bezeichnet. Hier nochmal die Rangfolge:

Inline-Style:
<p style="font-size: 1.2em;"></p>

Internes stylesheet:
<style type="text/css">p { font-size: 1.2em; } </style>

Externes stylesheet:
<link rel="stylesheet" href="blaurot.css" type="text/css">

und schliesslich noch die Reihenfolge der CSS-Anweisungen innerhalb des jeweiligen stylesheet, nach der die Rangfolge bestimmt wird: umso weiter unten (bzw. später im Skript), desto höher die Rangfolge

wenn keine Anweisungen gegeben werden: Standard-Einstellung des Browsers, in den die Webseite geladen wird

Weiterhin gibt es eine erhöhte Spezifizierung (Rangstellung) je nachdem, wie ich Selektoren verwende, also in welcher Abfolge: zB div.eins p span. Hier werden nur solche span-Elemente angesprochen, die sich in p-Absätzen und diese wiederum in div-Containern befinden, wobei diesem Container die Klasse "eins" zugewiesen wurde.

Sinnvoll ist ein externes Stylesheet eigentlich nur, wenn es mehrere Webseiten gibt, die auch wirklich einheitlich sind und so von den globalen Formatierungen eines einzigen extrnen stylesheets profitieren können; dann sind externe Stylesheets in Bezug zu späteren Veränderung des Aussehens aller Webseiten auch unerlässlich, damit die Seiten einheitlich bleiben.

Allerdings muss man natürlich bei Verwendung eines externen stylesheets für mehrere Webseiten auch von Anfang an dieses Konzept der Einheitlichkeit berücksichtigen, oder man setzt in das externe Stylesheet nur zentrale Formate wie die Schriftart und bestimmte Farben. In wie weit man mit (internen oder externen) CSS-Skripten oder dem Inline-Styling umgeht, ist auch eine Frage sowohl der Kreativität als auch des logischen Konzepts.

Ich selbst benutze interne Skripte, solange ich kein einheitliches Konzept für alle Seiten habe, denn sonst würde ein externes Skript nur die Wartung und Handhabe erschweren. Für die Kopfzeile mit den Links verwende ich zB ein externes Stlesheet.
Ansonsten setze ich externe Skripte nur ausnahmsweise ein. Manche Webseiten-Autoren sind da sehr rigoros und übertreiben es meiner Meinung nach mit externen Stylesheets, insofern diese nicht für mehrere Web-Seiten gelten; in meinen Augen soll der Umgang mit CSS doch effizient sein, die Handhabung erleichtern und Überfluß vermeiden - aber bei jeder einzelnen Seite, die im Grunde ein eigenes externes Stylesheet bekäme, hätte ich dann auch gleich eine weitere Datei, was nicht Sinn macht, wenn es nicht notwendig ist.

Das Boxmodell und der Container

Der <div> Container stellt ein sehr wichtiges und zentrales html-Element dar, das im Grunde alle anderen html-Elemente enthalten kann. Es wird oft eingesetzt, um Textbereiche zu umfassen, oder um bestimmte Formatierungen oder Positionierungen vornehmen zu können.

Das <div>-Element wird manchmal als Layer bezeichnet, aber ursprünglich wurde dieser Begriff Layer nur verwendet, um eine Besonderheit damit auszudrücken, die sich auf die absolute Positionierung von html-Elementen bezieht (in mehreren Ebenen, die sich überlagern können).

Das Boxmodell ist in CSS fundamental und lässt sich am einfachsten mit dem <div> Container verstehen.
Aber grundsätzlich verkörpert auch jedes andere Blockelement das Boxmodell. So also auch <p>-Absätze oder sogar Überschriften.

Eine Box besteht aus den Werten Breite und Höhe (width und height), Aussenabstand (margin), Innenabstand (padding), Rahmenstärke (border) und schliesslich dem Inhaltsbereich, der einen eigenen Bereich darstellt und mit weiteren nhalten (Text oder html-Elemente) gefüllt werden kann.

Der wichtigste Bestandteil ist zweifelsohne der innere Bereich, der Inhaltsbereich (englisch: content). Aber in Bezug zur Positionierung ist der Inhaltsbereich nur nebensächlich, da die wichtigsten Faktoren für die Positionierung sich aus width, height, margin, padding und evtl. auch border ergeben. Auch die Position innerhalb oder unterhalb anderer Blockelemente ist natürlich wichtig, was darüber entscheidet, wo das entsprechende Element positioniert wird.
Es gibt noch weitere Positionierungsmethoden: position: relative, absolut, fixed (Standard ist static), und dann erweitert sich die Palette der Faktoren auf: top, bottom, right, left. Ausserdem gibt es noch float und clear.

Es gibt im Boxmodell eine unsichtbare Kante, die dem Inhaltsbereich sozusagen abgrenzt, die keinen Raum einnimmt, die die Box umschliesst und die sich weiter nach aussen verschiebt, wenn man einen Innenabstand (padding) hinzufügt und/oder einen Rahmen (border) zeichnet.

Die Größe der Box bleibt bei margin unverändert, sofern width und height angegeben wurde; padding und border vergrössern die Box in jedem Fall.

Wenn man kein width und height angibt, kann man auch mit margin die Größe einer Box bestimmen, padding und border beeinflussen die Größe zwar auch in diesem Fall. Die Größe der Box wird aber bei margin durch umliegende Elemente oder die verfügbare Fensterbreite bestimmt.

Eine angebene Breite (width) oder Höhe (height) bezieht sich nur auf den Inhaltsbereich, und bezieht sich nicht auf padding und border, denn padding und border werden dem Inhaltsbereich noch hinzugerechnet!

Etwas besonderes ist übrigens gegeben, wenn man keine Breite der Box angibt (width): dann bestimmt der gegebene Aussenabstand (margin) zu umliegenden Elementen die Größe der Box.

Wenn ein übergeordnetes Elternelement vorhanden ist , ist die Größe eines darin enthaltenen div-Container (und jedes andere Blockelement) von diesem übergeordnetenm Blockelement abhängig.

Das heisst, der weisse Kasten, der oben abgebildet ist, hat keine Breite (width) erhalten. Seine Größe wird von width und padding des Elternelements bestimmt (der dunkelgraue div-Container), aber auch von margin-Werten dieses weissen Kastens.

Da der Internet Explorer bis zur Version 6 aber erhebliche Schwierigkeiten im Umgang mit Boxen hat, die keine Breite oder Höhe zugewiesen bekommen, sollte man entweder eine Breite (width) oder Höhe (height) angeben in irgendeiner Maßeinheit, auch relativen Werten. Zur Not tut es auch, height auf 100% zu setzen. Übrigens: die Höhe kann mit % Werten unter Umständen nicht festgelegt werden! Um % Angaben für Höhe zu verwenden, bedarf es bestimmter Positionierungsmethoden, zum Beispiel mit position: absolut.

Der Boxmodell-Fehler der Internet Version 5 ist beim IE 6 allerdings behoben. Der IE 5 zählte padding und border nicht zum Inhaltsbereich hinzu, sondern setzte den Inhalt um die Werte von padding und border kleiner an, so dass die Box zwar gleich groß blieb (die unsichtbare Kante), aber der Inhalt gegebenenfalls weniger Raum erhielt.

Boxmodell Grafik

Die Breite und Höhe (width und height) beziehen sich auf den Inhaltsbereich. Padding wird niemals sichtbar sein und kann auch nicht sichtbar gemacht werden, es ist ein imaginärer Raum, aber wirksamer Innenabstand.

Padding und border werden dem Inhaltsbereich (also width und height) hinzugerechnet. Daraus ergibt sich eine imaginäre Kante, die die wahre Aussenkante darstellt.

Man kann dem <div> eine Breite oder Höhe mittels width und height zuweisen, ansonsten richtet sich die Höhe des Containers nach dem Inhalt (Textzeilen), die Breite jedoch nach der maximalen Breite des Elternelements sowie natürlich den eventuell definierten Eigenschaften von margin, padding und border.

In der praktischen Realität muss man manchmal einfach ein paar Dinge ausprobieren, wie es ist, mit width/height und mqargin zu arbeiten.

Man sollte in jedem Fall besondere Umstände berücksichtigen, wenn ein Nutzer zum Beispiel nicht die Bildschirmauflösung benutzt, die man selbst benutzt. Um die volle Fensterbreite zu nutzen, ohne sich auf die Bildschirmauflösung festzulegen, ist es wohl nur möglich mit %-Werten für die Breite zu arbeiten.
Wenn man padding verwendet, muss man diesen Wert von der 100% Breite abziehen, sonst wird die Seite unerwünschterweise breiter, und es erscheinen seitliche Scrollbalken am unteren Rand des Browserfensters.

Dabei kann man wohl nur schlecht pixel für padding benutzen, wenn man für die Breite % benutzt. Weil das Ergebnis der %-Werte von der Bildschirmauflösung abhängt aber pixel feste Werte sind, unabhängig von der Auflösung des Bildschirms. Das ist auch der Grund, warum es prinzipiell Unsinn ist, wenn man sagt, die Bildschirmauflösung hätte so gut wie kein Problem zu bieten und würde nur darüber bestimmen wie gross ein Fenster überhaupt sein kann. Es ist nur dann kein Problem, wenn man ausschliesslich %-Werte benutzt.

Um die volle Breite zu nutzen, wird man entweder %-Angaben für padding vergeben müssen und dabei diesen Wert von width=100% abziehen (übrigens: padding links und rechts ebenso, wie border links und rechts sind zu berücksichtigen). Zum Beispiel: padding links und rechts 2%, das macht width 96% um die volle Breite zu bekommen.
Hat man zudem auf beiden Seiten border auf 1% gesetzt, so ist die volle Breite gleich 94%.

Oder man wählt für die in einem <div> beinhalteten html-Elemente, zB <p> oder <h1>, einfach margin-Werte, um so denselben Effekt eines Abstandes zur seitlichen Fensterkante zu erhalten.

Ist allerdings keine Breite mit width angegeben und man arbeitet mit margin um die Breite des Containers zu bestimmen, so ist linker und rechter Aussenabstand (margin) für die Breite verantwortlich und padding zeigt nur eine Wirkung innerhalb der Box.

Das fehlerhafte Boxmodell des IE 5 zieht sowohl padding als auch die Rahmenstärke (border) von der Breite (width) und Höhe (height) des Containers ab (sofern Breite und Höhe mit width und height angegeben wurden!). Der IE 6 hat Probleme mit Boxen, denen keine Höhe oder Breite zugewiesen wurd, die enthaltene Schrift kann stellenweise unsichtbar werden. Man sollte beim IE generell immer einen div Container mit entweder width oder height definieren (oder beidem).

Um dem <div>-Container einen Rahmen zu verleihen bzw. seine Eigenschaften (Rahmenstärke, Zeichnung, Farbe) zu bestimmen, wird folgende Syntax verwendet, wobei ein sogenanntes shorthand zur Anwendung kommt, also eine abgekürzte Schreibweise:

<div style="border: 50px dashed #7788aa;">
Test mit sehr dicken Rahmen des Containers.
</div>

Lasse ich eine Eigenschaft (zB color für die Farbe des Rahmens) weg, wird der Standardwert des Browsers benutzt, mit der der Nutzer die Webseite besucht. Zum Beispiel wird die Schriftfarbe des betreffenden Blockelementes verwendet, das den Rahmen erhalten soll, falls diese gesetzt wird.

Es gibt neben der kurzen Bezeichnung (auch als shorthand bezeichnet) für den Rahmen einer Box, auch für andere html-Elemente zahlreiche Abkürzungen (shorthands), wie zum Beispiel für die Werte bei margin oder padding. So dass man nicht für oben, rechts, unten, links jeweils eine Anweisung verwenden muss (padding-top, padding-right, padding-bottom, padding-left), sondern man kann zB die Form: padding: 12px 23px 20% benutzen, oder auch nur zwei Werte.

Übersicht Maßangaben

Vier Werte für:
oben / rechts / unten / links
margin: 22px 44px 4em 2cm; (alle vier Seiten werden einzeln definiert)

Drei Werte für:
oben / rechts und links / unten
padding: 10px 4% 20px; (in diesem Beispiel werden rechts und links mit je 4% gleichzeitig mit einer Angabe definiert)

Zwei Werte für:
oben und unten / rechts und links
padding: 84px 20px; (in diesem Beispiel erhalten oben und unten 84px, rechts und links 20px)

Ein Wert:
oben und rechts und unten und links
padding: 20px; (alle erhalten denselben Wert)

Margin lässt sich benutzen, um einen Container zu positionieren, wobei die vier möglichen Richtungen den Abstand zu umgebenden Elementen anzeigen.

Wenn das umgebende Element zB kein anderer <div> Bereich ist, dann ist es meist die Fensterseite oder in Bezug zu oben und unten zB der letzte oder nächste Textabsatz, oder ein <div> Bereich, oder der normale Fliesstext, der ins Body geschrieben ist.

Ich kann einen Container, dem eine Breite (width) gegeben wurde, in einfacher und sicherer Weise (horizontal) zentrieren, indem ich margin auf auto setze, das geht zum Beispiel so: margin-left: auto; margin-right: auto oder shorthand: margin: 20px auto 30px auto.

Eine Box ist prinzipiell mit jedem html-Element gegeben, da man zB auch bei <a>-Linkverweisen mit width, padding und border die Größe des Bereichs bestimmen kann, der dem anklickbaren Link zugehört.

Achtung: margin wird nicht immer addiert!

Bei margin, nicht aber bei border und nicht padding, gibt es eine Besonderheit, wenn zwei vertikal angeordnete und benachbarte Elemente Margin-Werte erhalten.

Bei horizontalen margin-Werten, also bei Blockelementen, die nebeneinanderstehen, gilt das nicht. Jedenfalls sind diese Fälle wohl nur durch float zu erzeugen, wo horizontale Margins addiert werden.
Die vertikalen Margins kommen regelmässig in der normalen Layoutarbeit zustande.

Beispiel für vertikale Margins: Wenn ich einen <div>-Container habe, und darunter ein anderes Blockelement, und beide in ihrem Aussenabstand zueinander mit 30 pixeln setze, addieren sich diese Werte nicht! Der Abstand geht nur bis zur imaginären Aussenkante des anderen Elementes, und nicht bis zur durch margin erzeugten Aussenkante. Es gibt ja keine durch margin erzeugte Aussenkante, sondern nur einen Abstand zwischen zwei Blcokelementen!

Zum Beispiel:

<div style="margin-bottom: 30px;"></div>
<div style="margin-top: 40px;"></div>

Hier würde der grössere Wert des unteren Blockelementes entscheidend sein. Und es würden sich beide Werte nicht addieren! Also 40 pixel ist der eingehaltene Abstand beider Elemente zueinander. Die vertikalen Margins fallen sozusagen zusammen.

Man kann auch negative Margins benutzen, was seit einiger Zeit als ultimative Lösung vieler Design-Probleme oder besonderer Anforderungen angesehen wird (besonders liquid Design mit float).

Hierarchie und Vererbung

Wenn keine Eigenschaften angegeben werden, gelten nicht immer die Standardvorgaben, sondern auch die Eigenschaften, die dem Elternelement gegeben wurden, das gilt zum Beispiel immer für <span>, wenn dieses html-Element zum Beispiel innerhalb eines <p> steht, erbt <span> manche seiner Eigenschaften (zB Schriftfarbe) von <p>. Es sei denn, ich formatiere die entsprechende Eigenschaft, die beim <p> Element schon formatiert wurde (zB Schriftfamilie) beim <span>-Element nach eigenen Vorgaben.

Es gibt Eigenschaften, wie margin, die nicht vererbt werden. Farbe, Schriftgröße und Schriftfamilie werden auf jeden Fall vererbt.

Hierarchisch gesehen ist das <html>-Element an oberster Stelle, dann folgt das <body> und dann das <div>, <p> und dann <span>. Es gibt natürlich noch sehr viele weitere Elemente, die ebenso in diese hierarchische Struktur eingebettet sind, es sind entweder Blockelemente (wie <p> und <div>) oder Inline-Elemente (wie <em> und <span>). Inline-Elemente erzeugen übrigens im Gegensatz zu Blockelementen keinen neuen Absatz bzw. keine neue Zeile.

Hauptsächlich zu nennen sind:
1. Elternelemente, 2. Kindelemente und 3. Nachfahren.

Wenn ich ein <p> in ein <div> packe:

<div> <p> Test <em> kursiver text </em> </p> </div>

So ist <p> ein Kindelement von <div>, und <div> ist das Elternelement von <p>. Auch <em> ist ein Kindelement, aber nur von <p>.
Das <em> ist also kein Kind, aber ein Nachfahre von <div>.

Mittels dieser Besonderheiten kann man Selektoren im stylesheet sehr effizient und speziell verwenden. Ein besonderes Zeichen für einen Selektor ist zum Beispiel das "kleiner als" Zeichen >. Es steht für den child Selektor (Kind-Selektor). Zum Beispiel bezieht sich die Anweisung (in spitzen Klammern) für den Selektor div>span { background-color: green; } nur auf span-Bereiche, die ein direktes Kind von div-Containern sind:

<div><span>test</span></div>

Aber wenn diese span Bereiche sich gleichzeitig in Textabsätzen eingebettet befinden, wird der Selektor div>span diesen span-Bereich nicht ansprechen:

<div><p><span> Hier gilt der erwähnte Kindselektor nicht </span></p></div>

Ändere ich den Selektor zu div span , so wird jeder span-Bereich, der sich in einem div befindet angesprochen, weil diese ein Nachfahre des div sind, sie brauchen dann kein direktes Kindelement des div zu sein. Mit div span wird das span als Nachfahre von div angesprochen.

Alles unterliegt also einer Hierachie und auch der Vererbung innerhalb dieser Hierarchie. Wenn ich den Textabsätzen <p> keine Eigenschaften zuweise, zum Beispiel betreffend der Schriftfarbe, übernimmt es diese vom <body> (und wenn auch hier keine angegeben sind, wird der Browser-Standard des Nutzers genommen).
Es kommt auch darauf an, welche Eigenschaften überhaupt im Dokument zugewiesen wurden, denn nur solche vererben sich, die auch bestimmt wurden, ansonsten ist es immer der Standard, der berücksichtigt wird. Besonders gut einsichtig wird das an der Hintergrundfarbe, Textfarbe oder Schriftgröße bei <span>, <p>, <div>-Containern innerhalb eines <div>-Containers.

Wenn die <p> Absätze in ein <div> eingebettet sind, übernimmt das <p> die Eigenschaften vom <div>, und das <div> übernimmt die Eigenschaften seinerseits vom dem ihm übergeordneten Element, wenn es kein anderes <div> ist (mehrere <div> können ineinander verschachtelt sein!), dann ist es das <body>. Wenn nun keinerlei Eigenschaften zugewiesen werden, zB mittels CSS-Skript, dann ist das ganze Dokument nach Standardvorgaben definiert, das bedeutet, dass vor allem die Schriftfamilie und Schriftgrösse von den Standardvorgaben des Browser abhängig sind, die ein Nutzer jedoch seinerseits auch für seinen Browser frei einstellen kann. Die Schriftfarbe ist in der Regel schwarz. Der Hintergrund ist standardmässig weiss.

Tips und Tricks

Style-Anweisungen und Klasse zugleich

Eine Besonderheit ist es, wenn man zugleich mit einer Klasse weitere Eigenschaften nur für einen gewissen Bereich definieren will, also wenn class und style zusammen benutzt werden soll, zum Beispiel für einen Textabsatz - das sieht dann so aus:

Übrigens ist es belanglos, ob zuerst die Klasse oder das inline-style angegeben wird; - es wäre also ebenso möglich:

<p class="beispiel" style="font-family: verdana;">.

Eigentlich ist es möglich, die Schriftart (font-family) oder andere Eigenschaften sogleich in der Klasse "beispiel" zu definieren, aber es kann Fälle geben, wo man zB nur einen einzigen Textabsatz gesondert formatieren will usw. - es kommt immer auf die Anwendungen an, auf die eigene Webseite, wie man bei der Formatierung von html-Elementen vorgehen will.
Man kann auch mehrere Klassen zuweisen, die sich dann ergänzen, bei Konflikten mit gleichen Eigenschaften aber anderen Werten, die mit diesen Klassen verbunden sind, werden immer die Werte bevorzugt, die im stylesheet an der späteren Position genannt werden!
Es sei denn, eine höhere Spezifizität wurde gegeben: ul#navi li.beispiel ist immer höher spezifisch als wenn man li.beispiel schreibt. Das heisst, in diesem Fall kann ul#navi li.beispiel egal wo im stylesheet stehen, es hat eine höhere Spezifizität als der Selektor li.beispiel. Das gilt natürlich nur für Eigenschaften, die in beiden Selektoren behandelt werden: wenn man für die Klasse zB zwei margin-left angibt, 10px und 20px.
Diese Spezifizität kann unter Umständen auch genutzt werden. Für den Anfänger ist es wichtig, diese überhaupt zu kennen, auch wenn er sie nicht bewusst anwenden will. Denn manchmal geschieht es, dass man zB ein externes und internes Stylesheet für ein Dokument hat, und man fragt sich, warum diese eine Anweisung nicht realisiert wird...

Mehrere Klassenbezeichnungen werden mit Leerzeichen voneinander getrennt, dasselbe gilt für ID und ich kann auch hier komplexe Zusammenhänge schaffen (dritte Zeile):

<p class="beispiel analog">
<h1 id="kapitel abschnitt">

<span class="analog beispiel" id="möglich" style="font-size: 10px;">

Es sollte eine goldene Regel sein, alle Formatierungen in den Bereich des Stylesheets zu schreiben, was zB nachträgliche Veränderungen am gesamten Stil des Dokuments sehr vereinfacht.

Grundlegegend wichtig ist die Schriftformatierung

Da die Schrift fundamental ist für einen Text, sollte man den Eigenschaften der Schriftfamilie, Schriftgröße aber auch Zeilenhöhe auch als Anfänger besondere Aufmerksamkeit widmen. Und zum Beispiel die Besonderheit kennen lernen, dass man gewisse Schriftnamen, die aus mehreren Worten bestehen, in Anführungszeichen setzen sollte (sowohl das Zeichen ' als auch " in Frage kommen).

Allgemeiner Erfahrung nach kann die Zeilenhöhe bei langen Texten ruhig etwas grösser sein als wie die Schriftgröße, zum Beispiel wenn die font-size: 1.1em beträgt, gibt man der Zeilenhöhe 1.2em.
Für kürzere Texte kann man den Wert der Zeilenhöhe etwas niedriger als wie die Schriftgröße setzen. Beides fördert, in Bezug zur jeweiligen Textlänge den Lesefluß. Das ist ein Detail, auf dass man freilich nicht unbedingt achten braucht.

Schriftgrößen in der Maßeinheit em gelten als vorteilhafter, man führt dazu stets an, dass der Internet Explorer px Werte nicht skalieren kann, und so ein Nutzer des Internet Explorers die Schriftgröße nicht nach eigenen Maßstäben anpassen kann. Wichtiger scheint mir aber der Umstand der Relativität des Ausgabemediums (Mac, PC, Monitorgröße usw.) und ähnliches, was mit der Relativität der grundsätzlichen Ausgabe und Darstellung zusammenhängt.

Die Schriftgröße stellt einige Probleme bei verschiedenen Browsern dar, sofern ein Nutzer in seinem Browser die Schrift manuell verkleinert oder vergössert, also anpasst. Der Internet Explorer kann dahingehend absolute Werte, also auch die viel gebrauchten pixel-Werte (px) nicht in seiner Zoomfunktion verarbeiten, und die Schrift kann daher nicht angepasst werden, wenn die Schriftgröße in pixel angegeben wurde. Wer dies berücksichtigen will, wählt am besten em oder auch %.

Es gibt aber noch andere Probleme bei anderen Browsern, zB bei Opera. Aus vielen Erfahrungen hat sich anscheinend herauskristallisiert, dass die optimalste Einstellung vorsieht, dem body eine Schriftgröße von 100.1 % zu geben, was praktisch keinen Unterschied zu 100% macht, aber irgendwie die Schrift bei angepasster Ansicht (besonders bei älteren Opera-Versionen) nicht zu arg verkleinert, wie es bei einigen Browsern beobachtet werden konnte. Hat man dem body diesen Wert gegeben, kann man weiterhin für andere html-Elemente die Maßeinheit em verwenden.

Noch mal kurz zur Syntax und sonstige Hinweise

Vergegenwärtige dir den Unterschied zwischen Stylesheet und direkter Formatierung eines tags, denn beides weist eine unterschiedliche Syntax in einigen Dingen auf, vor allem was die optionale Verwendung des Leerzeichens beim CSS-Stylesheet betrifft. Denn dies muss beim Inline-Styling (direktes Formatieren eines tags) gesetzt werden.

Ein Semikolon (andere Bezeichnung: Strichpunkt) trennt verschiedene Eigenschaften voneinander, und ein Komma trennt bei Schriftangaben verschiedene Angaben voneinander.

Das Komma wird nicht benutzt, wenn man mehrere Werte (oben, unten etc.) zu bestimmten Eigenschaften (zB padding) angibt. Zum Beispiel margin: 10px 12px 7px;
Ein Semikolon muss auch immer am Ende der Zuteilung von Werten zu einem html-Element stehen, selbst wenn nur eine Eigenschaft bzw. ein Wert zu einem html-Element zugewiesen wird.

Die Anführungszeichen beinhalten bei Inline-Styles (direktes Auszeichnen eines tags) die Eigenschaften und Wertzuweisungen. Sie werden nach dem Gleichheitszeichen geöffnet, und dann geschlossen, bevor das Zeichen > folgt. Auch die Leerzeichen sind wichtig.

Beispiele:

<div style="text-align: center; font-family: verdana,'times new roman',serif;
margin: 20px 10px; padding: 2%;">

Das Leerzeichen nach dem Semikolon und dem Doppelpunkt wird hier am Ende der Zeile viusell nicht eindeutig dargestellt, wegen dem Zeilenumbruch (es muss aber in jedem Fall angegeben bzw. eingetippt werden!) - oder:

<p style="font-size: 1.4em;">

Im CSS-Stylesheet kann es ohne Anführungszeichen geschrieben sein (im CSS-Skript ist das Leerzeichen nach dem Semikolon nicht notwendig, aber kann gesetzt werden):

div { margin:2em 4em 20px 10px;padding: 2% 2.5%; }

Im CSS-Stylesheet braucht kein Leerraum zwischen den übrigen Angaben zu stehen, das heisst im obigen Beispiel kann padding sogleich nach dem Semikolon des vorangegangenen Wertes folgen.
Bei direkter Formatierung eines tags aber ist es notwendig, zwischen dem vorherigen Wert (10px) und seinem Abschluß (semikolon), und dem nächsten Element (padding) ein Leerzeichen zu setzen.

Bei Werten als shorthands für margin oder padding muss ein Leerraum zwischen den verschiedenen Werten stehen, im Stylesheet genauso wie bei einer direkten Formatierung eines tags.

Eine direkte Formatierung eines tags muss in Bezug zum Shorthand genauso aussehen wie im stylesheet:

<p style="margin: 2em 4 em 5 em 1px;">

Wichtig ist auch, dass man nicht vergisst, bei direkter Formatierung (mit style="" Angaben) am Ende der Anweisung keine Leerzeichen zu setzen sowie die Reihenfolge, wie man das Semikolon, Anführungszeichen und Klammer setzt, zu beachten:

<p style="margin: 2.3em 4em 5em 15.5px;">

Die zugewiesenen Werte können aus Kommazahlen bestehen, nur wird das Komma als Punkt gesetzt: also nicht 1,5 sondern 1.5 wird benötigt. Für manche Fälle sind diese genauen Komma-Angaben durchaus nötig.

Ein Leeraum ist bei der direkten Auszeichnung von tags (inline-style) wichtig nach der Bezeichnung der Eigenschaft, die man mit einem Wert definieren will, also nach dem Doppelpunkt und vor dem zugeteilten Wert:
<p style="font-weight: bold;">

Verschiedene Schriftfamilien werden mit Komma, aber ohne Leerzeichen aneinander gereiht: <p style="font-family:arial,georgia,verdana;">

Übrigens:
Die auf das tag angewendete CSS Style-Anweisung für kursive Schrift <span style="font-style italic;"> kann man auch mit dem kürzeren <i> oder <em> erreichen, für fette Schrift mit<strong>, und noch kürzer <b> für fett. Lange Zeit war nicht ganz klar, ob <i> und <b> missbilligt sein sollen. Sie wurden für html 5 nun umdefiniert, womit sich im Detail andere Darstellungen ergeben könnten, als wie gewohnt. Näheres dazu bei Wikipedia zum html 5 Artikel.

Und noch was zu missbilligten Elementen:
Wenn man die richtige doc-type Deklaration für das Dokument wählt, kann man natürlich auch offiziell missbilligte html-Elemente verwenden! Es ist verfehlt zu glauben, dass man missbilligte Elemente nicht verwenden darf. Man muss nur die richtige Doctype Deklaration wählen! Der wahre Grund missbilligter Elemente besteht offensichtlich mehr in der erleichterten Gewöhnung des Webdesigners an neue html Dialekte.

Maskierungen

Im Quelltext werden viele Zeichen, zum Beispiel < und > anders ausgeschrieben, als < und > sozusagen in kodierter Form. Man nennt diese Umschreibungen auch Maskierungen für html. Es werden also gewisse Zeichen in kryptisch anmutende Form gebracht, und anders ausgeschrieben, als wie sie tatsächlich im Browser angezeigt werden. Das hat den Grund darin, dass der Browser diese Zeichen ansonsten für Anweisungen bzw. Befehle halten könnte, sie aber tatsächlich nur Bestandteil des Fliesstextes (darzustellender Text) sein sollen.

Die Zeichenfolge   steht für ein Leerzeichen, welches in bestimmten Fällen in dieser Weise im Quelltext angegeben wird um einen Zeilenumbruch zu verhindern, so dass Worte die nebeneinander stehen und mit   quasi verbunden werden, auf jeden Fall innerhalb derselben Zeile stehen. Dieses Zeichen wird im Fliesstext, der im Browser erscheint, als normales Leerzeichen dargestellt.
Für Darstellungen von html- code oder anderen Skripten, ist es sinnvoll <code> oder <pre> zu benutzen und darin die Zeichenfolge   zu verwenden um ein Leerzeichen zu setzen.
Übrigens, mit manchen Editoren (zB KompoZer) wird dieses Zeichen innerhalb der WYSIWYG-Ansicht absichtlich gesetzt, und zwar dann wenn man ein zusätzliches Leerzeichen einsetzt, obwohl ein Leerzeichen schon zwei Worte voneinander trennt; normalerweise steht ja immer nur ein Leerzeichen zwischen einem Wort und dem nächsten.

Reihenfolge der Pseudo-Klassen

Am wichtigsten sind die ersten drei Pseudo-Klassen.

a:link
a:visited
a:hover
a:active

Das a:active kann man für den Fall nutzen, wenn man möchte, dass bei Anklicken des Links während dieser Zeit eine andere Farbe erscheint.

Man kann auch verschiedene Klassen oder ID den Pseudoklassen zuordnen. Und man kann die Pseudoklassen entsprechend selektieren:

.eins a:link { color: #ffee00; }
.eins a:visited { color: #ee55ff; }
.eins a:hover { color: #ffeedd; }
.eins a:visited { color: #66e27e; }

div p a:link 	{ color: #ffee00; }
div p a:visited { color: #ee55ff; } 
usw.

div.content a:link  { color: #ee55ff; }
usw.

div#navi a:link { color: #ffeedd; }
usw.

Benutzt wird die Klasse "eins", die direkt mit den Pseudoklassen verbunden wurde, einfach so:

<a class="eins" href="ketchup_rezept.html">Rezept</a>

Wie merkt man sich die Reihenfolge? Meiner Meinung wird man bald ein Gefühl dafür kriegen.

Ich merke mir folgendermaßen: Zuerst muss der Link gesetzt sein (a:link), dann entscheidet sich, ob die Seite schon besucht wurde (a:visited), und schliesslich was passiert, wenn die Mouse über den Linktext fährt (a:hover). Am Ende wird der Link betätigt (a:active).

Mouseover Texteinblendung

Interessant ist auch der Trick mit a:hover span, wenn man im stylesheet dem span { display: none; } zuweist, und mittels a:hover span { display: block; } das span wieder sichtbar macht bei einem Mouseover.
Auf diese Weise kann man mit Mouseover einen Text einblenden, der aber nicht angezeigt wird, wenn die Mouse nicht auf dem entsprechenden Text steht.

<a href="#">Hier steht der Text<span>Hier steht die Einblendung von
Zusatzinformationen</span></a>

Hier ist ein TestEs funktioniert nur mit IE ab einschliesslich 7.
Wichtig ist, dass man beachtet, wann man ansonsten noch ein span in der Webseite verwendet. Eventuell weist man einfach dem Bereich, wo das span als Zusatzinfo-Text benutzt wird eine Klasse zu. Hier ist es zum Beispiel der <p> Absatz , dem ich die Klasse "mo" zugewiesen habe, und damit das span allein auf diesen Bereich begrenzt habe. dieser Anwendung.

Anmerkung: Wer den IE 6 benutzt oder gar IE5 wird den Link-Text "Test" nicht sehen können. Weil ich ihn versteckt habe vor dem IE bis Version 6, und zwar mittels conditional comments!

Man kann diesen Text verstecken (vor dem IE 6) und via conditional comments einem bestimmten Selektor display: none; zuweisen. Und zwar jenem Selektor, der dafür in Frage kommen kann - aber manchmal hilft da nur eine Klasse oder ID, um nicht auch wichtige Links mit zu verstecken.

Hier ist ein Test dieser Anwendung.Der Internet Explorer zeigt diese Zusatzinfo nicht an. Deshalb verstecke ich auf meinen Seiten solche Zusatzinfos. Das ist zwar etwas ordinär, aber andererseits könnte ich die Zusatzinfo auch gleich bleiben lassen - denn der Sinn der Zusatzinfo ist es für mich, Platz auf der Webseite zu schaffen und die Lesbarkeit zu erhöhen. Ohne diesen Einblendeffekt würde ich vermutlich meist gar keine Zusatzinfo anbieten!

Hier habe ich den Link nicht für den IE 6 versteckt, und der "Pseudolink" wird deshalb zwar angeboten (nämlich mit der Maus auf ihn zu fahren), aber es passiert nichts beim IE6.

Einzige Bedingung für diese hübsche Funktion ist, dass man das Ziel <a href="#"> verwendet, also auf einen leeren Anker verweist.
Man braucht kein Ziel in Form eines realen Ankers angeben (aber <a href="#"> ist nötig wegen dem validen Skript). Oder man gibt das Ziel einige Zeilen höher an.

Manch einer wird verleitet auf den Link zu klicken und unter Umständen wird man ganz nach oben auf die Seite navigiert, was ja eigentlich sinnlos ist.

Ich gebe das Ziel (bzw. den Anker) immer an. Ich plaziere das Ziel nicht in derselben Zeile, sondern ein Stück oberhalb (zB vor einem vroherigen Absatz).
Manchmal ist so eine Zusatzinfo auf der unteren Seite einer Seite und der erscheinende Text verschwindet dann entweder bei Mouseover am unteren Rand, oder es erfordert, die Seite zu scrollen, was beides ein unschöner Effekt ist.

Tip: Man kann den Cusor, der über dieses imaginären Link angezeigt wird, eigens definieren und auch ganz abschalten mit cursor: none; - damit beim Lesen der Zusatzinfo kein störender Cursor im Wege ist. Aber man sollte beachten, dass auch wirklich nur über diesem Link und nicht anderen Links der Cursor verschwindet, was man durch den entsprechenden Einsatz von Selektoren erreichen kann.

Der Einblendeffekt ist ein Trick via Hyperlinks und einem zunächst unsichtbaren inline Element, das man bei einem Mouseover zum sichtbaren Blockelement macht. Er funktioniert beim Internet Explorer nur ab (einschliesslich) IE 7. Ich selbst verstecke unter Umständen den Linktext für den IE6 und IE5-Versionen durch ein conditional comment.

Im stylesheet sieht das alles so aus wie im folgenden Beispiel. Es ist ein Beispiel aus der Praxis, und gewisse Postionierungsangaben oder padding Werte muss man natürlich den eigenen Bedarf anpassen. Generell wichtig sind nur die display-Werte; gewöhnlich kommt man aber nie ohne Positionirungsswerte und andere Angaben aus:

.mo span { display: none; }

.mo a:hover span
{
border: 1px solid #60606b;
padding: 9px 6px 9px 16px;
display: block;
left: 0px;
position: absolute;
width: 92%;
font-size: 0.9em;
margin-top: -42px;
color: #200104;
background-color: #e8edf2;
}

Das display: block; macht es sichtbar, was zuvor mit display: none; versteckt wurde. Aber nur wenn man die Mouse über das entsprechende Element bewegt.

Die Klasse "mo" bezieht sich auf irgendein Element, dass ich dieser Klasse zuweise, und innerhalb dem dieser Effekt auf span angewendet werden soll.
Vielleicht verwendet man ja auch noch woanders span, und dann wäre das vielleicht alles etwas komplizierter, da dann unerwünschterweise Textstellen verschwinden, wo sie nicht verschwinden sollen.

Man kann sicher auch noch zu anderen Selektoren kommen, um diesen Effekt nur auf bestimmte Bereiche anzuwenden.

Will man direkt dem entsprechenden Link eine Klasse zuweisen, benutzt man im stylesheet als Selektor: a.mo:hover span.

Das conditional comment im Headbereich sieht wie unten angegeben aus.
Ich weise dem entsprechenden Link einfach eine Klasse (.ienix) zu; dann wird kein IE6 Nutzer davon behelligt, weil er den ganzen Vorgang nicht sieht. Man kann den Link oder einen ganzen Absatz vor dem IE6 verstecken, wie es eben notwendig ist. Diese Vorgehensweise ist natürlich nur relevant, wenn der entsprechende Link mit dem Mouseover eine Information verspricht, und der IE6 oder IE5 Nutzer allein mit dem, was da angezeigt wird, nichts anfangen kann.

Es ist zwar etwas ordinär, aber was wäre, wenn man überhaupt keine Zuatzinfo anbietet? Ich wähle mit gutem Grund diese Zusatzinfo, damit sie keinen Platz weg nimmt - die Info an sich ist nicht wichtig genug - denn ich hätte sie ja auch glech in den Text schreiben können.

Ich bin der Meinung, man sollte - wenn gar nichts mehr geht - immer den Standard unterstützen, und nicht jene Browser, die vom Standard abweichen.

<!--[if lte IE 6]> <style type="text/css"> .ienix {display: none; } </style> <![endif]-->

Browser-Hacks

Der Internet Explorer ist weit verbreitet, aber hat viele Fehler in den Versionen 5 und 6 . Der IE 5 und 6 ist daher besonders zu beachten und man ist genötigt, sich Lösungen für ihn einfallen zu lassen.

Ab und zu tauchen sogenannte Browser-Hacks auf, es ist sicher sinnvoll, um sie zu wissen, ich persönlich halte mich jedoch eigentlich nur an die conditional comments für den IE.

Ein typischer Browserhack benutzt zum Beispiel eine bestimmte Anordnung von Selektoren (oft trifft man * html an, was speziell für den Internet Explorer gefunden wurde, oder auch eine merkwürdige Konstruktion in der Form eines Schrägstriches, zB: w/idth).

Viele Browserhacks sind valides Skript, dazu zählt auch der Child Selektor, zB div>p, der vom Internet Explorer bis Version 6 ignoriert wird. Dieser Selektor div>p bedeutet nicht dasselbe wie die Selektorangabe div p, denn letzteres (div p) bezeichnet das p als Nachfahre des div und es können andere Elemente hierarchisch gesehen zwischen div und p stehen (zB div blockquote p, dann ist das p in blockquote eingebettet und nur Nachfahre, aber kein Kind von div) und bei div>p ist das p als direktes Kind (als erstes nachfolgendes html-Element) des div angesprochen und das p in div blockquote p wäre nicht gemeint. In tags sieht das zB so aus:

Dieser Browserhack mit dem Kindselektor div>p kann unter bestimmten Umständen genutzt werden. Es bedeuten dann beide Selektoren dasselbe - natürlich unter der Vorraussetzung dass die hierachische Struktur der eigenen Seite dies zulässt. Nur mit dem Unterschied dass der Internet Explorer und manche anderen veralteten Browser, div>p ignoriert, und man beiden Zuweisungen (also div>p und div p) verschiedene Werte zuweist!
Mittels dieser Vorgehensweise wird manchmal das Boxmodell des IE5 bis IE5.5 korrigiert. Übrigens ist es eigentlich nicht vorgesehen, innerhalb eines blockquote noch weitere html-Elemente als Blockelement zu plazieren, wie es hier mit p der Anschauung halber der Fall war.

Um manche Probleme des IE zu meistern, ist es empfehlenswert, Blockelementen eine Breite oder Höhe zuzuweisen (eines von beiden). Der IE6 stellt zum Beispiel ohne einer dieser Angaben die Schrift in manchen Bereichen dieser Blockelemente nicht richtig dar (erst wenn man die Seite scrollt erscheint die stellenweise fehlende Schrift wie aus dem Nichts).

Man kann den Boxmodell Fehler des IE5 und IE5.5 auch umgehen, indem man statt dem Elternelement padding zuzuweisen (zB ein div Container), dem Kindelement margin (zB den p Abätzen) zuweist, da margin vom IE5 und IE5.5 richtig verstanden wird (padding und border wird falsch verstanden).

Das beste sind jedenfalls die conditional comments, um IE Probleme zu lösen.

Absolute oder relative Werte?

Man stelle sich vor, man hätte die ganze Fensterbreite zum lesen zur Verfügung: Ein Text, der zB über 1024 pixel Breite geht (1024 pixel in der Breite ist die am meisten verwendete Bildschirmauflösung, und damit liegt auch die mögliche maximale Fensterbreite, mit der ein Browser geöffnet werden kann, in diesem Bereich).
So ein maximal beiter Text ist nur etwas für Leute, die scharf auf die Informationen sind und gar eine besondere Lust auf den Text haben.

Eine schmalere Textbreite fördert den Lesefluß und macht das Lesen einfacher, erfordert nicht so viel Konzentation. Also tut man gut daran, wenn man sich dieser Leitidee, die von vielen Webdesigner umgesetzt wird, ebenso anschliesst und generell die Texte nicht über die maximal zur Verfügung stehende Fensterbreite darstellt.

Dann aber muss man auch aufpassen, was passiert, wenn jemand eben nicht die grösstmögliche Fensterbreite mit seinem Browser wählt: dass also der Text nicht zu schmal wird, wenn man zB mit % arbeitet!

Man kann stets viele Lösungen finden, so auch für die Breite von Texten und einem möglichst flexiblen Layout.

Eine Möglichkeit wäre, den Text oder einen Container, der den Text enthält, mit pixel auf zum Beispiel 500 px zu setzen. Übrigens: Min-width funktioniert nicht beim Internet Explorer bis Versionen 6.
Unter Umständen kann man ein conditional comment für den IE unter 7 verwenden, mit einem angepassten nicht ganz optimalen Layout, und für die meisten anderen Browser dann ein optimales Design mit min-width.
In vielen Fällen schafft man durch min-width eine akzeptable Einschränkung der Flexibilität, wie es nötig ist dass zB ein Text nicht 30px breit wird was ja nicht so toll aussieht.

Man muss auch darauf achten, dass die Textabsätze (p) nicht breiter definiert sind, als wie übergeordnete Elemente (zB ein div-Container, in dem sich der Text befinde) - sonst "fliesst" der Text über den Container hinaus, der ja zum Beispiel auch einen andersfarbigen Hintergrund haben kann, als wie der Bodybereich.
Das passiert auch oft, ohne dass man es mitkriegt, wenn man für p-Absätze Breiten angibt aber gleichzeitig versäumt, prozentuale Containerbreiten in verschieden großen Fenstergrößen zu testen.

Ähnliches ergibt sich auch durchaus, wenn der Webdesigner seine Seiten zu einseitig auf die von ihm benutzte Bildschirmauflösung testet - und zwar geringere (800*600) berücksichtigt, aber nicht grössere. Es gibt heute schon Monitore und Grafikkarten, die es dem Nutzer erlauben eine Bildschirmauflösung von 1280*1024 und mehr zu nutzen (und gleichwohl ein ordentliches Bild auf dem Monitor bekommen).

Wenn du absolute Werte (zB pixel) nimmst, um die Seite aufzuteilen, kann das bei mangelnder Vorsicht allgemein immer dazu führen, dass ein Scrollbalken am unteren Fensterrand erscheint - nämlich wenn die zugewiesene Fensterbreite die Breite des tatsächlichen Fensters beim Nutzer übersteigt.

Es kann meiner Meinung nach keine Rede davon sein, dass man überhaupt nicht mit Pixeln arbeiten sollte. Wenn man ein kompliziertes weil komplexes Navigationsmenü macht, oder andere Dinge, lassen sich gewisse gestalterische Probleme kaum lösen, die übrigens nicht nur damit zu tun haben können, dass ein Nutzer die Fensterbreite verkleinert.

Floatende Elemente kann man auch in einen Container "einpacken", und diesem Container eine Breite in pixel geben, damit beim Verkleinern des Browserfensters nicht das Design verhunzelt wird, weil die floatenden Elemente sonst untereinander rutschen. Bei Navigationsmenüs kann das sehr wichtig werden.
Es lohnt sich hin und wieder immer mal die zu gestaltende Seite mit verschiedenen Fenstergrößen zu testen, bevor man das Layout in den übrigen Bestandteilen fertig stellt.

Zwar sollte prinzipiell eine Seite für alle Nutzer (mit ihren verschiedenen Browsern und Bildschirmauflösungen) gleichermaßen gut aussehen. Manchmal aber geht es um bloße Kleinigkeiten eines komfortablen Designs, und dann ist es sinnvoll, die Prioritäten in Bezug zu jenen Vorgaben (beim Nutzer) zu setzen, die auch am meisten vorkommen werden.
Das sind zum Beispiel jene Nutzer, die mindestens eine Bildschirmauflösung von etwa 1024*768 benutzen.

Es ist zum Beispiel vertretbar einen unteren Scrollbalken bei 800*600 in Kauf zu nehmen, aber einen solchen bei 1024*768 zu vermeiden, erst recht wenn der Nutzer das Browserfenster maximiert.

Tip:
Eine Breite in pixel für Container oder andere Elemente nur maximal bis <800px.

Ich nehme sogar immer etwas weniger, also 750px um einen Spielram für padding oder margin zu erhalten, oder gewisse Probleme mit dem Internet Explorer von vorneherein auszuschliessen.

Das Design und die Lesbarkeit sollte bei einer Bildschirmauflösung von 1024*768 auf jeden Fall passabel wirken, auch wenn man das Browserfenster verkleinert (zu etwas mehr als einem Drittel der zur Verfügung stehenden Bildschirmbreite).

Apropos:
Mit der Erweiterung "Web-Developer" für den Firefox ist dies sogar sehr einfach zu bewerkstelligen (Link zum Download siehe unten auf dieser Seite), da unter dem entsprechenden Menüpunkt unter "Resize" die Fensterbreite des Browser auf 600*800 gesetzt wird und so auf einfache Weise diese Bildschirmauflösung simuliert wird. Am häufigsten wird 1024*768 benutzt und grössere Bildschirmauflösungen als wie die, mit der man massgeblich gestaltet, stellen eigentlich kein Problem dar.

Übrigens erhält der body vom Browser (bzw. als Standard) einen geringen margin-Wert, und wenn man das anders haben möchte, muss man dem Body (im stylesheet oder auch als inline-style direkt auf das body tag angewendet) einen margin-Wert von 0 (null) zuweisen! Zum Beispiel im stylesheet: body { margin: 0; }. Man kann auch 0px oder 0pt schreiben, es ist bei Nullwerten dasselbe.

Zu Beachten sind die unschönen Effekte, wenn der Text zu nahe an den Browserfensterrand gerät - solche Texte verwirren das Auge und stören. Die einfachste Möglichkeit ist den Textabsätzen margin zuzuweisen oder einem übergeordneten Container padding (tut man das beim body-tag, sollte man % Werte benutzen und die Breite, also width von im body enthaltenen Elementen entsprechend abziehen um immer auf 100% zu kommen).

"Liquid Design"

Man kann das ganze Design einer Seite auf relative Werte % oder em einrichten - so bleibt die Seite immer flexibel und man verhindert nicht nur diese lästigen Scrollbalken der unteren Fensterkante, sondern sorgt für optische Einheitlichkeit und einwandfreie Präsentation des Inhalts, auch wenn einer mal die Schriftgröße im Browser ändert.

Das ist die Wunschvorstellung. Sie ist schwer zu erreichen.

Wenn eine Seite flüssig bleibt, egal wie gross man das Browserfenster einstellt, nennt man es "liquid design".

Wenn Navigationsmenüs horizontal angelegt sind, kann man übrigens auch mit float arbeiten. Man kann dabei einige Elemente auch nach links und andere nach rechts floaten lassen. So habe ich es mit der Top-Navigationsleiste meiner Seiten gemacht.
Man kann auch auf bestimmte Besonderheiten dabei achten: Wenn man die Fensterbreite verkleinert, schieben sich auf meinen Seiten die beiden Menüelemente (Impressum/Kontakt und die Navigationspunkte) nicht übereinander, sondern sind auf verschiedener Höhe angeordnet und dürfen sich so in der Breite überlappen ohne das auch in vertikaler Hinsicht zu tun.

Manchmal bleibt einem aber nichts anderes, als dass man gewissen Elementen eine feste Breite zuweist (zB einen div Container, der floatende Elemente enthält), so dass sie sich nicht untereinander schieben, wenn die Fensterbreite verringert wird.

Also ist liquid Design nicht immer so einfach zu erreichen und es kommt drauf an, welchen Inhalt und Elemente man gestalten muss. Negative margin Werte können hier trickreiche Lösungen bieten. Ich werde diesbezüglich noch einen Artikel schreiben.

Übrigens kommt man in bei solchen Lösungen oft zum min-width. Es wäre ja so schön - wenn nur der Internet Explorer nicht wäre. Min-width funktioniert nicht bei den meisten IE-Versionen. Es gibt aber einen (komplizierten) Trick dazu: Min-width (in Englisch). Mehr darüber auch auf einer anderen Seite (in Deutsch), wo es auch eine Erläuterung über die Absturzgefahr des IE gibt, wenn man das mit JS löst. Dummerweise muss man einen Doctype weglassen, also den IE in den Quirksmodus schicken. Also für mich ist das nicht. Der IE und seine Probleme bekommen bei mir eine Grenze, die er nicht übertreten darf.

Es wäre super, wenn man ein komplexes Navigationsmenü mit em einrichten könnte. Also Breite und Höhe aller Elemente in em, Schrift in em, Rahmen in em. Padding in em. Alles in em. Oder %.

Es war mir selbst jedoch nur mit pixeln zu schaffen! Sogar zwischen Firefox 2 und 3 gab es Unterschiede bei em! Vielleicht ist das letztlich gar nicht zu schaffen, es sei denn man ist wahrer Experte. Obwohl ich % noch nicht ausprobiert habe.
So bin ich wieder zu den Pixeln übergegangen, um meine Hauptseite und Navigatiosnmenü zu gestalten.
Die einzige Konsequenz, die daraus zu ziehen wäre, ist das dynamische Navigationsmenü in dieser Weise abzuschaffen und stattdessen die wichtigsten Links sichtbar anzubringen, und weitere Unterseiten mit restlichen Links.

Diese Lösung kann man wählen, und sie hat auch etwas für sich, nämlich Übersichtlichkeit - aber nur bis zu einer bestimmten Anzahl von Links. Wenn man aber nur ein Thema abhandelt, kann dies eine sehr gute Sache sein. Die Hauptseite von W3c.org kann das zeigen. Es fällt aber auch auf, dass man sich erst an die entsprechende Seite gewöhnen muss.

Wenn man mehrere Themen auf seinen Seiten abhandelt, wird es schwer sein, auf der Hauptseite für Übersicht zu sorgen, wenn man alle Links sichtbar angibt.

Was ich erkannt habe ist in vielerlei Hinsicht und auf verschiedenen Ebenen ganz einfach:
Man kann einfach nicht alles haben und irgendwo muss man Prioritäten setzen.

Man muss irgendwo auch Kompromisse schliessen.
Ein 100% liquides Design wird vielleicht bedeuten, irgendwo Kompromisse schliessen zu müssen.

Wenn das Navigationsmenü nicht 100% liquid ist, so dass ein Vergrössern der Schriftgöße (beim Nutzer) die Schrift zwar vergrössert, aber nicht die Container, in denen sich die Schrift befindet, so ist das logischerweise nur dann ein Problem, wenn jemand die Schriftgröße verändert.

Wieviele Nutzer tun das? Für die, die es tun, dürfte nur noch die Häfte der Schrift zu sehen sein, weil diese nicht über den Container hinaus gehen wird - ich habe meine Seiten so eingerichtet, dass man die übergeordnete Rubrik der Hauptnavigationspunkte anklicken kann (deren Schrift schon auf Elefantengrösse eingestellt sein müsste, dass sie unleserlich aus dem Container fliesst) - man öffnet damit eine Unterseite, in der alle Links zu der betreffenden Kategorie noch einmal aufgelistet werden. Das ist dann zur Not zumindest halbwegs barriefrei.

Mit em habe ich es nicht geschafft, das Menü liquid zu bekommen, weil selbst der Firefox 2, der noch von vielen verwendet wird, Abweichungen zu Firefox 3 zeigt.

Das Problem war vor allem, weil ich mit drei ul-Listen arbeitete, also zwei verschachtelten Untermenüs, und nicht nur einem einfachen aufklappbaren Menü. Dabei galt in der Darstellung, die Abstände der letzten ul-Liste so zu gestalten, dass der Abstand zur vorherigen Liste adäquat ist und keine Lücke zwischen zwei benachbarten ul-Listen (in der Darstellung auf dem Bildschirm) zu erkennen ist. Und gerade diese Lücke war bei em bei den verschiedensten Browsern um minimale Werte verschieden!

Jeder relative Wert vererbt sich in diesen verschachtelten Menüpunkten. Und am Ende werden viele Abhängigkeiten geschaffen - und anscheinend gibt es da für den Firefox 2 eben noch eine andere Methode, Maß zu nehmen, als wie für den Firefox 3. Und womöglich trifft dies auch auf den Opera zu. Bei den Internet Explorern kann man ja für jede Version ein passendes Stylesheet basteln, aber wenn es dan für jeden Browser zu leisten wäre, so ist das Konzept eines Web-Layouts meiner Meinung nach gescheitert.

Dynamische Navigationsmenüs

Wenn man nun daran geht, Navigationsmenüs zu gestalten, wird man sicher bald hinsichtlich des IE die Krise kriegen.

Wenn man dynamische Menüs wählt, die aufklappen, wenn man mit der Mouse darüber fährt, hat das viele Vorteile. Am wichtigsten ist für mich die Übersicht, aber auch um Platz zu sparen, den man auf seiner Hauptseite mit lesenswerten Artikeln füllen kann. Aber letztendlich ist es auch eine Stil- und Designfrage.

Diese Menüs sollten aus Listenpunkten bestehen (also ul und li, oder auch dl, dt und dd; siehe http://de.selfhtml.org/html/text/listen.htm).

Man kann es sich einfach machen, und wählt offenliegende Links, die man sehr leicht positionieren kann, auch diese am besten in Listen (zB ul und li). Das kann aber viel Platz einnehmen, je nachdem wie viele Seiten man hat - weil die Links immer sichtbar sind.

Solche aufklappbaren Menüs funktionieren für standardkonforme Browser auch mit purem CSS! Es ist kein Problem dynamische Navigationsmenüs mittels zB ul ul { display: none; } und dem Selektor li:hover { display: block; } für standardkonforme Browser einzurichten. Man verschachtelt dabei eine weitere ul-Liste innerhalb eines li-Elementes (also bevor das li-tag geschlossen wird)!

Aber, leider funktioniert das mit purem CSS nicht für den Internet Explorer. Es sei denn man versucht sich damit, alle li:hover mit a:hover zu ersetzen. Denn dies kann der IE verstehen. Das a-Element kann man beliebig formatieren, also auch als Block und man kann ihm einen Rahmen geben.

Man kann zumindest den IE 6 und IE 7 in vielen wichtigen Fällen einfach nicht ignorieren (mit dem IE 5 sollte man vielleicht auch noch mal testen) - will man, dass mehr als die Hälfte aller Besucher auch auf den eigenen Seiten navigieren können, und nicht durch ein kaputtes Design verschreckt werden. Denn mehr als die Hälfte aller Nutzer verwenden insgesamt den IE 6 (und IE 7).

Wie man diese dynamischen Menüs komponiert, soll hier nicht erörtert werden.
Ich glaube, man kann mit einer javascript Lösung sehr gut fahren, die wird hier erklärt: Dynamische Navigationsleisten bei self-html. Es gibt aber noch andere Webseiten, die ein einfaches Javascript für dynamische Navigationsmenüs anbieten - meist genügt schon die Suche bei google mit "li:hover+javascript". Lohnend ist auch folgende Seite: http://www.xs4all.nl/~peterned/csshover.html (in Englisch). Das Skript erscheint mir zwar ausführlich und wird viele Optionen schaffen, aber auch sehr umfassend. Ich wollte für meine Seiten eine relativ einfache und sparsame Verwendung von Javascript. Man kann solche javascript Lösungen oft auf englischen Seiten finden, wenn man nach "li.over+javascript" sucht (nicht li:over, sondern li.over).

Wer es kompliziert haben will, kann auch ein Dynamisches Menü für alle standardkonformen Browser nur aus CSS gestalten, und dann mittels conditional comments den IE offensichtliche, das heisst nicht mit hover sichtbar zu machende Links anbieten. Diese conditional comments würden ja von keinem anderen Browser gelesen werden, sondern nur vom IE. Man packt dann jeweils die Links zwischen  und positioniert entsprechend.

Alles Weitere muss man sich genau überlegen. Zum Beispiel ob man horizontale oder vertikale Menüs möchte. Wählt man horizontale, kann man mit float die Listenpunkte (li) des ersten ul-Elementes nebeneinander reihen, und muss evtl. bloß die nachgeordneten Listen mit clear bereinigen.

Float - Besonderheiten

Bei floatenden Elementen muss man evtl. berücksichtigen, dass ein übergeordnetes Element keine Definition einer Höhe erhält. Manchmal hat man auf diese Weise ja eine Hintrgrundfarbe erzeugt. Aber dann floatet man und plötzlich ist die Höhe des übergeordneten Containers zu niedrig.

Ein einfacher Trick, um dies zu erreichen ist, am Ende des übergeordneten Elementes (der zB ein Container sein kann) einfach ein weiteres Element einzufügen, dass aus dem Float genommen wird: etwa
<div style="clear: both;"></div>.
In diesem Container braucht nichts zu stehen, allein dass es nach den floatenden Elementen kommt, sorgt dann für die minimale Höhe, die durch die floatenden Elemente ja erzeugt wird (falls im betreffenden Container Elemente sind, die noch grössere Höhe aufweisen würde, aber nicht floaten, gäbe es dieses Problem freilich nicht).
Man kann dies natürlich auch als Klasse oder ID definieren und im stylesheet festlegen
Ich habe hier einfach die Aufhebung (clear) auf beide Seiten gewählt (both); man kann natürlich auch nur rechts aufheben, wenn man nur rechts gefloatet hat usw..

Validator und fehlerfreies Design in allen Browsern

Man muss seine erstellten Seiten unbedingt in verschiedenen IE-Versionen testen. Das betrifft in erster Linie immer Designelemente, die man zuvor noch nciht angewendet hat oder kompliziertes Design von zB Navigationsmenüs.

Opera und Firefox Versionen sind normalerweise derart weitgehend in Ordnung, dass man sie schon als Referenzen für den Standard verwenden kann. Aber es gibt hin und wieder bei komplizierten Design oder Seitenbestandteilen auch bei alten Firefox- oder Opera-Versionen Abweichungen. Es gibt noch eine Menge Firefox 2 Nutzer. Man kann den Firefox 2 als standalone betreiben, muss aber ein zweites Profil erstellen und beide Firefox-Browser mit einem gesonderten Befehl starten, den man unter Eigenschaften im Desktopsymbol festlegen kann.

Zwei Firefox Versionen gleichzeitig

Ich gehe davon aus, dass man die aktuelle FF Version 3 installiert hat. Um zwei Firefox Versionen, zB Version 2 und die jeweils aktuellste Version zu installieren folgender Weg:
Den aktuellen (neusten) Firefox startet man über Ausführen (via Startmenü) mit

"C:\Programme\Mozilla Firefox\firefox.exe" -P

Eventuell muss man den Pfad anpassen, je nachdem wo man ihn installiert hat.

Wichtig ist dieses -P in grossen Buchstaben. Damit ruft man den Profilmanager auf und erstellt nun einfach ein zweites Profil, zum Beispiel "testprofil". Das erste Profil müsste standardmässig "default" lauten und beinhaltet jene Einstellungen, die man bereits innerhalb des Firefox eingestellt hat inkl. Lesezeichen.

Den Profil Manager verlassen. Nun installiert man FF2 von der Mozilla Seite, installiert ihn, und wählt einen anderen Pogrammpfad, am besten auch auf einem anderen Laufwerk, aber startet ihn noch nicht sofort! Das ist ganz wichtig. Sonst gerät alles durcheinander und der FF 2 wird als Standardbrowser gesetzt und man kann den FF3 nicht mehr starten.

Nun editiert man beide Desktopsymbole, mit denen man FF aufruft. Wenn man aus dem Startmenü startet, muss man auch dort unter "Eigenschaften" diese Werte setzen, evtl. auch beim Symbol in der Schnellstartleiste.

Ich benutze selbst immer nur die Desktopsymbole zum Starten und habe sie zwecks leichtem Auffinden am Rand des Desktops angeordnet.

Beim FF3 schreibt man unter "Eigenschaften", dort "Ziel": -no-remote und -P "default" hinzu:

"C:\Programme\Mozilla Firefox\firefox.exe" -no-remote -P "default"

Beim FF2 schreibt man dasselbe, also auch unter "Ziel", nur setzt man als Profil das neu erstellte Profil ein:

D:\XCP\Installationsprg\FF2\firefox.exe -no-remote -P "testprofil"

Normalerweise wird man es nicht benötigen, im FF2 zu testen, aber es kann einen komplizierten Seitenaufbau geben, wo es dann doch notwendig werden könnte.

Testen im Internet Explorer

Wie man seine Seiten auf verschiedenen IE Versionen testen kann, habe ich in einem anderen Artikel bereits beschrieben, wo ich auch die conditional comments beschrieben habe.

Valides Skript

Oft ist von fehlerlosem Skript die Rede. Um zu überprüfen ob deine erstellten Webseiten einen Skriptfehler aufweisen, gibt es verschiedene Online-Services.

Teste deine Web-Seiten in dem Validator von W3C.org, denn dieser gilt als der genaueste. Denn es ist der Validator, der vom standardsetzenden Konsortium des Internet gepflegt wird!
Man sollte sich erst gar keine Fehler im Skript "angewöhnen".

Die Adresse des Validators: http://validator.w3.org/#validate_by_uri+with_options - ich habe hier im Link gleich die zusätzlichen Optionen angewählt.

Man kann sich auch bereits dort den Quelltext anzeigen lassen (view source), um zu schauen, wo genau der Fehler liegt. Weil die Zeilenzählung bei jedem Programm verschieden sein kann, benutze ich diese Möglichkeit sehr oft, um den bereich zu lokalisieren - es sei denn ich weiss bereits aus dem Kopf, wo der angegebene Fehler ist; es wird bei den Fehlermeldungen ein Ausschnitt des Quelltextes gezeigt, was für die meisten Fälle auch - bei kürzeren und damit übersichtlicheren - Dokumenten genügt.

Der CSS-Validator befindet sich hier: http://jigsaw.w3.org/css-validator

Ein weiterer html-Validator, der etwas pingeliger ist (und auf einige Besonderheiten Wert legt, den man auch auf dem eigenen PC runterladen kann um im Offline-Modus zu validieren, befindet sich hier: http://www.totalvalidator.com/tool/index.html.

Wenn man mit Cynthia Report (zB Section 508) arbeitet, kann man den Fehler bezüglich der language-Angabe in <meta> Form nur begleichen, indem man

<meta name="language" content="de-DE">

wählt, statt
<meta http-equiv="content-language" content="de-DE">. Normalerweise sollte eines der beiden Formen genügen.

Gemäß W3C-Kriterien sollte auch der Gebrauch von CSS-Stylesheets und Javascripten im meta tags gekennzeichnet sein. Zum Beispiel lautet der meta tag für CSS:

<meta http-equiv="Content-Style-Type" content="text/css">

Ich frage mich allerdings, warum der W3c.org Validator dies nicht als Fehler anzeigt, vermutlich, weil die Angabe kein "Muss" sondern ein "Sollte" bedeutet.
Nähere Informationen dazu auf W3C.org: http://www.w3.org/TR/html401/present/styles.html#h-14.2.1

Die Mühe des Testens

Man kann seine Webseiten auf verschiedenen Browsern testen, vor allem auch auf dem Internet Explorer - allerdings sollte man nur den Firefox Browser als erste Instanz benutzen, da er von allen Browsern dem CSS-Standard (2.1) am ehesten gerecht wird! Ich habe unten auf dieser noch einen Link mit kurzer Beschreibung angebracht, wo man alte Browser-Versionen im Netz findet.

Ist ein Fehler gefunden, überprüft man am besten zunächst ob die Syntax der Anweisungen richtig ist (mit dem html-Validator und CSS-Validtor von W3.org).

Meist aber handelt es sich einfach nur um Darstellungsprobleme, während das Skript technisch gesehen einwandfrei ist.

Viele Wege führen in CSS nach Rom, um den Fehler für den entsprechenden Browser zu beseitigen.
Man kundschaftet den verborgenen Fehler also aus, und stellt sich die Frage: woran liegt es wohl? Am besten ist es wenn man natürlich ein Gespür, ein Auge entwickelt hat, wo der Fehler liegen könnte.

Bei extrem komplizierten Seiten und dem unbedingten Willen den Fehler zu beseitigen , kopiert man am besten Stück für Stück die fehlerhafte Seite auf eine neue leere und damit fehlerlose Seite. Eigentlich genügt es testweise Werte im CSS-stylesheet zu verändern, sofern man weiss, was der Fehler ist (nur nicht wo); das ist zB oft bei zu grosser Breite der Seiten der Fall, und irgendein Element verursacht eine Überbreite.

Es ist natürlich oft einfacher, die ganze Seite einfach neu zu gestalten, wenn man den Fehler nicht findet und man den Eindruck hat, dass es die Suche nach der Nadel im Heuhaufen ähnelt oder man einfach zu viel verändern muss, um den Fehler zu beseitigen. Oft ist es so, dass man bei kompliziert aufgebauten Seiten an einer Stelle etwas verändert, um dadurch an einer anderen Stelle ein Problem zu schaffen.

Der Firefox gilt als der empfehlenswerteste Browser, um seine mit CSS und html gestalteten Seiten direkt auf dem Bildschirm zu testen. Hier sollte alles funktionieren, und man sollte den Firefox als Maß nehmen. Und dann erst mit den anderen Browsern testen.

Bereinigung von Fehlern und typische Designprobleme

Ein typischer Fehler tritt im Zusammenhang mit dem Internet Explorer auf und betrifft die Breite der Seite (untere Scrollbalken). Solche Fehler sind schnell gefunden, sofern man die möglichen html-Element erahnt, an denen es liegen kann.
Manchmal sind es floatende Elemente, denen ein seitllicher Aussenabstand (margin) oder Innenabstand (padding) gegeben wurde.

Die beste Lösung für den Internet Explorer sind conditional comments. Man könnte die Breite (width) des Elternelements (meist ein <div>-Container) versuchen zu verringern - radikale Lösungen sehen vor, das Layout für IE6 weniger komfortabel zu machen, Hauptsache gewichtige Probleme verschwinden.

Ein Fehler wird aber gewöhnlich einfach in einer Kombination von Anweisungen bestehen, die ein Anfänger in ihrer zusammenhängenden Bedeutung oft noch nicht ergründen kann - und auch selten in der Lage ist, genau nach diesem Fehler zu fragen, via google-Suchbegriffe oder Foren.

Ein Tipp: Einfachste CSS-Skripte und einfache Lösungen von Designfragen, beheben in der Regel die meisten Schwierigkeiten, in Bezug zu den Komplikationen, die mit verschiedenen Browsern auftreten können! Das hat sich vielen Webdesigner bereits erwiesen.
Komplizierte Arten und Weisen, wie man mit CSS umgeht, bringen erfahrungsgemäß erst oft die Probleme auf den Plan.

Einfache Skripte helfen, dass das Skript auch effizient bleibt: Während man stets versucht das Skript schlank zu halten und zB Überlagerungen zu vermeiden, wird nur das Notwendigste getan.
Was das Einfache sein soll, sieht vielleicht aber bei jedem verschieden aus. Und es kommt auch auf den Inhalt an, der positioniert werden soll. Denn manchmal erfordert dieser Inhalt eine bestimmte Positionierung und so weiter.

Das Komplizierte sollte nur angewendet werden, wenn das erwünschte Ergebnis nicht mit einfachen Mitteln zu erreichen ist.

Eines ist mir klar geworden, erst wenn man das Einfache versteht, kann man auch wirklich das Komplizierte richtig anwenden. Und das Einfache ist oft das Beste. Und man kann oft eben nicht alles haben und muss einerseits Prioritäten setzen und andererseits Kompromisse schliessen. Gerade was das mit den Browserproblemen angeht.

Html-Editor

KompoZer:

Noch keinen vernünftigen html-Editor gefunden? Meine Empfehlung:
Der KompoZer: http://www.nvu-composer.de/

Mit diesem WYSIWYG-Editor kann man besonders gut CSS-Stile anwenden.
Die Abkürzung WYSIWYG bezeichnet Editoren, die ein Ausgabefenster aufweisen, welches genau das zeigt, was auch später im Browser erscheint, aber wesentlich ist, dass man in diesem Fenster direkt auf die Gestaltung Einfluss nehmen kann, die sofort umgesetzt und sichtbar ist. "What You See is What You Get" bedeutet: was du siehst, ist was du bekommst.

Hier finden sich zusätzliche Informationen, Tips und Tricks zum KompoZer. Über den praktischen Umgang und zur Bedienung mit dem KomPozer. Unter Umständen wichtige Informationen, wenn du mit dem KompoZer (Version 0.7.10) viel am Quelltext arbeiten möchtest! Aber ich habe dort auch allgemeine Hinweise zu nützlichen (versteckten) Bedienfunktionen erwähnt. Und weiterführende Links angegeben.

Web-Developer für den Firefox:

Der Firefox Browser hat für Webdesigner eine sehr nützliche Erweiterung, das sich Webdeveloper nennt. Die Funktion "Display Page Validation" (unter dem Menü TOOLS) funktioniert leider noch nicht richtig (Stand: 2008). Weitere "Issues": http://chrispederick.com/work/web-developer/issues/
Unbedingt die "Issues"-Seite gelegentlich durchgehen, weil einige Funktionen noch nicht 100% korrekt funktionieren.

Man kann dennoch den W3C-Validator mittels "Validate HTML" aufrufen!

Der CSS-Editor ist fabelhaft, da man damit real-time editieren kann, was beim Kompozer nicht so gut funktioniert.

Es bietet sehr viele nützliche Funktionen und bringt einen manchmal auch auf neue Gedanken (betr. Webdesign). Adresse des Add-on.: https://addons.mozilla.org/de/firefox/addon/60

Die wichtigsten Links:

http://de.selfhtml.org/index.htm
Die umfassendste Seite über das Erlernen von html. Man kommt am besten immer wieder auf diese Seite zurück, wenn man bestimmte Fragen hat. Übrigens lohnt es sich bei den Ergebnissen der Suchfunktion zwischen Forumsbeiträgen und Seiteninhalten zu unterscheiden. Nicht immer findet man in den Forumsbeiträgen die Antwort, die man selbst sucht.
http://www.edition-w3.de/TR/1999/REC-html401-19991224/
Der html 4.01 Standard in deutscher Übersetzung.
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/
Der CSS 2 Standard (Spezifikation) als deutsche Übersetzung. Fachlektüre, zum Teil jedoch sehr schwer zu verstehen; dennoch eine nützliche Anlaufstelle für Fortgeschrittene.

Weitere nützliche Links:

http://www.1ngo.de/web/tips.html
Einige Tips und Tricks für das Webdesign von Ingo Turski.
http://www.stichpunkt.de/css/css-tipps.html
Nützliche Hinweise und Tips zu CSS, zur Horizonterweiterung und Auseinandersetzung mit bestimmten, regelmässig auftretenden Fragen.
http://www.css4you.de/browsercomp.html/standardbrowser/
CSS-Kompatibilität der verschiedenen Browser.
Eine nützliche Übersicht bei bestimmten Designproblemen, die man nur mit gewissen CSS-Anweisungen erreichen kann oder will. Dann muss man wissen, was zu beachten ist oder welchen Browser man gesonder behandeln muss.
http://homepages.tu-darmstadt.de/~guentner/
Unter "Webdesign" finden sich dort einige nützliche Informationen, besonders in Bezug zu Selektoren. Allerdings größtenteils auch nicht sehr eingängig formuliert.
http://browsers.evolt.org
Sehr hilfreich. Dort kann man sich neben seinen bereits installierten Browsern zusätzliche, veraltete Browser Versionen, als sogenannte Standalones runterladen. Die Möglichkeit auf verschiedenen IE-Versionen und anderen Browsern zu testen ist wichtig, um seine Webseiten zu überprüfen, da viele Leute noch mit alten Browsern unterwegs sind.
Standalones werden durch eine einzelne ausführbare .exe Datei (aus einem eigenen Ordner heraus) gestartet, und es folgt in der Regel keine aufwendige Installation des Programms auf dem Computer (bei Internet Explorer 3, 4, 5 und 5.5 zumindest).

Man muss dort drauf achten die richtige Version für sein Betriebssystem zu wählen.
Für IE5 und IE5.5 dort Internet Explorer (microsoft) wählen: 32bit.exe/standalones, und das jeweilige Betriebssystem wählen. ZB Win9x für Win98 und Win 98 SE.
Wer wissen will, wie seine Seiten ohne CSS aussehen, wählt einfach den IE3, den der unterstützt noch kein CSS. Das ist sozusagen die einfachste Möglichkeit eines "Textbrowsers" (auf Umwegen) - zB Lynx und andere waren mir doch sehr umständlich zu installieren.
Den Netscape muss man zwar eigens installieren und eventuell ist er vorübergehend der Standardbrowser, was sich ja mit dem Starten seines Lieblingsbrowsers schnell wieder ändern kann. Auf Netscape zu achten, mag für den Perfektionisten gelten, ich glaube, "der stirbt langsam aus".

Ich würde jedenfalls an deiner Stelle einfach den "Multiple IE Installer" nutzen, und/oder den "IE-Tester".
Den Link zu den entsprechenden Seiten zwecks Download findest du auf conditional comments, wo ich auch weitere Einzelheiten zu der Ausgangslage des Problems geschrieben habe - dort auch weitere Erklärungen zu den conditional comments, wie man mittels <!--[if IE]> die verschiedenen IE-Versionen gesondert ansprechen kann.
http://css-technik.de/css-examples/219_9/
Für Fortgeschrittene (und durchaus auch wagemutige Anfänger) eine übersichtliche und kompakte Erläuterung der Float-Theorie! Floatende Elemente sind mit CSS möglich und können bestimmte Designaufgaben in einfacher Weise lösen aber auch als anspruchsvolle Kosmetik der Webseite dienen.
http://onhavinglayout.fwpf-webdesign.de/
Näheres zu einer weiteren Besonderheit des Internet Explorers. Mit dem sogenannten "sHasLayout" und der Besonderheit, dass html-Elemente unter bestimmten Umständen eine Variable namens Layout aufweisen können (true oder false), lassen sich viele Probleme des IE in Bezug auf CSS vermeiden. Die Bezeichnung dieser Variable soll praktisch gesehen bedeuten: Ein html-Element, (zB div) hat ein sogenanntes "Layout", wenn bestimmte Bedingungen erfüllt sind. Jetzt muss man nur noch wissen, was der obskure Begriff "Layout" bezeichnen soll. Es ist ganz einfach so etwas wie eine besondere Auszeichnung, die sich allerdings von manchen anderen Auszeichnungen unterscheidet und ascheinend nur in Bezug zum IE eine Rolle spielt. Zum Beispiel kann schon die width-Angabe Layout verschaffen.

nach oben

November 2007
Stefan Arens

Html & CSS

Tips und Tricks

Tutorial zu Html und CSS

Praxis!

Zwei wichtige Punkte des Webdesigns sind:

Das tag, das Skript, der Quelltext

Das Skript

Fliesstext

Tags

Html-Maskierungen

Das tag und das html-Element

Was ist Auszeichnung ?

CSS-Skript

DocType und der Head-Bereich der Webseite

Besonderheiten

Hinweis zu den Codebeispielen:

Html, Textverarbeitung und die Standardvorgaben

Apropos eigene Formatierungen:

Merke:

Offiziell missbilligte Anweisungen

Ersatz für <hr-style>:

Weiteres:

Was ist der Body?

MERKE:

CSS - Cascading Style Sheets

CSS: Selektoren und Eigenschaften

Blockelemente, Inline-Elemente und Verschachtelung

Verschachtelung:

Besonderheit relativer Maßangaben in der Verschachtelung:

Listen

Klassen und ID

Zuweisung von Klassen und ID (Zusammenfassung):

Das Stylesheet

Hinweise zu Pfadangaben:

Das Boxmodell und der Container

Übersicht Maßangaben

Achtung: margin wird nicht immer addiert!

Hierarchie und Vererbung

Tips und Tricks

Style-Anweisungen und Klasse zugleich

Grundlegegend wichtig ist die Schriftformatierung

Noch mal kurz zur Syntax und sonstige Hinweise

Maskierungen

Reihenfolge der Pseudo-Klassen

Mouseover Texteinblendung

Browser-Hacks

Absolute oder relative Werte?

"Liquid Design"

Dynamische Navigationsmenüs

Float - Besonderheiten

Validator und fehlerfreies Design in allen Browsern

Zwei Firefox Versionen gleichzeitig

Testen im Internet Explorer

Valides Skript

Die Mühe des Testens

Bereinigung von Fehlern und typische Designprobleme

Html-Editor

KompoZer:

Web-Developer für den Firefox:

Die wichtigsten Links:

Weitere nützliche Links: