CSS (Cascading Style Sheets) – Eine Einführung

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.

Vorteile von CSS

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.

  • Der Hauptvorteil von CSS ist, dass das Layout mehrere Webseiten mit Hilfe einer einzigen CSS-Datei übernommen werden kann, dadurch muss nicht mehr jede Seite mühsam mit HTML-Befehlen erzeugt werden.
  • Ein weiterer Vorteil ist, dass CSS von allen Webbrowsern unterstützt wird. Einige HTML-Befehle, wie bespielsweise <blink>…</blink> werden nur von einigen Browsern “verstanden”.
  • Zusätzlich sind die CSS-Befehle den HTML-Befehlen teilweise sehr ähnlich.

CSS (Cascading Style Sheets)

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:

selector {property: value;}
Einige CSS-Befehle:

  • Hintergrundfarbe: body {background-coulor: value;}
  • Hintergrundbild: body {background-image: url(“Dateiname”);}
  • Textposition, z.B. Außenabstand definieren: body {margin: 100px 10px 10px 100px;}

Einbinden von CSS-Befehlen in eine Website

Prinzipiell gibt es drei Möglichkeiten, CSS-Befehle einzubauen:

  • Die sog. In-line (Attribut-Stil)-Methode, dabei wird dies über den Befehl “style” direkt in die html-Datei eingebunden, also zwischen <body> und </body> (z.B. <body style=”background-color: #FF0000;”>)
  • Eine weitere Möglichkeit ist die sog. In-document (Tag-Stil)-Methode, dabei werden die CSS-Befehle im Header der htlm-Datei eingebunden).

 

body {background-color: #FF0000;}

 

  • Die häufigst verwendete Methode ist der Verweis auf eine CSS-Datei. Dazu wird zwischen <head> und </head> folgender Befehl eingefügt: <link rel=”stylesheet” type=”text/css” href=”Name.css” />. Die CSS-Datei ist dabei ein externes Stylesheet in Form einer Textdatei mit der Endung .css.Wichtig ist, dass der Verweis href= auf das richtige Verzeinis weist.

CSS (Cascading Style Sheets) – Eine Einführung – Testfragen/-aufgaben

1. Was ist CSS und wofür wird es verwendet?

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.

2. Wie bindet man ein externes CSS in HTML ein?

Externe CSS-Dateien werden mit dem <link> Element im Header-Bereich der HTML-Datei eingebunden. Beispiel: <link rel=”stylesheet” href=”style.css”>

3. Was sind Selektoren in 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.

4. Wie setzt man Kommentare in CSS?

Kommentare in CSS werden mit /* … */ gesetzt. Alles zwischen diesen Zeichen wird vom Browser ignoriert.

5. Was bedeutet der Begriff ‘Cascading’ in CSS?

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.

6. Was ist der Unterschied zwischen den CSS-Eigenschaften ‘margin’ und ‘padding’?

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.

7. Was ist der Unterschied zwischen den Selektoren ‘class’ und ‘id’ in CSS?

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.

8. Was ist ein Pseudo-Element in CSS?

Ein Pseudo-Element in CSS ist ein Keywort, das einem ausgewählten Element einen bestimmten Zustand zuweist. Beispiele sind :hover, :active, :focus usw.

9. Wie würdest du mithilfe von CSS einen Text zentrieren?

Ein Text kann in CSS mithilfe der text-align Eigenschaft zentriert werden. Zum zentrieren von Text nutzt man in CSS: text-align: center;

10. Wie verlinkst du ein HTML Dokument mit einer CSS Datei?

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”>