Also du meintest ja, man soll erst den Inhalt und dann das Design machen.
Ja, dann lernt man, HTML richtig anzuwenden und spart sich außerdem doppelte Arbeit. Denn wenn man zuerst das Design macht und noch keinen Inhalt hat, dann weiß man ja nicht, welche Tags man verwenden wird. Man benutzt also wahrscheinlich hauptsächlich divs, was aber semantsich gesehen eigentlich die letzte Wahl ist. Die meisten sparen sich dann nach dem Design die Arbeit, die divs durch richtige Tags zu ersetzen und produzieren so nur eine sogenannte div-Suppe, die im Sinne von HTML leider um keinen Deut besser ist, als Tabellenlayout.
Ich hab das aber eigentlich so verstanden, dass man mit CSS den Inhalt unabhängig vom Design machen kann.
Ja, bei CSS-Design befolgt man strikte Trennung von Inhalt und Layout. Alles was mit Inhalt/Semantik zu tun hat, wird in HTML gelöst, alles was Design/Layout angeht, mit CSS. Die "räumliche" Trennung, also ein externes Stylesheet wird das noch gefestigt. Wenn die Basis aus validen und semantisch korrektem HTML steht, brauchen Experten anschließend nur noch am Stylesheet zu arbeiten und müssen (im Idealfall) nie wieder in den HTML-Code eingreifen, um das Design dann fertig zu stellen.
Dein Schaubild ist schon prinzipiell richtig. Aber im Stylesheet referenziert man ja auf den HTML-Code. Deine Selektoren sehen dann z.B. so aus:
div#Content, ul#Menu, p.Absatz1, address
Wenn Du aber alles mit <div> schreibst, Dein Stylesheet dann fertig ist, und Du dann dran gehst, Semantik in Deinen HTML-Code zu bauen, dann wird aus einer Adresse, die Du vorher mit <div> ausgezeichnet hast richtigerweise ein <address>. Das gabs aber bisher nicht in Deinem Stylesheet. Es könnte also sein, dass sich HTML-Tags ändern und Deine Selektoren im Stylesheet dann nicht mehr stimmen. Hattest Du vorher ein div#Menu heißt das jetzt vielleicht ul#Menu (was richtig wäre) und je nachdem wie Du Dein Stylesheet aufgebaut hast, musst Du dann noch ein zweites Mal Änderungen daran vornehmen.
CSS baut immer auf einem fertigen, validen und semantisch korrekten HTML-Code auf. Aber beide sind voneinander getrennt, das ist richtig. Und wenn der HTML-Code gut durchdacht ist, kann man das komplette Layout und Design total abändern, indem man nur das Stylesheet austauscht. Das beste Beispiel dafür, was hier möglich ist, ist
css Zen Garden: The Beauty in CSS Design
Dieser zieht sich leider noch weiter über die Seite und ich kriegs nicht hin, das er nur beim Menü als Hintergrund bleibt.
Ich hatte Dir schon gesagt, wo das Problem liegt. Woran hapert es denn nun noch?
