Wir wissen nun, wie man CSS-Dateien anlegt, verlinkt, Styles definiert und kennen den Unterschied zwischen Klassen, ID’s und Types. Nun können wir verschiedene Klassen, ID’s und Types miteinander verbinden. Wozu wir das brauchen? Um die Kriterien einzuschrenken. Bedeutet, dass wir zB. bei fett markiertem Text einer gewissen Klasse eine andere Schriftart, Schriftgröße, Farbe, etc. einfügen können, als sie in der Klasse festgelegt ist. Als Beispiel können wir gleich diese Seite nehmen: die Spalte ganz rechts ist ein und dieselbe Klasse! Nur weiter unterteilt in Überschrift, Link, Maus-over, etc.

Wichtig! Wir können Klassen mit Types, ID’s mit Types und Types mit Types kombinieren. Aber nicht Klassen mit ID’s, Klassen mit Klassen oder ID’s mit ID’s!

Zuerst kommt die Klasse oder ID, zB. “.class”, und danach kommt mit einem Leerzeichen getrennt, der Type (oder die Types), zB. “h1″ - das ganze kann dann so aussehen:

.class h1 strong a:link {..}

Diese Definition würde nur alle Heading 1 der Klasse “class” die fettgeschrieben sind und ein Link sind. Was gibt es jetzt aber für Types, die wir mit ID’s oder Klassen kombinieren können? Folgende Liste soll dabei ein wenig aufklären!

a:link…ein einfacher Link

a:visited…ein besuchter Link (wird oft lila angezeigt)

a:hover…Maus ist auf dem Link (Effekt von Buttons bekannt; Text färbt sich, etc.; hover kommt von “over”)

a:active…Link ist aktiv - sprich es wird draufgeklickt

p…Paragraph - normaler Text (kennen wir aus HTML von <p> und </p>)

a…ähnlich wie p, kennen wir von Links (a:link, auch HTML: <a href=”…”>)

h1…Heading 1

h2…Heading 2 (bis Heading 7 möglich)

strong…fetter Text (bekannt aus HTML -<strong> und </strong>)

em…kursiver Text (auch aus HTML bekannt: <em> und </em>)

blockquote…Einzug nach Rechts (auch aus HTML bekannt - <blockquote>

Bis auf einige Ausnahmen kann jeder Type mit einer Klasse, ID oder einem anderen Type kombiniert werden - es muss aber auch Sinn ergeben. Es kann ein Text also zB. nicht Heading 1 UND Heading 2 haben, oder eine Definition kann nur einen der vier Linktypen haben. Möglich ist es aber, eine Definition für einen mouseover UND visited Link zu erstellen, dafür gibt man “a:visited:hover” an.

Oft kommt es vor, dass man verschiedene Kombinationen braucht, die aber gleich aussehen sollen, oder nur leicht voneinander abweichen. ZB. Links: Oft kommt es vor, dass man nur bei Mouseover (a:hover) eine kleine Veränderung haben will, bei active und visited aber nicht. Definiert man jetzt nur einmal a:link und a:hover, so gestaltet der Browser oftmals selbst fehlende Definitionen - besuchte Links zeigt er gegen deinen Willen lila an und unterstreicht den aktiven (a:active). Deshalb müssen wir ihm sagen, dass wir das nicht so wollen, und - auch wenns von a:link keine Abweichungen gibt - jeden Linktyp einzeln definieren. Programmierer sind aber faule Leute, vor allem Webdesigner, deshalb gibt’s da einen simplen Trick: wir setzen einen Beistrich!

.class a:link, .class a:visited, .class a:active {…}

Diese Definition (in der Klammer) würde jetzt theoretisch jeden Link (außer Mouseover) der Klasse “class” definieren - egal ob besucht, normal oder aktiv.

Diesen Trick können wir auch bei Headings verwenden: Möchte man, dass alle Headings gleich aussehen, nur unterschiedlich groß sind, gibt man folgendes an:

h1, h2, h3, h4, h5, h6, h7 {
color:#f00;
font-family:Arial;
}
h1 {
font-size:26px;
}
h2 {
font-size:20px;
}

usw.

Natürlich kann man diese Methode auch anwenden, um überall andere Farben erscheinen zu lassen!

Das waren einige Anregungen zum kombinieren von CSS-Sheets, im dritten Teil kommen dann noch praktische Tipps & Tricks zu CSS, die selbst Profi-Programmierer nicht immer kennen.