Das Aussehen – CSS
Jetzt, wo wir unser Fundament- das HTML – haben, wollen wir das Aussehen unserer Website verändern und ansprechender gestalten. Hier kommt CSS ins Spiel.
Bevor wir uns jedoch in die Praxis stürzen, sollten wir uns zunächst darüber klar werden, dass es drei verschiedene Methoden gibt, um CSS in einer Website zu verwenden:
- Inline-Styling: Dabei werden die CSS-Stile direkt in das HTML-Element eingefügt. Obwohl diese Methode sehr direkt und einfach zu verstehen ist, wird sie nicht empfohlen, da sie die Struktur und Darstellung in Deinem Code vermischt. Beispiel:
<h1 style="color: #2191BD;">Willkommen auf meiner ersten Website!</h1>. - Interne Stylesheets: Hierbei schreibst Du den CSS-Code in einem
<style>-Element im<head>-Bereich Deines HTML-Dokuments. Diese Methode ist nützlich, wenn Du spezifische Stile für eine einzelne Seite haben möchtest. - Externe Stylesheets: Bei dieser Methode schreibst Du den CSS-Code in einer separaten Datei und verlinkst diese Datei in Deinem HTML-Dokument. Dies ist die gängigste Methode, da sie Dir erlaubt, die gleichen Styles auf mehrere Seiten anzuwenden und hält Deinen Code sauber und gut organisiert.
Jede dieser Methoden hat ihre Vor- und Nachteile, und welche Du verwendest, hängt von den spezifischen Bedürfnissen Deines Projekts ab. Im Rahmen dieser Übung werden wir uns auf Inline-Styling konzentrieren – die anderen Varianten wirst Du am IT-Kolleg Imst lernen.
Widmen wir uns nun unserem Beispiel. Wir möchten die Hauptüberschrift mit einem Hintergrund versehen, sie sollte zentriert auf der Website ausgerichtet sein und die Textfarbe sollte verändert werden. Dazu benötigen wir die folgenden Eigenschaften:
background-color– Mit dieser Eigenschaft kann die Hintergrundfarbe eines Elements verändert werden.text-align– Damit kann die horizontale Ausrichtung von Text geändert werden.color– Um die Farbe des Texts zu verändern, kann die Eigenschaft „color“ verwendet werden.
Bauen wir das in unseren Code ein, sieht das folgendermaßen aus:
Wie du sehen kannst, haben wir die CSS-Eigenschaften „background-color“ und „text-align“ im <header>-Element und die „color“-Eigenschaft im <h1>-Element angewendet. Die Farben haben wir jeweils als Hex-Codes definiert.
Versuche nun, diesen Code im Tryit Editor von W3Schools einzufügen und klicke auf „Run“. Wie hat sich die Website verändert?
Nun fehlt uns nur noch eine Sache, um unsere Website vollständig zum Leben zu erwecken – die Interaktivität unseres Buttons. Im nächsten Unterbeitrag werden wir genau das in Angriff nehmen und mit Hilfe von JavaScript umsetzen.