P, H1, H2, H3, TD, UL {
font-family: Verdana, Arial, sans-serif;
}
In diesem Beispiel sehen Sie, wie Sie mehreren HTML-Tags die gleichen CSS-Anweisungen zuordnen können. Speicherschonend. Nur durch ein Komma abtrennen, wobei nach dem letzten HTML-Tag kein Komma folgt. Dieses Beispiel würde also bewirken, dass allen aufgeführten HTML-Tags (P, H1, H2...) die Schriftart Verdana, Arial oder sans-serif erhalten.
P {
text-align: justify;
font-size: 12pt;
}
P.blau {
font-weight: bold;
color: #0080ff;
}
Wenn Sie also in HTML schreiben: <p>Irgendwas</p>, dann wird alles so dargestellt wie im Style Sheet für <p> definiert. Also wie in der oberen Hälfte des Beispiels. Schreiben Sie jetzt in den HTML-Code: <p class="blau">Etwas anderes</p> dann bleiben allen Anweisung von <p> im Style Sheet erhalten, werden aber durch die Anweisung von P.blau ergänzt.
Sie können auch folgendes machen, wobei das den Vorteil hat, dass Sie jedes HTML-Tag (H1, TD...) mit dem Tag bestücken können.
.blau {
font-weight: bold;
color: #0080ff;
}
Alle Elemente werden in Form von Boxen bzw. Kästen dargestellt. In so einer Box befinden sich noch mehrere (meist) kleinere Kästen, die man einzeln bearbeiten kann und die unterschiedliche Funktionenen haben.
content: Hier befindet sich der eigendliche Inhalt. Meistens ist das Text. Es kann aber auch ein anderes Element sein.
padding: padding (engl. Polsterung) ist normalerweise 0, was bedeutet, dass die sichtbare Box dort aufhört, wo auch der Content aufhört. Das kann unschön aussehen wenn das Element einen farbigen Hintergrund oder einen Rahmen hat. Mehr padding bedeutet also mehr Abstand des Inhalts zum Rand der sichtbaren Box. Siehe padding.
border: Die Breite und Art des Rahmens wird über border festgelegt.
margin: margin vergrößert die Box um eine Art unsichtbaren Puffer. Es hält andere Elemente sozusagen auf Abstand. Siehe margin.
Es gibt zwei Hauptarten von Elementen: block-level-elements und inline-elements. block-level-elements machen eine neue Box auf und rufen einen Zeilenumbruch davor und danach hervor. Typische Vertreter sind H1 und P. inline-elements wie em machen das nicht.