Korrekte Schreibweise in CSS

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?

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

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 diesem Fall kann auch die Abkürzung px entfallen.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

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.

Themenseiten

Startseite CSS-Grundlagen