Auf Lernort-Mint.de findet sich eine kurze Einführung in die Verwendung von “HTML” zur Erstellung von Webseiten. CSS (kurz: Cascading Style Sheets) wird dazu verwendet, das Aussehen (Layout) von HTML-Dokumenten festzulegen z.B. zu erzeugen (Schriftarten, Farben, Hintergrund). Dies lässt sich auch mit “HTML” durchführen, nur ist die Verwendung von CSS einfacher und strukturierter.
Vorteile von CSS
Wie bereits in der Einleitung erwähnt, ist man mit “HMTL” auch in der Lage, das Layout von Webseiten zu gestalten bzw. erstellen. Bekannte “HTML”-Befehle dazu sind z.B. <table>…..</table> (zum Erstellen von Tabellen) oder <p> als Befehl für einen Absatz.
- Der Hauptvorteil von CSS ist, dass das Layout mehrere Webseiten mit Hilfe einer einzigen CSS-Datei übernommen werden kann, dadurch muss nicht mehr jede Seite mühsam mit HTML-Befehlen erzeugt werden.
- Ein weiterer Vorteil ist, dass CSS von allen Webbrowsern unterstützt wird. Einige HTML-Befehle, wie bespielsweise <blink>…</blink> werden nur von einigen Browsern “verstanden”.
- Zusätzlich sind die CSS-Befehle den HTML-Befehlen teilweise sehr ähnlich.
CSS (Cascading Style Sheets)
Wie bereits erwähnt ist CSS und HTML teilweise sehr ähnlich, deswegen können CSS-Dateien auch mit jeden Textprogramm (z.B. Editor) geschrieben werden.
So wird eine einfache Webseite mit HTML-Befehfeln aufgebaut (ohne Lyout)
Hier steht, was nachher im Browser erscheint.
</HTML>
Nun kann man z.B eine Hintergrundfarbe definieren (z.B. rot), dazu verändert man den “Body (Körper der Webseite)”. So lautet der Befehl nun: <body bgcolor=”#FF0000″>
“Übersetzt” man nun den HTML-Befehl in CSS, so lautet dies body {background-color: #FF0000;}
Allgemein leitet sich der CSS-Befhel aus dem HTML-Tag (selector), der Eigenschaft (property) und dem Wert der Eigenchaft ab (value). Somit erhält man den allgemeinen Aufbau eines CSS-Befehles:
selector {property: value;}Einige CSS-Befehle:
- Hintergrundfarbe: body {background-coulor: value;}
- Hintergrundbild: body {background-image: url(“Dateiname”);}
- Textposition, z.B. Außenabstand definieren: body {margin: 100px 10px 10px 100px;}
Einbinden von CSS-Befehlen in eine Website
Prinzipiell gibt es drei Möglichkeiten, CSS-Befehle einzubauen:
- Die sog. In-line (Attribut-Stil)-Methode, dabei wird dies über den Befehl “style” direkt in die html-Datei eingebunden, also zwischen <body> und </body> (z.B. <body style=”background-color: #FF0000;”>)
- Eine weitere Möglichkeit ist die sog. In-document (Tag-Stil)-Methode, dabei werden die CSS-Befehle im Header der htlm-Datei eingebunden).
body {background-color: #FF0000;}
- Die häufigst verwendete Methode ist der Verweis auf eine CSS-Datei. Dazu wird zwischen <head> und </head> folgender Befehl eingefügt: <link rel=”stylesheet” type=”text/css” href=”Name.css” />. Die CSS-Datei ist dabei ein externes Stylesheet in Form einer Textdatei mit der Endung .css.Wichtig ist, dass der Verweis href= auf das richtige Verzeinis weist.
