Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03112.jsonl.gz/2530

Im letzten Artikel habe ich dir erklärt was HTML bedeutet und was man damit machen kann. HTML dient dazu die Struktur und den eigentlichen Inhalt einer Website zu erstellen und Elemente wie Links und Bilder einzubinden. Damit deine HTML-Website aber auch noch gut aussieht benötigst du CSS.
CSS ist die Abkürzung für Cascading Style Sheets, was soviel bedeutet wie stufenförmige oder (hintereinander) geschachtelte Gestaltungsvorlagen. Mit CSS können unabhängig vom HTML-Dokument Gestaltungselemente wie Farben, Layout und Schriften festgelegt und individuell gestaltet werden.
Elemente im HTML-Dokument erhalten einen unverwechselbaren Elementen-Namen oder eine so genannte ID. Im CSS-Dokument werden diesen Elementen dann die gewünschten Stil-Informationen zugewiesen. Ebenso lassen sich beispielsweise die Position oder Ausrichtung der Elemente mit CSS bestimmen.
Wichtige CSS-Befehle
Dies sind einige CSS- Befehle, mit denen du deine Website gestalten kannst.
font-family
Schriftart (z.B. Arial)
width
Breite (z.B. 150 px)
background-color
Hintergrundfarbe (z.B. red)
margin
Aussenabstand (z.B. 10 px)
padding
Innenabstand (z.B. 5px)
CSS wurde entwickelt um den Inhalt einer Website von den Gestaltungsinformationen zu trennen. Es ist zwar auch möglich den Text direkt im HTML-Dokument zu formatieren, dies hat jedoch zur Folge, dass der Programmier-Code oft unübersichtlich ist und mit zusätzlichen Informationen vollgestopft ist. CSS-Code kann in eine extra CSS-Datei ausgelagert werden, was für mehr Übersicht und eine bessere Struktur sorgt.
Mit dem Element “body” wird beispielsweise der gesamte sichtbare Inhalt einer Website angesprochen. Wird nun im CSS-Code body {color:red;} angewendet, so wird der kompletteText der Website in rot dargestellt. Wenn man nun den gesamten Text auf die Farbe blau ändern möchte, muss dies nicht einzeln für jedes Element in der HTML-Datei vorgenommen werden, sondern kann mit einer kleinen Änderung in der CSS-Datei für das gesamte Dokument durchgeführt werden. Der Code würde nun also lauten: body {color:blue;}
CSS-Beispiel
An einem einfachen Beispiel möchte ich dir kurz erläutern, wie CSS in Zusammenarbeit mit HTML funktioniert. So sieht der body-Bereich der html-Datei aus:
<body>
<p> gelb und mittig </p>
<p> <font id=”blau”>mittig</font>, <font id=”klein”>klein</font> und gelb </p>
</body>
Und so die dazugehörige CSS-Datei
body{
text-align:center;
color:#F7FE2E;
}
#blau{
color:#0000FF;
}
#klein{
font-size:0.5em;
}
Die einzelnen Elemente auf der HTML-Seite werden nun in der externen CSS-Datei definiert und mit den jeweiligen Style-Informationen versehen. Alle Elemente im Body werden zentriert und mit der Farbe gelb versehen. Die zusätzlich definierten Elemente “blau” und “klein” erhalten eine extra Formatierung und werden jeweils blau, bzw. klein dargestellt, so, wie es in der CSS-Datei definiert wurde. Auf dieser Website gibt es ausführliche Informationen und ein ausführliches Tutorial mit vielen Beispielen zum Thema Was ist CSS?
Falls du überhaupt keine Lust hast dich mit CSS zu beschäftigen, kannst du mit unserem Website-Builder, den es kostenlos zu unserem Hosting dazugibt, eine Website ganz einfach erstellen.
Dein Jan