Hilfreiche Tipps im Bereich CSS

CSS gehört heutzutage schon mit in jede gut geführte Webseite. Durch das Einbinden dieser Codesprache ist es sehr einfach große Webseiten wie zum Beispiel auf einer Community schnell Änderungen durchzuführen, welche auf sämtlichen Unterseiten sichtbar sind, sofern die ID bzw. CSS definierte Klasse (class) des Elements auf der Seite zu sehen ist.

Dies ist natürlich sehr nützlich, da sonst sehr viele Seiten zu überarbeiten wären.

Einige wichtige Befehle zeige ich euch hier.

padding:11px 12px 13px 14px;

Padding bewirkt das ein Element innerhalb eines Containers verschoben wird.
In diesem Beispiel hat das Element mehr Platz In folgenden Richtungen: 11 Pixel Oben, 12 Pixel rechts, 13 Pixel unten und 14 Pixel links.
Geschrieben wird es immer im Uhrzeigersinn beginnend von oben an.

Es kann auch, falls es identisch sein sollte, nach oben und unten vergeben werden (in dem Beispiel 14px) und nach links und rechts (in diesem Beispiel 10px).
Dies sieht dann wie folgt aus:

padding:14px 10px;

Alternativ kann auch nur eine einzige Richtung angegeben werden wie zum Beispiel:

padding-top:11px;

padding-right:12px;

padding-bottom:13px;

padding-left:14px;

Hier ein Beispiel dafür:

Zur besseren Verdeutlichung habe ich einen Rahmen um das Element gesetzt.

So wurde der Text ohne dass padding aussehen.

Ein weiteres nützliches Element nennt sich margin.
Es wird genauso wie padding geschrieben nur das anstatt padding margin steht.
Dieses Element bewirkt, dass der Container anstatt Innenabstand den gewünschten Außenabstand bekommt.

margin:11px 12px 13px 14px;

Hier ein Beispiel dafür:

Zur besseren Verdeutlichung habe ich einen Rahmen um das Element und darüber und darunter einen dunklen Balken eingefügt.

So wurde der Text ohne dass margin aussehen.

Weitere schöne Begriffe sind witdh und height.
Durch diese Deklaration wird dem Element eine feste Höhe und Breite gegeben.
Wird die height weggelassen erhält das Element automatisch die Funktion height:auto; .
Dies bewirkt das der Text innerhalb dieses Elements das Element in der Höhe mit wachsen lässt.
Geschrieben wird es folgendermaßen:

height:11px;

width:11px;