Eigentlich kann man auch noch mit einigen HTML Tags wie zB dem <font> Tag seine Texte formatieren. Diesen Tags wächst allerdings schon ein langer weißer Bart und sie sind umständlich was die Umstellung von Layouts angeht. Deshalb ersparen wir sie euch und wenden uns sofort den CSS zu. Die hören sich auf den ersten Blick kompliziert an, sind es aber nicht.
Was sind CSS?
Cascading Style Sheets (äh....toller name, nich?). Na, hauptsächlich sind CSS zum Formatieren von
Texten, Absätzen und Links da. Also quasi das was mit sonst zB auch mit dem <font> Tag macht.
Nur bieten sie sehr viel mehr Möglichkeiten, uuund, was mit sicherheit das beste ist, sie lassen sich
in eine externe Datei auslagern. Damit kann man bei einem Re-Design ganz einfach und auf einmal die
Erscheinung aller zur Website gehörigen Seiten ändern.
ACHTUNG: Jeder Browser stellt CSS unterschiedlich da, prüft auf mehreren Browsern ob's auch wirklich funktioniert.
Schreibweise
Es gibt drei verschiedene Arten auf die CSS eingebunden werden können, aber die schreibweise für die
Attribute, also die Eigenschaften bleibt immer gleich:
Anhand eines Beispiels siehts besser aus:
Einbinden über den <head>
Ihr schreibt zwischen <head></head> (wo auch der title steht) folgendes:
<style type="text/css">
<!--
Anweisung
-->
<style>
</head>
Beispiel:
<style type="text/css">
<!--
body {background-color:#FFFFFF; color:#000000}
A:link {text-decoration:none; color:#E5AC92;}
-->
<style>
</head>
Also: immer erst das html-element (zb hier der Body), dann eine { Schweifklammer, dann die Attribute, getrennt
durch Semikolon und wieder eine } schweifklammer.
Bei dieser Art CSS einzubinden muss der Code auf jeder Seite oben im head stehen. Lohnt sich also
vor allem für php Scripte mit headern und Footern.
Direkt in ein Element einbinden
Ihr könnt auch nur einem Element direkt einen Style verpassen. ZB einem div-Layer. Dann ist die
Schreibweise folgende:
Blahblubb<p> Blahblubb
</div>
sieht so aus:
Blahblubb
Also hier: html-Tag aufmachen, style="Attribute" Tag zumachen. Wenn der Tag wie hier ein div layer ist, dann zB Euren Text schreiben und den container schließen, fertig.
Also anders als bei html werden die Anweisungen nicht mit = sondern mit : geschrieben, und hinter jede anweisung kommt ein semikolon ;
Externe CSS
Externe Stylsheets sind eine praktische Sache weil sie viel Zeit ersparen.
Erstmal erstellt man eine Textdatei. Schreibt eure Stylesheets rein, einfach so wie immer.
Dann benennt ihr die Textdatei um in name.css(dabe ist .css die Dateiendung! Also statt .txt). Meine Styledateien heißen meistens
einfach style.css.
Als nächstes müsst ihr nun auf jeder Seite logischer Weise einen Link zu dieser Datei setzten und zwar in den "head" eures html-Dokuments:
Diese Art CSS zu benutzen eignet sich besonders gut für Frames und Iframes.
Jetzt schwirrt euch sicher der Kopf von den ganzen CSS Begriffen die ich innerhalb dieser Erklärung gebraucht habe.
Deshalb werden wir in der nächsten Lektion ein paar Sachen besonders beleuchten.
Welche drei Arten Style Sheets einzubinden gibt es?
Wie ist die Synthax eines Style Sheets?