Formate definieren
in CSS · Autor: Sebastian Fuchs
Bei der Erstellung von Webseiten mit HTML kann CSS sehr nützlich sein.Zum einen lassen sich so gut wie alle Elemente formatieren, zum anderen ist es aber auch von großem Vorteil, wenn man die meisten Formatierungen zentral, d.h. in einer einzigen Datei definiert. So werden zum Beispiel kleine Farbänderungen direkt für alle deine Seiten übernommen.
Beginnen wir zunächst damit, zentrale Formate für unsere Seite zu definieren. Dazu erstellen wir entweder eine neue Datei, die wir später mit der Endung ".css" abspeichern, oder wir schreiben diese wie schon im "Stylesheets in HTML einbinden"-Tutorial gezeigt in den <head>-Bereich des jeweiligen Dokuments.
body {
text-align: left;
font-size: 13px;
font-family: "Verdana", sans-serif;
color: #FFFFFF;
}
In diesem Beispiel wurden die Eigenschaften des Textes für den <body>-Bereich der Seite festgelegt: Die Ausrichtung des Textes ist linksbündig, die Schriftgröße beträgt 13 Pixel, als Schriftart wurde Verdana benutzt und als Schriftfarbe weiß (#FFFFFF).text-align: left;
font-size: 13px;
font-family: "Verdana", sans-serif;
color: #FFFFFF;
}
Solche Formatierungen lassen sich auch auf diverse HTML-Tags anwenden. Einige Beispiele wären a für Links, table für Tabellen oder ul für Listen. Diese Tags werden jeweils vor die geschweifte Klammer geschrieben, in der dann die jeweiligen Attribute definiert werden können.
Hier ein kleines Beispiel:
td {
border: 1px solid #000000;
}
Das Beispiel würde bewirken, dass alle Tabellenspalten des Dokuments einen 1px breiten, schwarzen Rahmen erhalten.border: 1px solid #000000;
}
Solche Formatierungen können wir jetzt auch noch spezifizieren um es auf einzelne Elemente der Seite anzuwenden.
Dazu gibt es die sogenannten Klassen und IDs, welche einzelnen Elementen zugewiesen werden können.
Klasse (mit "."):
.fetter_Text {
font-family: "Arial", sans-serif;
font-weight: bold;
}
ID (mit "#"):
#spezielle_Tabelle {
width: 700px;
border: 1px solid #8ba9c8;
background-color: #FF0000;
color: #000000;
padding: 10px;
font-family: "Courier New", serif;
}
In dem Beispiel wurde einmal eine Klasse, die man an einem Punkt (".") vor dem Namen erkennt, und eine ID, die man an der Raute ("#") erkennt, erstellt..fetter_Text {
font-family: "Arial", sans-serif;
font-weight: bold;
}
ID (mit "#"):
#spezielle_Tabelle {
width: 700px;
border: 1px solid #8ba9c8;
background-color: #FF0000;
color: #000000;
padding: 10px;
font-family: "Courier New", serif;
}
Die Klassen und IDs selbst können beliebig benannt werden, nur auf Umlaute und Sonderzeichen muss verzichtet werden.
In unserem Beispiel wurde festgelegt, wie sich der Text verändert, wenn als Klasse "fetter_Text" angegeben wird.
Danach wurde eine ID definiert (hier "spezielle_Tabelle") mit Angaben wie Rahmen, Innenabstand, Textfarbe, Hintergrundfarbe usw. aussehen sollen.
Im Prinzip ist kein sehr großer Unterschied zwischen einer Klasse und einer ID, doch Klassen werden eher erstellt, wenn sie oft benutzt werden; IDs eher wenn sie nur einmal im Dokument gebraucht werden. IDs stehen in der "Hierarchie der Formatierungen" nämlich weiter oben als Klassen und dürfen pro Dokument nur einmal angewendet werden.
Mit diesen beiden Optionen haben wir die Möglichkeit, individuelle Formate zu definieren, die wir dann in unserem Dokument anwenden können. Dies geht wie folgt:
<span class="fetter_Text">Dies ist der Text der mit den von uns definierten Formaten ausgegeben wird</span>
oder
<table id="spezielle_Tabelle">
[...]
</table>
Es gibt aber auch die Möglichkeit, Elemente direkt im HTML Dokument zu Formatieren (siehe auch unter "Stylesheets in HTML einbinden").oder
<table id="spezielle_Tabelle">
[...]
</table>
Dazu geben wir diesmal bei dem Element nicht eine Klasse oder ID an, sondern direkt unsere Formate. Es wird das Attribut style="" verwendet.
<p style="font-family: Arial; color: #FFFFFF; font-size: 11px;">Unser Text</p>
Die Angaben innerhalb der Anführungsstriche sind ganz normale CSS Attribute, die durch ein ";" voneinander abgetrennt werden.
· zurück zu "CSS Tutorials"
