CSS Einführung
CSS Einführung
Was ist CSS?
CSS ist die Abkürzung für Cascading Style Sheets, also ein Dokument, mit dem man das Aussehen einer Website mittels einer Sprache genau bestimmen kann.Ein großer Vorteil davon ist, dass man den kompletten Stylecode nicht auf jeder Seite einer Website notieren muss, sondern nur ein Mal. Dazu legt man eine spezielle CSS-Datei an (style.css), die alle Formatierungen für Farben, Größen, Abstände, Hintergrundbilder, Rahmen und mehr enthält. Diese bindet man anschließend in den Dateikopf einer HTML-Datei ein.
Syntax - die "Grammatik"
Selektor{Eigenschaft: Wert;}
html{background-color: blue;}
img{border: 1px solid grey;}
Um ein Element der Website zu verändern, muss man zuerst auswählen, was man verändern möchte. Diese Angabe nennt man Selektor. Dahinter wird in geschweiften Klammern angegeben, was man daran wie verändern möchte, also die Eigenschaft und dessen Wert. Die Kombination aus Eigenschaft und Wert wird als Deklaration bezeichnet. html{background-color: blue;}
img{border: 1px solid grey;}
In der grauen Box auf der rechten Seite sehen sie zu aller erst die allgemeine Form eines Befehls in CSS. Mit dem Befehl darunter bestimmt man die Farbe des Hintergrunds der kompletten Website auf Blau. Dazu selektiert man html, bestimmt mit background-color was man verändern möchte und übergibt anschließend den Wert blue.
Im dritten Beispiel verpasse ich allen Bildern der Website einen grauen, durchgezogenen Rahmen der Stärke 1 Pixel.
IDs und Klassen
Wie Sie vielleicht schon bemerkt haben, entsprechen die Selektoren in den oberen Beispielen jeweils einem HTML-Tag. Das ist kein Zufall, denn man kann jeden HTML Tag selektieren und dessen Erscheinungsbild beliebig verändern! Aber stellen Sie sich vor, Sie haben auf einer Seite mehrere Bilder, möchten davon aber nur einige verändern. Was nun? Bei genau solchen Fällen verwendet man IDs und Klassen. Diese lassen sich nahezu jedem Element auf einer Website zuordnen und somit auch bearbeiten.Zwischen den geschweiften Klammern können nun alle gewünschten Eigenschaften definiert werden, zuletzt muss die ID oder Klasse noch einem Element zugeordnet werden. Das geschieht im HTML Quelltext als Attribut. Hier einige Beispiele:
Nun stellen Sie sich sicher die Frage, was wohl der Unterschied zwischen ID und Klasse ist, eigentlich nicht viel! Der Unterschied liegt in der Verwendung. Klassen kann man mehrere Male in einem Dokument verwenden, IDs jedoch nicht, daher verwende ich IDs eher für die Erstellung des Designs und Klassen für die Formatierung des Inhalts. Dazu kommt, dass im Zweifelsfall immer die Angaben der ID vorgezogen werden, falls es Überschneidungen gibt.
