Auf Lernort-Mint.de findet sich eine kurze Einführung in die Verwendung von “HTML” zur Erstellung von Webseiten. CSS (kurz: Cascading Style Sheets) wird dazu verwendet, das Aussehen (Layout) von HTML-Dokumenten festzulegen z.B. zu erzeugen (Schriftarten, Farben, Hintergrund). Dies lässt sich auch mit “HTML” durchführen, nur ist die Verwendung von CSS einfacher und strukturierter.
Wie bereits in der Einleitung erwähnt, ist man mit “HMTL” auch in der Lage, das Layout von Webseiten zu gestalten bzw. erstellen. Bekannte “HTML”-Befehle dazu sind z.B. <table>…..</table> (zum Erstellen von Tabellen) oder <p> als Befehl für einen Absatz.
Wie bereits erwähnt ist CSS und HTML teilweise sehr ähnlich, deswegen können CSS-Dateien auch mit jeden Textprogramm (z.B. Editor) geschrieben werden.
So wird eine einfache Webseite mit HTML-Befehfeln aufgebaut (ohne Lyout)
Hier steht, was nachher im Browser erscheint.
</HTML>
Nun kann man z.B eine Hintergrundfarbe definieren (z.B. rot), dazu verändert man den “Body (Körper der Webseite)”. So lautet der Befehl nun: <body bgcolor=”#FF0000″>
“Übersetzt” man nun den HTML-Befehl in CSS, so lautet dies body {background-color: #FF0000;}
Allgemein leitet sich der CSS-Befhel aus dem HTML-Tag (selector), der Eigenschaft (property) und dem Wert der Eigenchaft ab (value). Somit erhält man den allgemeinen Aufbau eines CSS-Befehles:
Prinzipiell gibt es drei Möglichkeiten, CSS-Befehle einzubauen:
body {background-color: #FF0000;}
CSS steht für Cascading Style Sheets und wird verwendet um das Layout und Design von Webseiten zu gestalten. Es legt fest, wie HTML-Elemente auf dem Bildschirm angezeigt werden.
Externe CSS-Dateien werden mit dem <link> Element im Header-Bereich der HTML-Datei eingebunden. Beispiel: <link rel=”stylesheet” href=”style.css”>
Selektoren in CSS sind Muster, die bestimmen, welches Element oder welche Gruppe von Elementen von den CSS-Stilregeln betroffen sind. Beispiele sind Element-, Klassen- und ID-Selektoren.
Kommentare in CSS werden mit /* … */ gesetzt. Alles zwischen diesen Zeichen wird vom Browser ignoriert.
Das ‘Cascading’ in CSS bezieht sich auf die Reihenfolge oder Hierarchie, in der die Stile angewendet werden. Wenn mehrere Stile auf dasselbe Element angewendet werden, bestimmt die ‘Kaskade’ welche Stile zur Anwendung kommen.
Die ‘margin’ -Eigenschaft bestimmt den Außenabstand eines Elements, während die ‘padding’ -Eigenschaft den Innenabstand eines Elements definiert. Sahne ist der Raum zwischen dem Inhalt des Elements und dessen Grenze.
Der ‘class’ Selektor wird verwendet, um mehreren Elementen denselben Stil zuzuweisen, während der ‘id’ Selektor einen Stil für genau ein Element definiert. ID-Selektoren haben in der Kaskade höhere Priorität als Klassenselektoren.
Ein Pseudo-Element in CSS ist ein Keywort, das einem ausgewählten Element einen bestimmten Zustand zuweist. Beispiele sind :hover, :active, :focus usw.
Ein Text kann in CSS mithilfe der text-align Eigenschaft zentriert werden. Zum zentrieren von Text nutzt man in CSS: text-align: center;
Du verlinkst ein HTML Dokument mit einer CSS Datei durch das Setzen eines <link> Elementes im <head> Abschnitt des HTML Dokumentes, wobei die ‘href’ Eigenschaft auf den Pfad der CSS Datei verweist. Beispiel: <link rel=”stylesheet” href=”styles.css”>