06 – Grundlagen HTML & CSS: Das Container-Box-Modell endlich verstehen

Dieses Video ist existenziell wichtig für die Programmierung von Internetseiten und das Verständnis von der Trennung von Inhalt (HTML) und Design (CSS). Mittels CSS ist es möglich ein und dieselbe HTML-Datei unterschiedlich (Layout / Design) darzustellen. Alles dreht sich um das Container-Box-Modell. Ohne das Verständnis für dieses Box-Modell können Sie mit Hilfe von CSS nicht das Design oder Layout erstellen, dass Sie sich wünschen.

In diesem Video zeige ich Ihnen schematisch das CSS-Container-Box-Modell anhand meiner eigenen Internetseite. Der Schematische Aufbau einer beliebigen Internetseite ist häufig ähnlich: Es gibt die Container Header, Content (der zumeist wieder unterteilt ist) sowie einen Footer.  Im Anschluss experimentieren wir im HTML-Editor mit dem Einfluss von MARGIN und PADDING auf das Box-Modell.

Wie so oft führen viele Wege nach Rom. Auch im Einsatz von HTML und CSS, zur Umsetzung eines Designs, führen viele Wege zum gewünschten Ergebnis (Design / Layout). Wichtig ist jedoch nur, dass Sie dieses Container-Box-Modell verinnerlicht haben und anzuwenden wissen.

Am Ende dieser Video-Lektion binden wir erstmals eine externe CSS-Datei ein.

PS: Neben den beiden CSS-Anweisungen MARGIN und PADDING gibt es sicherlich noch weitere Anweisungen, die wesentlichen Einfluss auf das Modell / die Darstellung haben. Auf diese wird in diesem Video nicht eingegangen.