Voraussetzung:
HTML-Grundkenntnisse
Kurze Einleitung:
Ich erlerne z.Zt. selber noch HTML und CSS, möchte aber meine bisher erlernten Grundkenntnisse gerne weitergeben.
In diesem Tutorial (übrigens mein erstes für Tutorials.de und über CSS) habe ich mich erstmal einem leichten Thema gewidmet und zwar dem Zuweisen von Farbe zum Text.
Auch habe ich gleich zwei versch. Wege aufgeführt wie dies möglich sein kann.
Für welchen Weg ihr euch im Endeffekt entscheiden werdet bleibt euch überlassen.
CSS ist dafür da, dass der HTML-Code nicht zu groß und unübersichtlich wird.
Um das Tutorial nachzumachen reicht die Testversion Adobe GoLive aber auch jeder kostenlose (Freeware) CSS-Editor oder auch der normale Editor der eurem OS beiliegt.
Beginnen wir also.
Die CSS-Anfangs-Anweisung wird immer in den Head-Bereich des HTML-Dokuments eingetragen.
Auf meinen Screenshots ist der obige Head-Bereich nicht zu sehen, weil man diesen für das Tutorial vernachlässigen kann.
Den Quellcode habe ich jeweils mit Kommentaren (grau) versehen.
Wie ihr sehen könnt beginnt der CSS-Anfang mit <style type=“text/css“> und endet mit </style>.
Einen Kommentar, welchen der Browser nicht ausgibt aber dennoch interpretiert, leitet man mit <!-- ein und endet mit -->.
Darin kommt der eigentliche CSS-Code und somit die ganze Formatierung des Textes bzw. der Seite.
Schauen wir uns den HTML-Code im <body>-Tag etwas genauer an.
Ihr seht, dass der Text einmal eine Zeile in h1-Formatierung, zwei in h2-Formatierung und eine Zeile mit einer Zitat-Formatierung (<em....</em>)enthält.
Ohne dem gesamten CSS-wäre der Text nur schwarz und besäße keine Farbe, da im HTML-Code kein <font>-Tag verwendet wurde.
Der einzelnen Formatierung wurde oben im CSS-Bereichs (welcher wie wir uns erinnern im Head-Bereich liegt) Farbe zugewiesen.
Da in meinem HTML-Code zwei h2-Zeilen vorkommen, würden beiden Zeilen die Farbe blau bekommen. Zur besseren Übersicht wurde die Hintergrundfarbe entfernt:
Damit nun die eine h2-Zeile dennoch eine andere Farbe bekommen kann habe ich als Ausnahmeregel der einen Zeile mittels
|
Code:
|
style=“color:....;“
|
eine Farbe zugewiesen.
Eine andere Möglichkeit wäre gewesen der h2-Zeile die eine andere Farbe bekommen soll eine id zuzuweisen und oben der id dann eine Farbe zu geben:
Wenn man eine Hintergrundfarbe definieren möchte, dann muss im CSS-Bereich folgender Code vorhanden sein:
|
Code:
|
body {background-color: eure_Farbe;}
|
Die Farbe kann sowohl Hexadezimal (#000000) als auch ausgeschrieben angegeben werden wobei Hexadezimal immer besser ist, da nicht jede Farbe (englisch übersetzt) vorhanden ist.
Mit gelber Hintergrundfarbe sieht das ganze so aus:
Um nochmal auf den CSS-Bereich zuzukommen:
Es muss immer definiert werden welcher Bereich im HTML-Code was bekommen soll z.B. der <body>-Tag (blau).
Diesem wird ein
Ereignis (grün) und ein
Wert (rot) zugewiesen.
Zusätzlich muss nach dem Wert immer ein Semikolon
gesetzt werden.
Das Ereignis und der Wert stehen immer in geschweiften Klammern
und
wobei es egal ist, ob ein Leerzeichen die geschweifte Klammer oder das Ereignis vom Wert trennt (siehe dazu den Code in den obigen Bildern).
Es ist natürlich auch möglich den gesamten CSS-Code auszulagern in einer .css-Datei.
Dies wollte ich euch aber erstmal bei diesem kleinen „Projekt“ nicht zumuten.
Auch ist es natürlich möglich anstatt einer Hintergrundfarbe eine Hintergrundgrafik einzufügen – dazu evtl. in einem meiner nächsten Tutorials mehr.
So, damit wäre ich am Ende meines ersten CSS-Tutorials angelangt und hoffe, dass es euch gefallen hat.
Ich bitte euch mein Tutorial zu bewerten damit ich für die Zukunft weiß, ob es sich rentiert, dass ich mich hinsetze und meine Freizeit in ein (weiteres) Tutorial stecke.
Wer sich intensiv mit dem Thema beschäftigen möchte, der kann sich auch von Video2Brain.de Video-Tutorials auf DVD kaufen.
Geschlossen
Linear-Darstellung
