Wenn die CSS Regeln im Dateikopf stehen, lädt sie der Besucher beim Aufruf jeder einzelnen Page ja neu. Wenn du die Regeln aber in eine eigene Datei steckst wird diese nur ein einziges Mal geladen und befindet sich danach im Cache des Browsers.
Grundsätzlich alle CSS Regeln in eine eigene Datei auslagern und nur Regeln die sich speziell auf eine einzelne Page beziehen in den Dateikopf dieser Page.
Zur Farbgebung: Das Blau finde ich als Hintergrundfarbe etwas zu dominant, rosa gefällt mir auch nicht. Es gibt im Web eine Menge Generatoren die auf Knopfdruck angeblich angenehme Farbkombinationen ausspucken. Ob das so stimmt weiß ich nicht, auf jeden Fall kannst du dich dort aber inspirieren lassen.
Als Hintergrund kannst du auch irgendeine Minigrafik nehmen und die dann kacheln. Verbraucht kaum Traffic.
Zum Code:
Zeile 2: <html> => <html lang="de">
Das interessiert zwar die meisten Besucher nicht, dafür aber Suchmaschinen. Auch wenn die mehr oder weniger gute Algorithmen haben um die Sprache zu ermitteln, kann man ihnen die Arbeit erleichtern und die Sprache einfach angeben.
Zeile 7: color:#000000; => color:#000;
Wenn du für den Rot-, Grün- und/oder Blauwert zwei gleiche Buchstaben/Ziffern hast kannst du das abkürzen indem du den Buchstaben/die Ziffer nur einmal hinschreibst. Statt #66AA22 also #6A2. Du wolltest die Dateigröße ja möglichst klein haben :)
Zeile 8: a:link{xyz} a:visited{xyz} => a:link,a:visited{xyz}
Du kannst mehrere Elemente zusammen formatieren. Insbesondere wenn mehrere Elemente exakt gleich formatiert werden sollen bietet sich das an. Spart wiederum Platz und gilt natürlich auch für die nachfolgenden Regeln.
Zeile 36: font-size:12px => entfällt
Der IE ist nicht in der Lage Schriftgrößen die in Pixel angegeben sind zu vergrößern oder zu verkleinern. Jemand mit schlechten Augen hat so zB keine Möglichkeit mehr sich den Text zu vergrößern um ihn lesen zu können.
Wenn du unbedingt ene Schriftgröße angeben willst, nimm % oder em. Für Fließtext würde ich das aber ganz weglassen, da jeder Browser leider Schrift verschieden groß darstellt und das was bei einem Browser vernünftig aussieht, kann beim nächsten viel zu klein oder viel zu groß sein. Hinzu kommen noch verschiedene Monitorauflösungen, betriebssystemabhängig verschiedene Punktgrößen und natürlich die individuellen Anforderungen jedes Besuchers. Mit 12px eine bestimmte Größe zu meinen ist also sowieso nicht möglich.
Deshalb ist es das beste "body" eine Schriftgröße von 100% (bzw 100.01% um einem IE-Bug aus dem Weg zu gehen) zu geben, und nur Elementen die du größer oder kleiner als Normaltext haben willst (zB Überschriften, Fußtext), zB mittels h1 {font-size:140%;} oder #footer {font-size:0.8em;} abhängig von der vom Nutzer in seinem Browser eingestellten Standardgröße zu formatieren.
Zeile 50:<div id="banner">Oc-Corner</div> => <h1>Oc-Corner</h1>
CSS ist nicht die Kunst möglichst viele DIVs zu verwenden :)
Du kannst und sollst den HTML-Code soweit möglich semantisch auszeichnen. "Oc-Corner" ist hier eine Überschrift und kein undefinierbares Objekt und genauso sollte es dann auch benannt werden.
Das macht den Quellcode erstens lesbarer, zweitens zeigen dann auch Browser die CSS nicht unterstützten eine einigermaßen strukturierte Seite an und drittens suchen Suchmaschinen explizit nach Begriffen im Titel und in Überschriften und bewerten die dann stärker. Letztendlich hängen sich dann auch noch Screenreader an solchen Elementen auf. Da Blinde Schwierigkeiten haben sich einen Überblick über eine Seite zu verschaffen, bieten die Screenreader an Überschriften oder Links der Reihe nach vorlesen zu lassen, kündigen Listen, einzelne Absätze usw an. Wenn das ganze nur in einer Menge DIVs gekapselt ist, ist das ein langer monotoner Text, da DIV ja keine Eigenschaften mitbringt und nicht standardmäßig als irgendetwas interpretiert werden kann.
Zeile 52:<div id="menu">
<b>Index</b><br />
<a href="/">News</a><br />
<a href="/artikel/">Artikel</a><br /></div>
=>
<strong>Index</strong> ?
<ul id="menu">
<li><a href="/">News</a></li>
<li><a href="/artikel/">Artikel</a></li>
</ul>
CSS:
#menu {list-style-type:none;}
#menu a {display:block;}
strong {font-weight:bold; font-type:normal;}
Hier gilt ähnliches wie beim vorigen Punkt: Ein Menü ist kein undefinierbares Element, sondern eine Liste von Links.
<b> ist nur eine optische Veränderung und hat keine semantische Bedeutung. Falls du also Index nicht nur aus ästethischen Gründen fett haben willst, sondern deshalb weil es irgendetwas Besonderes ist nimm <strong>. Das kannst du dann ähnlich oben entsprechend formatieren. Falls "Index" gar eine Überschrift für einen Bereich sein soll, nimm <h2> und bring das ganze wiederum mit CSS-Regeln auf die gewünschte Form.
Zeile 53: <br /> => <br>
<br /> ist XHTML, du hast aber einen HTML 4.01 Transitional Doctype. Musst dich für eins entscheiden. :) Das kommt noch ein paar Mal im Dokument vor.
Zeile 60: <div id="content"> => <p id="content">
Gleiches wie oben, das ist ein Textabsatz. Falls da noch Bilder reinkommen, das DIV stehen lassen, die einzelnen Absätze dann aber trotzdem in <p> Element packen.
Ist etwas länger geworden, natürlich ohne Anspruch auf Vollständigkeit, aber evtl kann ja noch jemand was damit anfangen...