CSS einfach erklärt

Jeder Browser verfügt zunächst einmal über ein eigenes Standard-Browser-Stylesheet. Darin stehen bestimmte Regeln, die sich zum größten Teil an den Initialwerten der CSS-Empfehlung anlehnen. Das W3C macht hierfür einen Vorschlag, der allerdings nicht normativ ist. Beim Firefox kann man sich diese Datei auch anschauen. Sie heißt html.css und liegt im Programmordner von Firefox im Unterordner “/res” (also z. B. “C:\Programme\Mozilla Firefox\res”). Alternativ kann man in der Adressleiste von Firefox auch “resource:///res/html.css”eintippen. Im Buch bin ich Seite 126 ausführlich auf diese Standard-Stylesheets eingegangen, da sie ein wichtiger Baustein der CSS Kaskade sind. Nur wenn man die Interpretation innerhalb der CSS Kaskade verstanden hat, kann man sich im nächsten Schritt daran wagen, das Zusammenspiel zwischen Kaskade, Vererbung und Initialwerten zu verstehen. Das Verständnis dieser Zusammenhänge ist das Fundament jedes CSS-Designers. Ansonsten wird man immer wieder vor scheinbar unlösbaren Problemen bei der Darstellung stehen.

Mehr lesen … »

Änderungen, die man mit Hilfe von Firebug am Code vorgenommen hat, werden von Haus aus leider nicht protokolliert. In der Praxis passiert häufig folgendes: Man probiert zahlreiche Varianten durch und kann sich am Ende nicht mehr genau erinnern welche Eingriffe man zu welchem Zeitpunkt durchgeführt hat. Man weiß nur noch, dass eine der letzten Varianten eigentlich die beste Lösung darstellte.

Mehr lesen … »

Wenn man die Grundlagen von CSS verstanden hat, wird man beim Designen einer Website immer wieder mal auf eine CSS-Referenz zurückgreifen müssen. Niemand kann und will für alle Eigenschaften die Parameter (Werte, Standardwert, Vererbung) im Kopf behalten. Im Leserbereich habe ich die offizielle Referenz des W3C sowie zwei gute deutschsprachige Referenzen verlinkt.

Die meiner Meinung nach beste Referenz, die online verfügbar ist, stammt vom Verlag SitePoint. Leider ist sie nur in englischer Sprache verfügbar. Wer einigermaßen der englischen Sprache mächtig ist, sollte sie sich unbedingt anschauen. Der Clou dabei ist, dass sie auch als Zusatzerweiterung für das Firefox-Plugin Firebug verfügbar ist. Mehr lesen … »

Im CSS-Lehrgang habe ich auf Seite 142 die Firefox-Erweiterung View Source Chart vorgestellt, die die Verschachtelung von HTML-Elementen auf einer Webseite grafisch darstellt, wodurch sich die Struktur einer Seite sehr schnell erfassen lässt.

Ein etwas verspielteres Tool ist der HTML-DOM Visualisierer von aharef. Ein Java Applet visualisiert den Aufbau anhand einer animierten Baumstruktur. Eine Erklärung welche Tags welcher Farbe zugeordnet sind findet man wenn man etwas herunterscrollt. Im zugehörigen Blog sind bereits einige große Websites exemplarisch analysiert. Man kann aber auch seine eigene URL visualisieren lassen. Bei flickr sind übrigens auch weit über 2.000 Internetseiten hinterlegt.