Zur Verknüpfung von CSS mit (X)HTML werden primär sogenannte Klassen und IDs verwendent, womit einzelne und Gruppen von Elementen gestaltet werden können.

IDs:
- weist man einem einzigen Element im XHTML-Code zu, es darf nur einmal vorkommen und bestimmt ein Element somit eindeutig (was auch bei Javascript wichtig ist).
- werden im XHTML-Code mit dem Attribut id angegeben.
- im CSS-Code werden sie mit dem Rautezeichen (#) angesteuert.
- Verwendung z.B. für ein DIV, in dem der Footer der Website liegt - dieser kommt nur einmalig vor
Klassen:
- werden bzw. können mehreren Elementen im XHTML-Code zugewiesen werden
- werden im XHTML-Code mit dem Attribut class angegeben.
- im CSS-Code werden sie mit einem Punkt (.) angesteuert
- Verwendung z.B. für Überschriften, eine Überschrift des gleichen Ranges (z.B. h3) kann auf der selben Seite mehrmals vorkommen

Deklarierung

... in (X)HTML als Attribut

<ul id="menueliste">
<li class="menuepunkt">eins</li>
<li class="menuepunkt">zwei</li>
<li class="menuepunkt">drei</li>
<li class="menuepunkt">vier</li>
<li class="menuepunkt">...</li>
</ul>

... in CSS

#menueliste {
/* CSS-Eigenschaften für Elemente mit ID menueliste */
}
 
.menuepunkt {
/* CSS-Eigenschaften für Elemente mit Klasse menuepunkt*/
}

auch möglich:

ul#menueliste {
/* CSS-Eigenschaften */
}
 
li.menuepunkt {
/* CSS-Eigenschaften */
}

Beispiel

p.merksatz {
   font-style: italic;
   border: 4px solid #EE0000;
}
 
 
/* hätte man auch ohne ID-Tag ansteuern können, da h1 ohnehin nur einmal vorkommt */
h1#ueberschrift {
   font-size: 0.9em;
   color: darkred; 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> 
<head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="content-language" content="de" />
   <title>TITEL</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<h1 id="ueberschrift">Merksatz</h1>
<p>Text im Absatz ohne CSS-Formatierung</p>
<p class="merksatz">Das ist ein Merksatz, der per CSS als solcher Formatiert wird. Man sollte ihn nie vergessen.</p>
</body>
</html>

DIV und SPAN

Die beiden HTML-Elemente <div> und <span> haben besondere Bedeutung für Stylesheets. Der Grund ist, dass sie selber eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Unter Verwendung von div oder span ist es also möglich, beliebigen Textabschnitten Klassenstyles zuzuweisen.

11.2.2.2) Klassen & IDs

Deklarierung

... in (X)HTML als Attribut

... in CSS

Beispiel

DIV und SPAN

Links