Cascading Style Sheets (CSS)

Aufgabe von Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) bestimmen das Aussehen einer Website.


Aufbau von CSS-Anweisungen

CSS-Anweisung bestehen aus einem Selektor und einem Deklarationsblock.

  • Der Selektor bestimmt für welchen Element die Anweisung gilt.
  • Im Deklarationsblock werden ein oder mehrere Deklarationen angegeben die festlegen, wie das Element formatiert werden soll. Eine Deklaration besteht dabei aus einer Eigenschaft gefolgt von einem Doppelpunkt, gefolgt vom Wert der Eigenschaft und abgeschlossen mit einem Semikolon.
h1{
color: black;
}

Im obigen Beispiel wird die Textfarbe für Überschriften 1 auf schwarz gesetzt.


CSS in HTML einbinden

Zur Einbindung von CSS in HTML gibt es drei Möglichkeiten:

Inline-Styles: Style-Attribut eines HTML-Elements

<p style="color:black;margin:10px;">Das ist ein Inline-CSS-formatierter Absatz.</p>

Style-HTML-Element

...
<head>
...
<style type="text/css"> h1 {
  background: black;
  color: yellow;
}
</style>
</head>
<body>
<?php
echo "<h1>Hallo Welt!</h1>"; ?>
<p>Lorem ipsum dolor sit amet ...</p>

externe Stylesheet-Datei über das link-HTML-Element

Eine externe Stylesheet-Datei ist die sauberste und damit zu bevorzugende Lösung zur Formatierung mit CSS. So sind Inhalt (HTML, Datenbank, etc.) und Formatierung (CSS) sauber getrennt.

Das Link-Element muss dabei im Header der HTML stehen.

<head>
<link rel="stylesheet" type="text/css" href="extcss.css" /> ...
</head>

Schreibe einen Kommentar