Formatierung weiterer Elemente mit CSS

Was wir bereits beim BODY erfolgreich angewendet haben, funktioniert zum Teil auch bei den anderen Tags. Die jeweiligen Eigenschaften müssen natürlich zum Charakter des Tags passen. Es ist z.B. klar, dass wir für eine horizontale Linie keine Schriftartentypen festlegen, da wir es ja dabei nicht mit einer Schrift zu tun haben.

Horizontale Linien

Ein paar Veränderungen können wir aber herbeiführen. Zum Beispiel können wir die Farbe der Linie und Ihre Dicke bestimmen. Zusätzlich kann man angeben über welche Breite sich die Linie erstrecken soll. Hier bei empfiehlt sich die angabe in Prozent. Hier die Definition einer Horizontalen Linie in CSS:

Quellcode:

hr {
   width: 95%;
   border-width: 1px;
   color: #008080;

}

Die Eigenschaft "width" kennen wir ja schon vom BODY. Hier wird die Breite des Elements angegeben. Ebenfalls bekannt ist "color". Hier bezieht sich das natürlich auf die Farbe der horizontalen Linie.
"border-width" steht für die Breite der Linie. Border kann man zwar nicht direkt mit "Linie" übersetzen, in HTML steht das Wörtchen aber genau dafür.

Überschriften mit CSS formatieren

Wir haben schon gelernt, dass die Nummer im H-Tag für die Größe und Wichtigkeit der Überschrift steht. <h1> ist also die größte und <h6> demnach die kleinste Überschrift.

Mit CSS können wir aber davon vollkommen unabhängig auch andere Eigenschaften zuweisen. Dabei verwenden wir die uns bereits aus der Body-Foramtierung bekannten Eigenschaften.

Quellcode:

h2 {
   color: #008080;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 25px;
}

h4 {
   color: #008080;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
}

Für die Schriftfarbe, Schriftart und Schrigtgröße der Überschriften haben wir somit spezielle Eigenschaften mit CSS festgelegt.

Zwischenstand des Projektes nach CSS-Formatierung

Natürlich kann man mit CSS noch wesentlich mehr machen. Ich empfehle Euch wie immer etwas mit den Eigenschaften herum zu spielen, damit Ihr das richtige Gefühl dafür entwickelt. Ao sieht meine Projektdatei mittlerweile aus: Zwischenstand. Habt Ihr so weit alles nachvollziehen können?

Nachfolgend noch Mal die gesamte CSS-Datei, die wir bislang erstellt haben:

Quellcode:

body {

width: 1024px;
margin: auto;
margin-top: 50px;
background: #f2f2f2;
color: #4a001a;
font-size: 12px;
font-family: verdana, arial, "Times New Roman";

}

h2 {
   color: #008080;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 25px;
}

h4 {
   color: #008080;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
}

hr {
   width: 95%;
   border-width: 1px;
   color: #008080;

}

Bestimmt habt ihr schon festgestellt, dass die Links in unserem Projekt nicht auf die Farbangaben in den Eigenschaften des BODYs hören. Die <a>-TAGs müssen wir extra definieren. Das machen wir in der nächsten Compiclub-Lektion.
MACHTS NOCH SPAß?

<<< zurück II weiter >>>