CSS - kurze Kurz-Einführung
Cascading-Style-Sheets sind eine Ergänzung zu HTML und erlauben die schnelle Formatierung unter anderem folgender Elemente
  • Text
  • Hyperlinks
  • Formularelemente
  • Mauszeiger
  • Rahmen
  • Hintergrund
  • Randabstände
  • Positionierungen

Es kann dies im wesentlichen

  • im Bodybereich des Dokuments für einzelne Elemente oder Bereiche
  • im Headbereich für das ganze Dokument
  • Klassen (im Head- und Bodybereich)
  • extern für mehrere Dokumente
Im Bodybereich - einzelne Elemente, z.B. ein Absatz, oder eine Überschrift

<p style="color : red">Text</p>

<h1 style="color : #0000ff">Überschrift</h1>

Text

Überschrift
Im Bodybereich - einzelne Bereiche <span></span>, oder Tabellen <table></table>
<span style="color : green; font-weight: 500">Text<br>

<table style="color : red; font-weight: 800" width="100%" border="1" cellspacing="2" cellpadding="2" align="center">
<tr>
<td width="50%">text</td>
<td width="50%">text</td>
</tr>
<tr>
<td width="50%">text</td>
<td width="50%">text</td>
</tr>
</table>
Text
</span>		 Text
text text
text text
Text
Im Headbereich für das ganze Dokument
<style type="text/css">

body        { font-family:Verdana,Arial,sans-serif; font-size:12pt }

</style>
Klassen - definiert im Headbereich,
<style type="text/css">
body { font-family:Verdana,Arial; font-size:12pt }
.xx { color: blue ; font-weight: 600 }
.yy { color: red ; background-color: lightgreen }
</style>
angewandt im Bodybereich

<p class="xx">
zum Beipiel ein Absatz - zum Beipiel ein Absatz
</p>

<p class="yy">
noch ein Beipiel noch ein Absatz - noch ein Beipiel noch ein Absatz
</p>

zum Beipiel ein Absatz - zum Beipiel ein Absatz

noch ein Beipiel noch ein Absatz - noch ein Beipiel noch ein Absatz
Mit externem Style Sheet, - eine Zeile in den Headbereich des jeweiligen Dokuments
<link rel="stylesheet" type="text/css" href="mein_stil.css">
- das Style Sheet mit Endung .css abgespeichert

body { font-family:Verdana,Arial,sans-serif; font-size:12pt }
.....usw.....

Eine Gegenüberstellung HTML - CSS
HTML CSS
font color="" color :
font face="" font-family :
font size="" font-size :
I font-style: italic
U text-decoration: underline
B font-weight : bold
S text-decoration: line-through
bgcolor="" body { background-color : }
background="bild.gif" body { background-image : }
text="" body { color : }
link="" a:link { }
vlink="" a:visited { }
alink="" a:active { }
UL type="" list-style-type :
OL type="" list-style-type :
P align="" text-align :