Im ersten Beitrag wurde die Basis für eine moderne HTML5-Webseite geschaffen. Mit der resultierenden index.html-Datei arbeiten wir am besten weiter. Um der Seite nun einen individuellen Touch und Wiedererkennungswert zu verpassen, ist es sinnvoll sie mit eigenem CSS (Cascading Style Sheets) zu gestalten.
Beispielsweise möchten wir den Inhaltsbereich zentrieren, mit einer gewissen Breite versehen und eine andere Schriftart setzen. Dazu wird der folgende Codeschnipsel an das Ende von <head> (also vor </head>) kopiert.
<style>
body {
margin: 1em auto;
max-width: 40em;
font-family: sans-serif;
}
</style>
Was geschieht hier nun im Detail?
Der verwendete, sogenannte inline-Style kommt direkt in den <style>-Tag. Für größere Projekte ist jedoch anzuraten die Styles in eine extra Datei auszulagern. Diese wird dann vom Browser besser zwischengespeichert, da sich in der Regel das CSS seltener ändert als die Inhalte. Externes CSS wird mit <link rel="stylesheet" href="styles.css"> (wieder im <head>) eingebunden.
Zuerst fällt auf, dass das body-Element angesprochen wird. Dies ist ein Selektor welcher benötigt wird, um Attributen einen Wert zuzuweisen.
Erläuterung der verwendeten Attribute:
margin: Außenabstandmax-width: Maximale Breitepadding: Innenabstandfont-family: Schriftart
Für tieferes Verständnis ist es notwendig, das Box-Modell zu verstehen. Für einzelne Attribute hilft die MDN-Web-Dokumentation.
Viel Spaß beim Aufhübschen deiner Seite. Die Möglichkeiten sind (fast) grenzenlos :)