CSS
Cascading Style Sheets
CSS heißt Cascading Style Sheets und ist eine Stylesheet-Sprache. Sie dient zur Formatierung und vernünftigen Darstellung von Webseiten.
1. CSS in HTML einbetten
CSS ist nichts anderes als ein Element im HTML-Text. Der (Start-)Tag heißt <style> und wird zwischen den Start-Tag <head> und End-Tag </head> im Header eingefügt. Das Style-Tag benötigt ebenfalls ein Attribut (geben zusätzliche Informationen) mit dem Namen type, dass dem Browser vermittelt, welche Art von Stil verwendet werden soll.
Wie oben beschrieben haben wir ein <style>-Tag in den HTML-Code eingefügt. Innerhalb dieses Style Tags können wir nun die einzelnen Tags bearbeiten. In unserem Beispiel Code werden alle <h1>-Elemente ausgewählt. Die Schriftart (font-family), die Schriftgröße (font-size) und Schriftfarbe (color) werden hier verändert. Ebenfalls kann man einen Rahmen unter unter einem Element hinzufügen (border-bottom). Der untere Rahmen wird so gestaltet, dass er eine 2 Pixel breite durchgezogene blaue Linie ist. Neben den Überschriften werden ebenfalls die Absatz-Elemente angepasst und verändert. Nachdem wir alle Style Komponenten eingefügt haben, speichern wir die Webseite und laden sie neu. Daraufhin machen sich sehr schnell die Neuerungen durch CSS erkennbar.
2. Vererbung in CSS
Mittels CSS können HTML-Elemente Styles von ihren „Eltern“ erben. Im HTML-Code wurden beispielsweise Absätze gestylt mittels CSS. Wenn man im <p>-Tag ein Hyperlink mittels einem <a>-Tag einfügt, dann wird dieser auch gestylt. Somit erben die <a>-Tags von ihren Eltern. Wenn man beispielsweise die Schriftart im <body>-Tag definieren, dann erben alle darauffolgenden Eltern und Kinder. Als Ergebnis enthalten alle Überschriften, Zwischenüberschriften und auch Absätze dieselbe Schriftart.
Vererbungen können auch überschrieben werden. Beispielsweise kann man im <body>-Tag eine Schriftart definieren. Wenn man alle Überschriften in einer anderen Schriftart haben möchte, kann man diese einfach überschreiben, indem man eine Regel nur für das <h1>-Element angebt.
Problematisch ist, dass alle Überschriften, Absätze und Unterüberschriften in genau einer Schriftart, Farbe, etc. darstellen werden können. Wenn man jedoch einen Absatz in gelb, einen in blau und einen in rot hinterlegen möchte, muss man Klassen bilden. Im <body>-Tag hinter den <p>-Tag kann eine Klasse wie folgt definiert werden:
<p class=“blau“> Absatz steht hier </p>
Nun schreibt man mittels CSS in den <style>-Tag nun unter p.blau { color: blau; } und erhält den spezifischen Absatz in der Farbe blau.
ePortfolio 