In diesem Tutorial wird erklärt wie man mit CSS seine Seite verbessern kann, und zwar ohne aufwendiges Anwenden von HTML. Es wird nur die body-Funktion von CSS erklärt, wie man also allgemein seine Seite modifiziert.
Zu erst muss natürlich eine Datei erstellt werden, ich nenne sie styles.css – wobei styles umbenannt werden kann, .css muss bleiben.
Jetzt kann’s auch schon losgehen, wie oben bereits gesagt wird nur die body-Funktion erklärt bzw. gezeigt:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
font-weight: normal;
letter-spacing: 5pt;
font-style: normal;
color: #000;
background: #fff;
}
font-family:
Mit font-family wird die Standard Schriftart bestimmt, es werden immer mehrere Schriftarten angegeben, der Browser probiert nämlich alle durch, und wählt die erste die am Computer installiert ist.
Es kann auch:
Times New Roman, Times, serif
Verdana, Arial, Helvetica, sans-serif
- usw. – angegeben werden.
font-size:
Mit font-size wird natürlich die Schriftgröße bestimmt. Es kann in px, pt, em, usw. angegeben werden. Wenn man em verwendet, kann man die Größe genauer einstellen, außerdem muss man kleinere Werte angeben.
Im Beispiel oben ist 11px angegeben, 11 kann natürlich beliebig verändert werden.
text-align:
Mit text-align wird bestimmt wie der Text ausgerichtet sein soll, es kann auch center, justify, right eingesetzt werden.
font-weight:
Mit font-weight wird die Dicke der Schrift bestimmt, es kann bold, bolder statt normal eingesetzt werden. Was normal bedeutet muss, glaube ich, nicht erklärt werden.
letter-spacing:
Mit letter-spacing wird der Abstand der Buchstaben/Zeichen voneinander bestimmt, je größer der Wert, desto größer der Abstand.
font-style:
Mit font-style wird die Art der Schrift bestimmt, sie kann z.B. kursiv (italic) gemacht werden.
color:
Mit color wird die Farbe der Schrift bestimmt. #000 steht für schwarz, 000 kann mit jedem beliebigen Farbcode ersetzt werden. # muss davor stehen! Zahlen die aus 6 gleichen Zahlen/Buchstaben bestehen können abgekürzt werden: #000000 = #000
background:
Mit background wird die Hintergrundfarbe bestimmt. #fff kann durch jeden Farbcode ersetzt werden (siehe color).
Das ganze kann natürlich beliebig durch weitere Funktionen erweitert werden, es kann auch etwas weggenommen werden, wie z.B. letter-spacing - da dies eine nicht allzu übliche Funktion ist.
Diese Text/Schrift-Funktionen gelten allgemein für CSS, sind also nicht nur für die body-Funktion bestimmt.
Und wie verbindet man den HTML Code nun mit dem CSS Code?
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
Diesen Code musst du in den HEAD Bereich des HTML Dokuments einbauen. Der Rest geht automatisch.
Das war’s auch schon, wenn du mehr wissen willst:
http://css4you.de