HTML-Tutorial von Teach-Soft
Cascading Style Sheets

3
Was sind CSS? Kommentare Klassen und ID's
Kontextformatierungen Gruppierung Farb- und Hintergrundeinstellungen
Schriftformatierungen Texteigenschaften <DIV> und <SPAN>
Inline CSS Internes CSS CSS-Verschachteln
Pseudoklassen Externes CSS Absolute Positionierung
 
 

Teile dieses Textes sind folgenden Quellen entnommen:
msdn.microsoft.com
CNET Builder.com
http://www.w3.org/TR/REC-CSS1

 
Begriffserklärungen

Der HTML-Standard ist nichts endgültiges, sondern er wird ständig erweitert. In der momentanen Version HTML4 sind einige Neuerungen dazugekommen. Durch DOM (Document Object Model) lassen sich jetzt alle Elemente eines Dokumentes als Objekt ansprechen. Jedes Objekt besitzt dabei veränderbare Eigenschaften. Um die Dokumente flexibler zu machen wurde DHTML (Dynamic Hyper Text Markup Language) entwickelt. Dieser Oberbegriff umfaßt  HTML, CSS und Javascript. Cascading Style Sheets (CSS) erlaubt dem Designer von Dokumenten präziseres Arbeiten durch Formatvorlagen. DHTML wird von den gängigen Browsern (V.4) unterstützt. Die Dokumentation zu HTML4 finden Sie unter World Wide Web Consortium (W3C). Eine weitere Neuerung ist XSL (eXtensible Style Language). XSL ist eine Erweiterung die die Änderung ganzer Dokumente und deren Daten ermöglicht.

In diesem Tutorial wird nur CSS behandelt. DOM und andere DHTML-Erweitungen erschließen sich nur bei Verwendung von JavaScript und sind deshalb auch im Javascript-Tutorial zu finden.

 

  
Was sind Cascading Style Sheets?

CSS lassen sich mit Formatvorlagen übersetzen. Das heißt es ist eine Gruppe von Vorlagen die bestimmen wie einige Objekte auf einer Webseite aussehen. Also deren Farbe, Schrift, Position, usw. Wie bei Formatvorlagen üblich ändert dann eine Änderung der Formatvorlage alle betroffenen Objekte des Dokumentes (z.B. die Überschriften) automatisch. CSS können auch als eigene Datei abgespeichert und in mehrere Dokumente eingebunden werden. Nähere Informationen finden sich in der CSS-Referenz.

Grundsätzlich können alle HTML-Tags (Befehle) mit CSS verwendet werden.

 

 

  
Inline-CSS

Im einfachsten Fall schreibt man die gewünschten CSS-Befehle direkt in das zu formatierende HTML-Objekt:

Inline-CSS
<html><head></head><body>

<b style="color:#ff9900;">
Das ist einfach nur ein Text!</b>

</body></html>		 Jede Inline-CSS  hat den Aufbau style="" .  In den Anführungszeichen stehen dann die jeweiligen CSS-Befehle.
 

 

 

Inline-CSS formatiert ein HTML-Objekt direkt.
Inline-CSS 2

Nachfolgende HTML-Objekte werden durch Inline-CSS nicht verändert.

Inline-CSS2
<html><head></head><body>

<b style="color:#ff9900;">Das ist einfach nur ein Text!</b>
<p>
<b>Dieser Text bleibt schwarz!</b>

</body></html>		  

Ein Übersicht über die wichtigsten CSS-Befehle finden Sie hier.

Übung 3.1
Fügen Sie andere HTML-Befehle, wie <p>,<h1>,<table>,<a href...> usw., ein und formatieren Sie diese mit Inline-CSS.

 

 
Internes CSS
Soll die CSS-Formatierungen für alle HTML-Objekte des gleichen Typs im gesamten Dokument gelten muss sie im <head> notiert werden.
 
Internes CSS
<html><head>
<style>
b{color:#ff9900; font-style: italic;}
</style>
</head><body>
<b>Das ist einfach nur ein Text!</b>
<p>
<b>Dieser Text bleibt nicht mehr schwarz!</b>
</body></html>
<style> beginnt eine CSS-Formatierung dir durch </style> beendet werden muss.

b{color:#ff9900; font-style: italic;}
Das b bezieht sich auf den HTML-Befehl b (bold). Dieser erhält jetzt standardmäßig die Schriftfarbe #ff9900 und kursiv zugewiesen.
 

Sauber angewendet müsste <STYLE type="text/css"> geschrieben werden. Die neuen Browserversionen verstehen aber auch nur <style>.

Übung 3.2
Ändern Sie den Buchstabenabstand des HTML-Tags b auf 3 Punkt.

 

Internes CSS formatiert ein ganzes Dokument.
CSS-Verschachteln

Wie kann man einen b-Tag anders formatieren als die anderen? Dazu setzt man wieder Inline-CSS ein. Es wird dann immer die zuletzt angewandte Formatierung vom Browser berücksichtigt.

CSS-Verschachteln
<html><head>
<style>
b{color:#ff9900;}
</style>
</head><body>
<b>Das ist einfach nur ein Text!</b>
<p>
<b style="color:#0000ff;">Dieser Text ist anders!</b>
</body>
</html>		  

 

Übung 3.3
Probieren Sie die CSS-Verschachtelung an anderen HTML-Objekten aus.


 

Die letzte CSS-Formatierung gilt!
Externes CSS

Durch externes CSS können nicht nur einzelne Dokumente, sondern ein komplette Website gleich formatiert werden. Dazu wird die CSS-Formatierung in einer eigenen CSS-Datei gespeichert und durch
<link rel="stylesheet" type="text/css" href="format1.css"> eingebunden.

Format1.css
h1, h2, h3, h4, h5 { color: green }
body { background-color: #00cccc; font-family:Tahoma }
p { line-height: 200% }
.rot { color: red }
.gruen { color: green }
.blau { color: blue }
#big { font-size: 120% }
#upper { text-transform: uppercase }		 Speichern Sie diese CSS als eigene Datei unter dem Namen format1.css ab.

 

Externes CSS
<html>
<head>
<link rel="stylesheet" type="text/css" href="format1.css">

</HEAD><BODY>
<p>
<table>
<tr><td>normal</td></tr>
<tr><td class="blau">Dieser Text wird blau!</b></td></tr>
</table>
</BODY></html> 

Durch <link...> wird die CSS-Datei format1.css eingebunden.
 

Die Formatvorlage format1.css kann jetzt in mehrere Webdokumente eingebunden werden. Eine Änderung an der Formatvorlage ändert dann das Erscheinungsbild aller dieser Dokumente. Dabei ist zu beachten, dass es eine Reihenfolge der Interpretationen gibt. Näheres dazu bei W3C. Der CSS-Import ist für ein effizientes WebDesign heute nicht mehr wegzudenken. Dadurch wird ein gleichbleibendes Design aller Seiten einer Homepage erreicht. Design-Änderungen brauchen nur an einer Stelle vorgenommen zu werden und wirken sich dann auf alle zugehörigen Seiten aus.
 

Übung 3.4
Erstelle ein weiteres Dokument in dem format1.css eingebunden ist. Ändere dann format1.css und beobachte die Auswirkungen in den anderen Dokumenten.

 

 

Externe CSS gelten für eine gesamte Website.
Kommentare in CSS
Durch /* Bemerkung */ werden Kommentare ausgeklammert. Diese werden dann vom Browser ignoriert.


 
Klassen und ID's
Um einem HTML-Tag abwechselnd verschiedene Formatvorlagen zuzuweisen können zwei Methoden verwendet werden. Durch .gruen { color: #00ff00 } wird eine neue Klasse (class) mit dem Namen gruen erzeugt. Durch <td class="gruen">Dieser Text wird grün!</td> kann diese Klasse dann zugewiesen werden.  

Mittels #fett { font-weight: bolder; color: #0000ff } wird eine ID fett erstellt die dann durch <td id="fett">Dieser Text wird blau und fett!</td> verwendet wird.
CSS2
<html><head><title>css2.htm</title>
<STYLE type="text/css">
 .gruen { color: #00ff00 } 
 .gelb { color:yellow }
 #fett { font-weight: bolder; color: #0000ff } 
</STYLE>
</HEAD><BODY>
<table>
<tr><td class="gruen">Dieser Text wird grün!</td></tr>
<tr><td class="gelb">Dieser Text wird gelb!</td></tr>
<tr><td id="fett">Dieser Text wird blau und fett!</td></tr>
</table>
</BODY> </HTML> 

class gruen durch .
class gelb durch .
ID fett durch #

 

Übung 3.5
Ergänze CSS2 um eine Klasse blau und wende diese an.

 

 
Schriftformatierungen

Folgende Eigenschaften sind für Schriftformatierungen vorhanden:
font-family Schrifttyp
font-style (normal | italic | oblique) 
font-variant (normal | small-caps)  Variation mit kleineren Buchstaben.
font-weight (normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900)
font-size Schriftgröße in in Punkt (12pt), in em (1.5em) oder relativ (larger). 
font Version für die Kurzschreibweise: P { font: 12pt/14pt sans-serif }


 
Kontextformatierungen

td b {color: blue} erstellt eine Formatierung die nur im Zusammenhang beider HTML-Tags verwendet wird.

CSS3
<html>
<head>
<title>css3.htm</title>
<STYLE type="text/css">
<!--
 td b {color: blue} 
--></STYLE>
</HEAD><BODY>
<table>
<tr><td>normal</td></tr>
<tr><td><b>Dieser Text wird blau!</b></td></tr>
</table>
</BODY></html> 










Nur hier gilt die Formatierung.
 

 
Gruppierung
Es können auch gleich mehrere HTML-Tags formatiert werden:
 h1, h2, td, b {
                  font-family: Arial;
                  color: blue;
                  }

 
Pseudoklassen
Um Objekteigenschaften zu verwenden die nicht in HTML aber im Browser vorhanden sind, lassen sich Pseudoklassen schreiben. HTML kennt die Anchor-Eigenschaften link, visited und active nicht, obwohl diese im Browser vorhanden sind.
CSS4
<html>
<head>
<title>css4.htm</title>
<STYLE type="text/css">
A:link {color: red; text-decoration:none;}
A:visited {color: green; text-decoration:none;}
A:active {color: yellow; text-decoration:none;}
A:hover {color: blue; text-decoration:none;}
</STYLE>
</HEAD><BODY>
<p>
<a href="css4.htm">ein Link</a>
</BODY></html> 


A:hover wird für Mouseover-Effekte verwendet. 
 
Dieser Link verwendet die oben eingestellten Farben und Unterstreichen wurde ausgeschaltet.

 

 
Absolute Positionierung
Mittels CSS ist es endlich möglich geworden Objekte auf einer Webseite pixelgenau zu plazieren. Manche Trickserei mit Tabellen und Leergif's wird dadurch überflüssig.
 
CSS6
<html>
<head>
<title>css6.htm</title>
</HEAD><BODY>
<p style="position: absolute; top: 150px; left:200; width: 200px; height:200px">
Absolut Positionierter Absatz.</p> 
</BODY></html> 		 Inline-CSS ist die Formatierung für nur einmaliges Auftreten.
 
Hier wird Inline-CSS verwendet da nur ein Absatz positioniert werden soll. 
px kann weggelassen werden.

px ist die Abkürzung für Pixel.

TIP: In Javascript liefert der MS-Internet-Explorer immer Werte mit px. Diese müssen z.B. erst mit parseInt(objekt.style.left) umgewandelt werden.

CSS7
<html>
<head>
<title>css7.htm</title>
</HEAD><BODY>

<DIV style="position: absolute; top: 100; left:100; width: 200; height: 100; background-color: yellow; font-family:Tahoma">
Praktisch, so ein positionierbarer Container!
</DIV> 

</BODY></html> 




Inline-CSS mit dem Container-Objekt div.

 
<DIV> und <SPAN>
<DIV> und <SPAN> sind Container-Objekte. Sie können u.a. Text und Bilder zu einer veränderbaren Einheit gruppieren. Container-Objekte können auch übereinander gelegt werden. Dabei entscheidet die Eigenschaft z-index darüber welches Objekt (1 = ganz hinten) zu oberst liegt. <DIV> erzeugt im Gegensatz zu <SPAN> einen Rand um das Objekt. 
 
Übung 3.6
Erstelle ein eigenes Dokument mit zwei <div>-Objekten. Einem Text und einem Bild. Lege diese übereinander und verändere die  z-index-Werte. 

 


 
Farb- und Hintergrundeinstellungen

Die Vordergrundfarbe und die Hintergrundfarbe bzw. das Hintergrundbild können durch diese Eigenschaften editiert werden. Diese Eigenschaften sind bei den Browsern sehr unterschiedlich und unvollständig implementiert.
color Vordergrundfarbe  (rgb(255,0,0) | red | #ff0000)
background-color (<color> wie oben | transparent) 
background-image (<url> | none) Beispiel: BODY { background-image: url(marble.gif) }
background-repeat (repeat | repeat-x | repeat-y | no-repeat) Wiederholungen Hintergrundgrafik einstellen.
background-attachment (scroll | fixed) Hintergrundgrafik  fixieren.
background-position (<percentage> | <length>]{1,2} | [top | center | bottom] || [left | center | right]) Position der Hintergrundgrafik. Angabe in % oder cm.

Beispiel
 

Übung 3.7
Erstelle ein neues Dokument mit einer Hintergrundgrafik die nur senkrecht wiederholt wird. (Nur im IE möglich.) 



 
Texteigenschaften

Diese Eigenschaften sind bei den Browsern sehr unterschiedlich und unvollständig implementiert.
word-spacing (normal | <length>) Wortabstand (Einheit = pt).
letter-spacing (normal | <length>) Buchstabenabstand
text-decoration (none | [ underline || overline || line-through || blink ]) 
vertical-align (baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage>)  Vertikale Textposition.
text-transform (capitalize | uppercase | lowercase | none)
text-align (<length> | <percentage>) Einrückung vor der 1.Zeile.
line-height (normal | <number> | <length> | <percentage>) Zeilenabstand.

Beispiel
 

Übung 3.8
Erstelle ein neues Dokument in dem sämtlicher Text einen Buchstabenabstand von 15pt hat. (Nur im IE möglich.) 

Die Eigenschaften des Objektbereiches (Boxproperties) und andere Eigenschaften, sowie die Maßeinheiten finden Sie bei W3C.

Übung 3.9
Suche im Internet die CSS-Spezifikation von W3C. Suche die Boxproperties und erstelle ein Dokument mit verschiedenen Rahmen um die einzelnen Objekte. 

 

Übung 3.10
Ändere deine Homepage aus dem Kapitel Anfänger auf die Verwendung von CSS. Es sollte in jeder Seite importiert werden.

 

 
Zusammenfassung

CSS bietet weit über HTML hinausgehende Formatierungsmöglichkeiten, insbesondere durch die Einbindung externer CSS-Dateien.


Es gibt drei Verwendungsmöglichkeiten für CSS:

1) Inline-CSS innerhalb eines HTML-Tags. Gilt nur für diesen eine Befehl. Beispiel: <p style="position: absolute; top: 150px; left:200;">Ein Absatz</p> 
2) Interne CSS Innerhalb eines HTML-Dokumentes. Gilt für alle betroffenen HTML-Tags in diesem Dokument.  Beispiel: <STYLE type="text/css">
<!--
 p{ color: #00ff00 } 
  -->
</STYLE>
3) Externe CSS-Datei. Gilt für alle Dokumente der Website in die die CSS-Datei eingebunden wird. Beispiel: <link rel="stylesheet" type="text/css" href="format1.css">