Diese Seite dient mir zum üben der Web-Programmiersprachen

Wie, was und wo

Mit CSS wird das Layout der Seite gestaltet. Es ist die Abkürzung für Cascading Style Sheets Der große Vorteil von CSS liegt darin, etwas einmal definiren zu müssen und dies dann für viele HTML-Elemente gilt. Mit einer externen CSS-Datei befindet sich das Layout getrennt vom Inhalt. Veränderungen betreffen dann die komplette Seite.

Die Syntax einer CSS-Vorgaben ist aufgeteilt in dem Selector (Das Element zum auslösen der Vorgabe) und der Declaration (Die Vorgabe) Die Declaration steht immer in Klammern { und } Es besteht aus der Property (Eigenschaft) und dem Value (Dem Wert der Eigenschaft). Nach der Property folgt ein Doppelpunkt, nach der Declaration ein Semikolon.

Selector {Property:Value; Property:Value;}

h1 {color:blue; font-size:12px;}

CSS einbinden

Eine Möglichkeit CSS-Vorgaben anzuwenden besteht darin es direkt in die HTML-Tags zu schreiben. In dem Fall ist der Aufbau der dem HTML-Tags gleich. Dafür verwendet man das Attribut style

<h1 style="color:blue; font-size:12px">

CSS kann auch im <head>-Bereich vorgenommen werden. Dafür wird das style zu einem eigenen Tag <style> In diesem Tags kommen alle CSS-Vorgaben hinein. Es können beliebig viele Selectoren mit ihren Vorgaben angelegt werden.

<style>
   h1 {
     color: blue;
     font-size: 12px;
   }
</style>

Die dritte Möglichkeit besteht in der externen Datei. Damit ist das Layout vom Inhalt ganz und gar getrennt. Es muss nur ein einziger Befehl in die HTML-Seite eingebunden werden. So müssen die CSS-Vorgaben für das gesamte Projekt nur ein einziges mal definirt werden. Änderungen sind ganz leicht umzusetzten. Daher sollte immer diese Variante gewählt werden.
Die CSS-Datei ist so aufgebaut wie in der zweiten Variante, nur das der style-Tag nicht mehr benötigt wird. Die Datei braucht die Endung .css Es ist sinnvoll diese Datei style.css zu nennen.

<link rel="stylsheet" href="style.css">

Mit dem Tag <link> und den Attributen rel="stylesheet" sowie href="style.css", lässt sich die CSS-Datei im head-Bereich einbinden.

Prioritäten

Wenn mehrere dieser Varianten verwendet werden und es zu Wiedersprüchen kommt, wird immer die CSS-Vorgabe umgesetzt die dem Tag am nächsten ist. Die Vorgabe, direkt im Tag hat die höchste Priorität. Danach kommt der style-Tag im header-Bereich, zum Schluss die Angaben in der externen Datei. Die geringste Priorität haben die Standardeinstellungen des Browsers.