CSS mit HTML verbinden

Die HTML-Struktur ist fertig und sogar funktionstüchtig. Also, wie man sieht, habe ich ein HTML-Dokument, was hier alles beinhaltet an inhaltlichen Informationen, was ich rüberbringen möchte. Selbst der Anspruch an das responsiven Design, dass man es unter verschiedenen Auflösungen vernünftig betrachten kann, ist bereits erfüllt. Allerdings sieht es nicht wirklich schön aus, und von meinem Designvorgaben ist noch nichts übernommen worden. Dass das überhaupt so aussieht, dass man hier eine Überschrift hat, und eine zweite Überschrift, Fließtext, das sind Standardeinstellungen des Browsers. Selbst das kann unterschiedlich sein, je nach Browser, mit dem man das aufruft. Abgesehen davon, dass auch mit den Bildern ist nicht allererste Sahne. Her fehlt einiges, was an Designvorgaben aus meinem InDesign-Dokument übernommen werden muss. Sämtliche Design-Angaben, Typographie, Flächen Einfärbungen und so weiter, fehlen. Das geschieht über die Cascading Stylesheets, die CSS-Datei, und da wechsle ich mal in das HTML-Dokument zurück. CSS-Dateien bzw. CSS-Angaben können auf unterschiedliche Weise mit HTML in Verbindung gebracht werden. Zunächst einmal ist es durchaus möglich, innerhalb eines Dokumentes selbst in dem Befehl eine Angabe zu hinterlegen. Z. B., wenn ich jetzt hier schreiben würde "style" als Attribut, dann könnte ich mit dem Befehl "color:red" sagen, dass die Überschrift hier rot sein soll. Ich speichere das mal ab, wechsle zurück zum Dokument, und wie man sieht, er reagiert sofort da drauf. Das bedeutet also, dass ich hier solche Angaben direkt in die Zeilen schreiben kann. Desweiteren kann ich im Dokument auch eine Angabe machen, "style", das ist jetzt die ganz kurze Form, da gibt's noch mehrere Möglichkeiten, aber dann gehe ich nicht drauf ein, und jetzt sage ich mal "h2". Jetzt kommt eine ganz andere Schreibweise, und zwar in geschweiften Klammern. Innerhalb des HTML Befehls "style" schreiben wir auf einmal ganz anders, und dass kommt nicht von ungefähr, weil CSS ist ein anderer Sprachstandard, sonst würde er HTML heißen, und nicht CSS. CSS hat eine sogenannte "C" ähnliche Syntax, hier schreibt man den Befehl ganz normal ohne spitze Klammer, alles, was diesem Befehl zugeordnet wird, innerhalb geschweifter Klammern, und jeder einzelne Befehl, der das beschreibt, der wird noch mit Semikolon abgeschlossen. Wenn ich jetzt hier wieder den "color" Befehl nehmen würde, und nehmen wir mal "green", dann schließe ich hier hinten das Ganze mit einem Semikolon ab. In HTML hätte ich jetzt in einem "tag" geschrieben "h2", dann würde das Attribut "color" kommen und hier "green", und dann schließt man das hinten wieder. In CSS schreibt man das anders. Da hat man den Befehl ganz außen, und die einzelnen Attribute innen stehen, und da gibt's kein Gleichheitszeichen, da gibt's entsprechend einen Doppelpunkt und keine Anführungsstriche. Auch hier zwar wieder etwas anders, aber durchaus nachvollziehbar. Wenn ich nun mir das anschaue, dann sieht man, werden die nächsten Überschriften grün. Was passiert nun, wenn ich hier sage, das Ganze muss "h1"sein. Das mache ich mal gerade, Jetzt wird mal etwas erkennen, was gar nicht im Sinne des Erfinders ist. Hier gibt's jetzt eine Überschneidung, und zwar möchte ich gerne, das hier ein anderer Farbton zugeordnet wird, wie den, den ich hier oben angebe, das ist das Prinzip dieser Kaskadierung, das ist durchaus möglich. Nachteile dieser ganzen Sache, oder was heißt Nachteil. Es ist beabsichtigt. Ich habe mit den "style" Befehlen die Möglichkeit jederzeit die Angaben, die im Kopf des Dokumentes vorkommen, zu überschreiben. Was im Kopf des Dokumentes vorkommt, hat Vorrang vor den Angaben, die extern angegeben werden. Der Nachteil ist, ich müsste jetzt jede einzelne Überschrift mit einem Befehl hinterlegen, oder in den Kopf des Dokumentes solche Angaben hineinschreiben, also ziemlich aufwändig, vor allem, wenn man dann auf die Idee kommt, das Grün, das ist es doch nicht, ich hätte lieber eine andere Angabe. Also wird man das mit Sicherheit anders realisieren. Über solche Möglichkeiten, wenn es um die Gesamtstruktur der Angaben geht, und eine externe CSS-Datei hat eben den Vorteil, wenn ich die Angaben dort definiere für jede Datei und für jeden Inhalt, die ich damit verbinde. Ich lege eine solche Datei mal schnell an. Über "File" "New File" -- Ich brauche da nicht viel reinschreiben, denn da gibt es auch einen Kommentar -- eine Kommentarmöglichkeit, und das ist diesmal einen "/*". Hier konnte ich dann reinschreiben "HTML und CSS für Designer". In der nächsten Zeile dann noch "Autoren: Michael Rüttger", und mehr brauche ich erstmal nicht aufnehmen. Jetzt speichere ich die Datei ab, und zwar in dem zuvor angelegten Unterverzeichnis "style". Dafür haben wir das angelegt, hier hinein kommt die Datei, und die nenne ich jetzt z. B. "style" oder "main" ".css" Damit existiert die Datei . Hier springt direkt wieder in die richtige Formatierung des Quelltextes, und jetzt muss ich das Ganze natürlich mit der HTML-Datei verbinden, aber auch das ist kein Hexenwerk, da gibt's einen einzigen Befehl dafür, und da man den nicht sehen soll, kommt der in den "head"-Bereich, und dieser Befehl lautet "link", also eine Verbindung, und dann wieder die "relation", den Typus, das ist ein Stylesheet, und dann das Nachschlagen, die Referenz wieder in den Ordner CSS, den öffne ich mit dem "/" und dann haben wir "style.ccs", und das war schon das ganze Hexenwerk. Jetzt haben wir eine Stylesheet-Datei -- die liegt hier im Hintergrund -- da ist noch nichts drin -- und die Verbindung zum HTML-Dokument , und beides wird nun funktionieren, und damit kennen Sie alle drei Möglichkeiten: nämlich die Style-Angaben im Befehl selbst, Style-Angaben im Kopf des Dokumentes und Style-Angaben durch Verbindung einer externen Stylesheet-Datei mit dem HTML-Dokument.