Korrekte CSS-Schreibweise

Richtige Angabe von Befehle und vor allem Abstände

Die Vorteile von CSS sind besprochen, die problematische Nachteile, wenn man CSS direkt beim HTML-Code hinzufügt und damit nicht systematisch bearbeiten kann, auch und die ehemals so dringend benötigten Hacks sind besprochen worden. Dazu ist nun klar, dass man CSS optimalerweise in einer eigenen Datei bearbeitet und bei großen Projekten diese auch auf mehrere aufteilen kann.

Es gilt nun als letzten Schritt der theoretischen Vorbereitung zu definieren, wie man mit CSS arbeiten soll und das betrifft die Schreibweise der Befehle sowie der Angaben. Besonders bei den Abständen kann man verschiedene Angaben wählen, was aber auch zu einer Fehlerquelle werden kann.

Wie formuliert man in CSS korrekt?

CSS kann wie folgt notiert werden:

margin: 0;
margin: 0px 20px 20px 0px;
color: #0000ff;
font-size: 14px;
width: 100%;

All diese Beispiele zeigen, dass als erstes der CSS-Befehl angeführt wird. Dieser wird durch einen Doppelpunkt abgeschlossen und dann folgen die Werte, wobei es je nach Befehl und Einsatzmöglichkeiten verschiedene Varianten geben kann. So steht in der ersten Zeile, dass der Abstand 0 Pixel groß ist und das gilt für alle Positionsangaben.

Was heißt Positionsangaben?

Ein Feld, eine Ebene wird mit oben-rechts-unten-links definiert und zwar immer in dieser Reihenfolge. Steht nun 0 alleine da, bedeutet dies, dass der Abstand nach allen vier Himmelsrichtungen ebenfalls bei 0 steht. Man hätte auch jede Richtung anführen können, aber die eine Zahl reicht, wenn der Abstand stets der gleiche ist.

In der zweiten Zeile sind die Abstände für oben und links auf 0 Pixel gesetzt, rechts und unten haben einen Abstand von 20 Pixel zugewiesen bekommen. Entscheidend ist dabei, dass im Gegensatz zur ersten Zeile der Zusatz "px" für Pixel erforderlich ist, damit die Einstellung richtig übernommen werden kann.

Die dritte Zeile weist eine Farbe zu, hier wird der Farbwert mit "#" eingeleitet, der typischen Schreibweise von Farbwerten. Schließlich gibt es noch eine Einstellung für die Größe des Zeichensatzes und eine Prozentangabe für die Breite. Welches Element nun diese Breite haben soll, spielt aktuell keine Rolle, es hätte eine Spalte (div-container) oder ein Absatz (p-tag) sein können.

Aufbau und Schreibweise

Zu beachten ist auch, dass man auf zweierlei Weise arbeiten kann.

Methode 1:

.text { margin: 20px; color:#0000ff; }

Methode 2:

.text {
margin: 20px;
color:#0000ff;
}

Man sieht hier, dass nach einem Element - in diesem Fall eine Ebene namens text, die durch den Punkt definiert ist, mit den Klammern { } die Angaben umschlossen sind. Man kann aber wie in Methode 1 in einer Zeile schreiben oder wie in Methode 2 Zeile für Zeile für eine Einstellung nutzen. Besser lesbar ist Methode 2, platzsparender ist Methode 1.

Platzsparend heißt auch, dass die CSS-Datei kleiner ist und die Seite schneller geladen wird. Es ist Geschmackssache, wie man arbeitet - zu Beginn sollte man eher Methode 2 wählen, ehe man mit Methode 1 kürzt und die Datei schlanker macht, ohne auf einen Befehl verzichten zu müssen.

Was ist noch wichtig?

Die zentralen Elemente neben Absatz (P) und Schriftart sind die ID´s und die Klassen. Eine ID kann nur einmal vergeben werden und wird mit #name definiert. Eine Klasse kann oft vergeben werden und wird mit den Punkt definiert.

.text ist eine Klasse
#text ist eine ID

Für CSS ist das egal, aber auf der Seite darf man nur einmal die ID verwenden, kann aber in vielen Absätzen auf eine Klasse zurückgreifen.

Lesen Sie auch

Der CSS-Einstieg gelingt recht einfach, weil die Formatierungen der verschiedenen Seitenelemente auch recht einfach erfolgen können. Man braucht aber Disziplin, dass man immer auf gleiche Art und Weise arbeitet und nicht einmal in der CSS-Datei Abstände eingibt und einmal direkt beim Inhalt. Und man braucht eine einheitliche Art, mit CSS zu arbeiten.

In den ersten Jahren der CSS-Verbreitung brauchte es sogar Tricks wie den CSS-Hack, damit der Internet Explorer auch verstehen konnte, was man eigentlich von ihm will.

Davon abgesehen muss man wissen, wie und wo man die CSS-Definitionen einbauen kann, warum des Vorteile bringt, CSS extern zu betreiben und wie die richtige Schreibweise zu erfolgen hat.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel