CSS Einleitung
Okay, wie bereits angekündigt folgt hier nun das versprochene Tutorial für HTML und CSS. HTML werde ich dabei nur ein bisschen anschneiden und einige Begriffe klären, damit ihr beim anschließenden CSS Tutorial nicht durcheinander kommt. Nach der kurzen HTML Einleitung folgt dann die CSS Einleitung. Aber nun genug gelabert, ich fange dann mal an!
HTML Einleitung
HTML, ich könnte euch jetzt was dazu erklären was HTML genau heißt, wie es entstanden ist usw… da hab ich aber gerade keine Lust zu 
Das könnt ihr auch bei Wikipedia nachlesen falls es euch wirklich interessiert. Ich werde nun lediglich den Grundlegenden Aufbau einer HTML Datei erklären und etwas zu den Begriffen sagen die ich später verwende.
<!doctype html> <html> <head> <title>Hallo Welt!</title> </head> <body> <div>Hallo Welt!</div> </body> </html>
Der Code den ihr hier seht beschreibt eine sehr einfache HTML Seite. Es ist lediglich ein Title für die Seite angegeben und es gibt ein div Element in dem der Text “Hallo Welt” steht. Das wars. Da wären wir auch schon bei den ersten Begriffen. Bisher kennt ihr wahrscheinlich neben einem Element noch ein “tag”. Aber was ist nun der Unterschied? Ich würde es so abgrenzen, das ich mit einem Element immer das fertige Konstrukt meine, das man letztendlich auf der Internetseite sieht, inklusive allem was darin enthalten ist. Mit einem Tag meine ich das, was in der HTML Datei steht. Dabei steht die Bezeichnung immer für das, was zwischen dem “<” und dem “>” steht. Ein “<div>” ist also ein div-Tag, ein “<foobar>” wäre demnach also ein foobar-Tag (auch wenn es einen foobar-Tag nicht wirklich offiziell gibt und er deshalb niemals verwendet werden sollte, das Prinzip ist aber sicherlich klar).
Nun ist eigentlich schon der Grundstein gelegt, damit wir die ersten lustigen Sachen in CSS machen könnten. Damit wir das aber relativ sinnvoll machen können möchte ich euch noch kurz Klassen und ID’s erklären. Das hört sich nun am Anfang schlimmer an als es ist.
Einem Tag können verschiedene Attribute zugewiesen werden. Ihr seid sicherlich schon öfters über sie gestolpert. Unter anderem kann ein Tag immer das Attribut “id” oder “class” haben. Der Inhalt legt entsprechend entweder die Klasse, oder die ID, eines Objekts fest.
<div class="red">Text</div> <div id="header">Text</div>
Wir benötigen Klassen und Elemente um später in CSS auf bestimmte Elemente zugreifen zu können. So könnte man allen Texten die rot eingefärbt werden sollen die Klasse “red” geben und später festlegen das der Text mit der Klasse “red” rot eingefärbt werden soll. Wie ihr nun aber die Klasse nennt könnt ihr selbst entscheiden. Ähnliches gilt für die ID. So könnt ihr den Bereich der später den Header abbilden soll, in ein Div Element mit der ID “header” stecken, um dann in der CSS Datei einfacher darauf zuzugreifen.
Aber wo ist nun der Unterschied zwischen einer Klasse und einer ID? Der Hauptunterschied liegt darin, das eine ID auf einer HTML Seite höchstens einmal vorkommen darf sollte. Ansonsten ist es eigentlich egal ob ihr nun eine Klasse oder eine ID verwendet.
Soviel erstmal zur kleinen Einführung in HTML. Jetzt gehts mit CSS weiter!
CSS Einleitung
Was ist eigentlich CSS und wofür ist es gut? CSS ist eine Möglichkeit um seine HTML Dokumente zu gestalten. Man kann verschiedene Styles für verschiedene Elemente festlegen. Das wars.
Hört sich erstmal ziemlich mickrig an, sowas kann ich doch auch direkt in HTML. Oder? Nicht ganz. Oder ich habe verpasst das man in purem HTML festlegen kann das alle p-Tags jetzt fett gedruckt sein sollen, rote Schrift haben und dazu noch einen lustigen gepunkteten Rahmen. Falls es jemand besser weis, darf er mich gerne belehren
CSS einbinden
Aber fangen wir erstmal langsam an. CSS kann auf 3 Arten eingebunden werden. Inline, in einer .css Datei und direkt in einem Attribut des Tags. Sofern möglich sollte immer eine externe Datei bevorzugt werden. Das sorgt für eine bessere Übersicht und lässt sich im Nachhinein besser pflegen. Aber das Beste kommt ja – wie allseits bekannt – zum Schluss. Also fang ich mal mit der Definition direkt beim Tag an.
<div style="/* CSS Code here */">Hallo Welt!</div>
Der CSS Code wird einfach in das Style Attribut des Tags geschrieben. Die Besonderheit ist hierbei nun, das der CSS Code sich nur auf das Element bezieht, zu dem das Attribut gehört. So kann man also direkt festlegen das genau dieses div-Element jetzt roten Text enthalten soll.
Eine weitere Möglichkeit CSS einzubinden ist, es in einem Style Element zu definieren. Im Prinzip kann man die Tags hinschreiben wo man möchte, ob in den head oder den body, das hat keinen direkten Einfluss auf die Ausgabe des HTML Dokuments. Ich finde es aber eleganter, alle CSS Angaben im head zu machen. Also könnte das dann so aussehen:
<head>
<style type="text/css">
/* CSS Code here */
</style>
</head>
Der CSS Code wird hier innerhalb von Style Tags geschrieben. Damit das HTML Dokument nun auch weiß, das es sich um CSS handelt, muss man noch das type-Attribut auf “text/css” setzen. Der CSS Code der hier hineingeschrieben wird, bezieht sich nun schon auf das komplette HTML Dokument. Hier könnte man dann festlegen das alle div-Elemente roten Text enthalten sollen.
Die letzte Möglichkeit ist, den CSS Code einzubinden, ist eine externe Datei. Das macht man einfach, indem man das, was man sonst zwischen die style-Tags schreibt, in eien externe Datei schreibt. Es handelt sich dabei um eine einfache Textdatei, nur das man die Dateiendung normalerweise auf “css” ändert. Über folgenden Code wird die CSS Datei dann eingebunden:
<link href="datei.css" type="text/css" rel="stylesheet" />
Auch diese Zeile schreibe ich immer in den head Bereich. Das sorgt für ein wenig mehr Übersicht. Das type- und rel- Attribut sind Pflichtangaben die sich auch nicht ändern. Unter “href” gebt ihr dann den Pfad zur CSS Datei an.
Das wars dann schonmal zur Einbindung des CSS Codes. Aber wie sieht dieser ominöse Code denn nun aus?
CSS Code – Syntax und erste Selektoren
Okay, da diese “kurze” Einleitung meiner Meinung nach nun schon ziemlich lang ist, werde ich mich hier kurz fassen und nur auf die wichtigsten Grundlagen eingehen. Zuerst mal wieder ein paar Begriffe die euch immer wieder begegnen werden.
Da wären zu einem die Selektoren. Sie sind zugleich auch ein wichtiger Grundstein für die geschickte Verwendung von CSS Eigenschaften. Durch die Selektoren wählt man einen bestimmten Bereich eines HTML Dokuments aus, den man dann durch die nachfolgenden CSS Eigenschaften gestalten möchte. So kann man Tags, Klassen oder ID’s auswählen. Hier einige Beispiele wie so etwas aussehen kann:
#header { /*CSS Eigenschaften*/ }
.red { /*CSS Eigenschaften*/ }
div { /*CSS Eigenschaften*/ }
div#header { /*CSS Eigenschaften*/ }
div.red { /*CSS Eigenschaften*/ }
Okay, fangen wir mal mit den obersten 3 Zeilen an. Das sollte euch vielleicht bekannt vorkommen. In der ersten Zeile wählen wir eine ID aus, das stellen wir durch die Raute (“#”) dar. Will man die ID “Petunie” auswählen schreibt man also “#Petunie”. Die zweite Zeile selektiert dann eine Klasse, eine solche wird durch den führenden Punkt (“.”) dargestellt. Im letzten Fall wählen wir einfach alle Div’s aus.
Die letzten beiden Zeilen gehen schon etwas weiter. So wähle ich jeweils immer eine div mit der jeweiligen ID oder Klasse aus. So kann ich verschiedene Stile für verschiedene Elemente – aber die selben Klassen – definieren.
Nach den Selektoren folgt dann eine offene geschwungene Klammer (“{“) die den Block für die Eigenschaften öffnet und eine geschlossene (“}”) die ihn wieder schließt.
CSS Eigenschaften
Okay, dann gehts jetzt direkt weiter mit den CSS Eigenschaften. Diese werden immer durch den Namen der Eigenschaft und deren Wert dargestellt.
Name:Wert; color:red;
In der ersten Zeile sehen wir nochmal das Schema. Erst kommt der Name, dann der Wert. Getrennt werden die beiden durch einen Doppelpunkt (“:”) und abgeschlossen wird die Eigenschaft dann durch ein Semikolon (“;”). Darunter seht ihr ein kleines Beispiel. Hier wird die Textfarbe auf rot gesetzt. Dabei ist der Name der Eigenschaft “color” und der Wert “red”. Ersetzt man “red” durch “gray” wird der Text grau gedruckt und nicht rot.
Mehrere Eigenschaften können einfach hintereinander geschrieben werden. Ich bevorzuge es aber, für jede Eigenschaft eine neue Zeile zu beginnen. Das sorgt wieder für ein bisschen mehr Übersicht (Die wird wichtig wenn man eine größere Seite hat, glaubt mir ).
Soweit dann erstmal zu der kleinen Einführung. Ich wollte wirklich keinen allzu ausführlichen Einleitungs Kurs geben, da man zum Thema CSS schon genug nachlesen kann Aber ich werde natürlich gerne alle Fragen beantworten die ihr mir stellt – falls das nicht auf Anhieb klappt werde ich mich auch gerne schlau machen um euch vielleicht weiterhelfen zu können 