CSS Eigenschaften

zum Menu

Code und Ergebnis

Color

Mit color kannst du den Text färben.


<p style="color: #FFFF80;"> Ich bin gelber Text, aber auf weißem Hintergrund wird es schwer, mich zu lesen. </p>

Ich bin gelber Text, aber auf weißem Hintergrund wird es schwer, mich zu lesen.

Color mit background - noch mehr Farbe zuweisen

Mit background kannst du dem Hintergrund eine Farbe zuweisen.


<p style="color: #FFFF80; background: #333333;"> Ich bin gelber Text, aber auf weißem Hintergrund wird es schwer, mich zu lesen. Deshalb ändern wir den Hintergrund. </p>

Ich bin gelber Text, aber auf weißem Hintergrund wird es schwer, mich zu lesen. Deshalb ändern wir den Hintergrund.

border

Mit border kannst du einen Rahmen zuweisen. Die Art des Rahmens lässt sich auch bestimmen, dotted, solid, dashed usw. Du kannst auch bestimmen wie dick der Rahmen sein soll und auch die Farbe des Rahmens.


<p style="border: dashed;"> Ich bin ein Element mit einem Rahmen. </p>

<p style="border: dotted;"> Ich bin ein Element mit einem Rahmen. </p>

<p style="border: double;"> Ich bin ein Element mit einem Rahmen. </p>

<p style="border: groove;"> Ich bin ein Element mit einem Rahmen. </p>

<p style="border: solid;"> Ich bin ein Element mit einem Rahmen. </p>

<p style="border: 15px solid #FF86DA;"> Ich bin ein Element mit einem Rahmen. Hier wurden die Eigenschaften des Rahmens in eine kompakte Anweisung gestellt. Zuerst notierst du die Dicke des Rahmens, dann die Rahmenart und dann die Farbe. Alles wird nicht durch Komma, sondern durch Leerzeichen getrennt. Nicht am Ende das Semikolon vergessen. Gewöhn es dir an, immer das Semikolon zu setzen. </p>

Ich bin ein Element mit einem Rahmen.


Ich bin ein Element mit einem Rahmen.


Ich bin ein Element mit einem Rahmen.


Ich bin ein Element mit einem Rahmen.


Ich bin ein Element mit einem Rahmen.


Ich bin ein Element mit einem Rahmen. Hier wurden die Eigenschaften des Rahmens in eine kompakte Anweisung gestellt. Zuerst notierst du die Dicke des Rahmens, dann die Rahmenart und dann die Farbe. Alles wird nicht durch Komma, sondern durch Leerzeichen getrennt. Nicht am Ende das Semikolon vergessen. Gewöhn es dir an, immer das Semikolon zu setzen.


Padding

Mit Padding kannst du einen verschönernden Innenabstand setzen.


<p style="border:15px solid #FF86DA; padding:40px 20px 40px 10px;"> Ich bin dasselbe Element mit zusätzlichem Padding. Die Zahlen schreibst du auch wieder ohne Komma auf. Die erste Zahl ist der Abstand zum oberen Rahmen (40 Pixel). Die zweite Zahl gibt den Abstand an zum rechten Rahmen (20 Pixel). Die dritte Zahl gibt den Abstand an zum unteren Rahmen (40 Pixel), die vierte Zahl ist der Abstand zum linken Rahmen (10 Pixel). Die Abstände notierst du also im Uhrzeigersinn von oben ausgehend. </p>

Ich bin dasselbe Element mit zusätzlichem Padding. Die Zahlen schreibst du auch wieder ohne Komma auf. Die erste Zahl ist der Abstand zum oberen Rahmen (40 Pixel). Die zweite Zahl gibt den Abstand an zum rechten Rahmen (20 Pixel). Die dritte Zahl gibt den Abstand an zum unteren Rahmen (40 Pixel), die vierte Zahl ist der Abstand zum linken Rahmen (10 Pixel). Die Abstände notierst du also im Uhrzeigersinn von oben ausgehend.


Gleichmäßiges Padding

Mit Padding kannst du einen verschönernden Innenabstand setzen.


<p style="border:15px solid #FF86DA; padding:15px;"> Ich bin dasselbe Element mit zusätzlichem Padding. Diesmal ist auf allen Seiten ein Abstand von 15 Pixel, weil nur eine Zahl angegeben wurde. Die wird dann auf alle Seiten angewendet. </p>

Ich bin dasselbe Element mit zusätzlichem Padding. Diesmal ist auf allen Seiten ein Abstand von 15 Pixel, weil nur eine Zahl angegeben wurde. Die wird dann auf alle Seiten angewendet.


Margin - der Außenabstand

Mit Margin kannst du einen Außenabstand setzen.


<p style="border:15px solid #FF86DA; padding:15px; margin:35px;"> Ich bin dasselbe Element mit einem Außenabstand von 35 Pixeln. </p>

Ich bin dasselbe Element mit einem Außenabstand von 35 Pixeln.


Outline - der Außenrahmen

Mit Outline kannst du einen Außenrahmen setzen.


<p style="border:15px solid #FF86DA; padding:15px; margin:35px; outline:15px solid black;"> Ich habe jetzt auch outline in schwarz. </p>

Ich habe jetzt auch outline in schwarz.


Width - die Breite

Mit Width kannst du eine genaue Breite festlegen.


<p style="border:15px solid #FF86DA; padding:15px; margin:35px; outline:15px solid black; width:200px"> Ich habe jetzt eine feste Breite von 200 Pixeln. </p>

Ich habe jetzt eine feste Breite von 200 Pixeln.


Box-Model

Hier siehst du die genauen Maße. Man nennt diese metrische Zuteilung von Platz auf dem Bildschirm das sogenannte Box-Model. Wie du siehst, ist Outline gar nicht notiert. Warum? Wenn du Outline benutzt, hat das keine Auswirkung auf die Breite des Gesamtelementes. Weil es kleiner als Margin ist, ist es im äußeren Rand drinne. Die Zahl 36 bedeutet, dass der Inhalt des Elementes in meinem Browser (Opera) 36 Pixel hoch ist. Jetzt die große Frage: Wie breit und wie hoch ist das Element? Na, 330 Pixel breit und 166 Pixel hoch.

Box-Model unseres Elementes
    © primitivecode.com    CSS ist valide!