Bei einer aufwendig aufgebauten HTML-Site kann es oft passieren, dass sie aufgrund von unterschiedlichen Formatierungen unübersichtlich wird. Um das ganze ein wenig zu erleichtern gibt es CSS (Cascading Stylesheets).
Genau gesagt es es eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente.
Zum Beispiel kann man mit CSS bestimmen, dass die Überschrift erster Ordung (h1) mit eine Schriftgröße von 16px, mit der Schriftart Verdana aber nicht fett erscheinen soll. All diese Angaben sind in einer reinen HTML-Datein nicht möglich.
GRUNDSÄTZLICHES:
Man kann die Formate prinzipiell auf zwei verschiedene Arten definieren: einerseits direkt in der HTML-Datei, anderereits in einer seperaten CSS-Datei.
Bei der Version in der HTML-Datei sieht das ganze dann so aus:
----------------------
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
/* ..........Hier werden dann die Formate definiert .....*/
-->
</style>
</head>
<body>
</body>
</html>
----------------------
Die Formate werden genau wie in der CSS-Datei (siehe unten) definiert.
Meiner Meinung nach ist diese Version allerdings nicht unbedingt die beste Lösung (kommt natürlich auf den persönlichen Nutzungszweck an) denn man muss hier bei Änderungen jede einzelne Datei ändern.
Bei der Version in einer seperaten CSS-Datei sieht die HTML-Datei so aus:
----------------------
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
</body>
</html>
----------------------
bei dieser Variante hat man den Vorteil, dass alle Dateien nach den selben Formaten definiert sind (was bei den meisten Websites ja erwünscht ist). Falls man allerdings eine Seite spezifisch ändern möchte, kann man das wie folgt tun:
----------------------
<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
/* ...... hier sind datei-spezifische Formate erlaubt... */
-->
</style>
</head>
<body>
</body>
</html>
----------------------
nachdem man in der HTML-Datei auf eine spezifische CSS-Datei verwiesen hat muss man diese auch erstellen. Das ganze am besten im Editor schreiben und einfach als "irgendwas.css" speichern.
Die Datei könnte zum beispiel so aussehen:
----------------------
h1, h2, h3, h4, p, div, td { font-family:verdana,arial }
p, div, td { font-size: 12px }
a:link { font-family:verdana,arial; font-size=11px; color:#CA7927; text-decoration: none; font-weight: none}
a:link:visited { font-family:verdana,arial; font-size=11px; color:#CA7927; text-decoration: none; font-weight: none}
a:link:active { font-family:verdana,arial; font-size=11px; color:#CA7927; text-decoration: underline overline; font-weight: none}
a:link:hover{font-family:verdana,arial; font-size=11px; color:#CA7927; text-decoration: underline overline; font-weight: none}
----------------------
Das Ganze sieht jetzt auf den ersten Blick wahnsinnig kompliziert aus, allerdings ist es das nicht. Das verwirrendste ist wohl für jeden Anfänger(genau wie bei HTML) die unglaubliche Vielzahl an Möglichkeiten. Aber diese anfängliche Unsicherheit verschwindet schnell,glaubt mir!
Das wichtigste ist: einfach ausprobieren!
Das erste Beispiel ist für den Anfang vielleicht ein wenig zu kompliziert, also hier erst einmal etwas ganz einfaches:
----------------------
body {background-color:#003F00;}
h1,h2,h3,h4,p,td,div {font-family:Verdana, Arial; }
h1 { font-size:20px;}
h2 { font-size:18px;}
h3 { font-size:16px;}
h4 { font-size:14px;}
p,td,div { font-size:12px; color:#BFBFBF;}
----------------------
dazu eine kurze Erklärung:
Wie man hier gut erkennen kann, ist es durchaus möglich, verschiedenen Elementen unterschiedliche Eigenschaften zuzuweisen.
In dem obigen Beispiel werden h1 folgende Eigenschaften zugewiesen:
es ist die Schrift Verdana zu verwenden, falls diese nicht vorhanden ist, kann auch Arial verwendet werden
die Schriftgröße ist 20px
Es ist also möglich sowohl jedem Element einzeln die Formate zuzuweisen (siehe zB in der 3ten Zeile im Beispiel), allerdings kann man auch mehreren Elementen die selben Formate zuweisen (siehe zB in der 2ten Zeile im Beispiel).
Was ich euch hauptsächlich raten kann, ist einfach alles auszuprobieren. Die Möglichkeiten, die CSS bietet sind einfach viel zu umfangreich um sie hier alle aufzulisten.
Ich hoffe meine kleinen Erklärungen haben euch weiter geholfen!
mfG