Stichworte zu HTML und CSS

HTML, CSS

Idee

HTML-Seiten enthalten und strukturieren Inhalte in Form von Texten, Bildern und anderen Objekten, wie Flash-Filme etc.

CSS-Anweisungen beschreiben die Darstellung und das Layout (Style) einer HTML-Seite.

Anzustreben ist die Trennung von Inhalt und Darstellung innerhalb der Site.

Standardisierung HTML, CSS

Siehe W3C Organisation.

CSS Styles einfügen

CSS-Anweisungen können auf 3 Arten einem HTML-Dokument zugeordnet werden:
  • Inline Styles, für ein HTML-Tag
    (verletzt den Grundsatz der Trennung von Inhalt und Darstellung)
  • Embedded Styles, für eine Seite
  • Linked Styles, CSS-Datei zu einer ganzen Site
    (zu bevorzugende Variante)

HTML-Elemente

HTML-Elemente wie Links oder Bilder werden vom Browser je nach Element-Typ inline (also hintereinander auf der selben Zeile) oder als Blöcke (Element jeweils auf einer neuen Zeile) dargestellt. Siehe dazu die Selfhtml-Site.
Mit CSS lässt sich dies ändern, hier am Beispiel des Img- und Div-Tags:
img { display:block; }
div { display:inline; }

CSS Selektoren

Einige Beispiele:
body  { font-family:arial; font-size:10pt; }
div   { border:1px solid red; }  /* debugging */
img   { margin:4pt; }
a img { border:0 none; }
#single_box  { background:url(pic.jpg) repeat #333333; }
.menu_box    { border:4px solid green; }
.menu_box a  { display:block; }
.menu_box a:hover { color:red; }

CSS, Überschreiben

Nachfolgende Deklarationen überschreiben vorhergehende.

CSS, Vererbung

Innere Elemente erben von äusseren Elementen, sind Teil der Äusseren.

Das CSS Box Modell

CSS Box Modell FireFox und IE benutzen unterschiedliche Boxdarstellungen (Box Model).

Leider ist der IE-Browser nicht konform zum W3C-Standard!