CSS - Cascading Stylesheet
Über HTML ist es Ihnen nur bedingt möglich Ihre Webseite ganz nach Ihren Wünschen zu Stylen und zu Layouten. Über CSS, das Cascading Stylsheet, haben Sie wesentlich mehr Möglichkeiten um auch mit einfacheren Konzepten Ihre Webseite zu gestalten.
Bei heutigen Webseiten ist es eigentlich unumgänglich kein CSS zu verwenden. Somit sorgt CSS für ein schönes und gepflegtes Webdesign. Daher liegt auch der Erfolg Ihrer Webseite maßgeblich am CSS. Nutzer fühlen sich nachweislich auf geordneten und mittels CSS "gestylten" Seiten wesentlich wohler und besuchen diese häufiger und auch regelmäßiger.
Daher vernachlässigen Sie Ihre Webprogrammierung keinesfalls mit dem Wissen und Können von CSS.
Nehmen Sie sich ein wenig Zeit und lernen Sie den Umgang mit CSS kennen. Lassen Sie taten Folgen und schauen sich die ersten nachfolgenden Beispiele an.
Code:
body {
font-size: 12px;
font-family: arial, helvetica, arial;
color: #ff0000;
background-color: #000000;
}
Obiges Beispiel lässt sich in so ziemlich jeder mittels CSS gestylten Webseite finden.
Ich denke auch für Laien ist ziemlich schnell zu sehen was obiges Beispiel bewirkt. Wenn nicht lassen Sie sich nicht entmutigen. Lesen Sie weiter und finden auch Sie den Trick heraus.
Nein, natürlich ist es kein Trick. CSS ist auch nur eine Programmiersprache. Wohl bemerkt, gehört CSS zu den Stylsheet-Sprachen.
Nun möchte ich Ihnen verraten was obiges Beispiel bewirkt.
In der ersten Zeile finden Sie den Selektor
body, hiermit wählen Sie den Geltungsbereich der in "geschweiften Klammern" ({}) stehenden Befehlen aus. Nachfolgende Zeilen würden sich also auf alle Bereich in Ihrem HTML Dokument auswirken. Kein Sorge, sie können natürlich diese Definitionen für Bereiche innerhalb Ihres Body-Bereichs auch wieder überschreiben. Was also soviel bedeutet, dass wir innerhalb des
body Selektors alle Grunddefinitionen angeben, wie zum Beispiel die Schriftgröße.
font-size: 12px wäre somit unsere Grunddefiniton für die Schriftgröße. All unsere Texte innerhalb unseres HTML Dokuments wären somit 12px (Pixel) groß. Wahlweise können Sie auch pt (Point - Punkt) angeben.
Wollen wir nun eine Schriftart angeben, verwenden wir
font-family: arial, helvetica, ..., wie Sie in obigen Beispiel in Zeile 3 sehen. Hier haben wir die Möglichkeit, verschiedene Schriftarten zu definieren. Warum wir hier verschiedene Schriftarten definieren, liegt daran, dass nicht jeder Computer alle Schriften installiert hat. Sollten zuerst definierte Schrift nicht vorhanden sein, wird die zweite definierte Schrift verwendet und immer so weiter. Definieren Sie aber immer Schriften wie Arial oder Helvetica, welche zu fast 100% auf allen Computern installiert sind.
color und
background-color verändert somit die Schriftfarbe bzw. die Hintergrundfarbe für den HTML Bereich, welche im Selektor angegeben wurde. In unserem Beispiel also für den Body-Bereich des HTML Dokumentes.
Wie Sie sehen, haben Sie schon die ersten Zeilen CSS gelesen und kennengelernt. Ich hoffe, ich konnte Ihnen die Stylesprace CSS schmackhaft machen und wünsche Ihnen zugleich viel Spaß auf folgenden Seiten und Tutorials.
