CSS-Referenz

Einbindung in HTML

Direkt in der HTML-Datei

Ein einfachstes Style-Tag steht im <head>-Bereich einer html-Seite und könnte etwa so aussehen:

<style type="text/css">
body { 
  background-color: yellow; 
  color: green; 
}
p {
  color: red;
}
</style>

In einer eigenen CSS-Datei

Besser ist es, CSS-Definitionen in einer separaten CSS-Datei zu speichern. Dazu muss die CSS-Datei in der HTML-Datei mit einem <link>-Element eingebunden werden:

webseite.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
    <meta charset="UTF-8">
    <title>Titel der Webseite</title>
  </head>
  <body>
  </body>
</html>

mystyle.css

body { 
  background-color: yellow; 
  color: green; 
}
p {
  color: red;
}

Hintergrund

Eigenschaft	Bedeutung	Mögliche Werte
`background-color`	Hintergrundfarbe	Farbe
`background-image`	Hintergrundbild	URL
`background-position`	Ausrichtung des Hintergrundbildes	`left`, `center`, `right`, `top`, `bottom`
`background-repeat`	Kachelung des Hintergrundbildes	`repeat`, `repeat-x`, `repeat-y`, `no-repeat`
`background-size`	Grösse des Hintergrundbildes	Grösse, `cover`
`background-attachment`	Scrolling der Hintergrundbildes	`scroll`, `fixed`

Rahmen

Eigenschaft	Bedeutung	Mögliche Werte
`border-color`	Rahmenfarbe	Farbe
`border-style`	Rahmenart	`none`, Rahmenart
`border-width`	Rahmendicke	Grösse
`border-bottom-color`	Rahmenfarbe unten	Farbe
`border-bottom-style`	Rahmenart unten	`none`, Rahmenart
`border-bottom-width`	Rahmendicke unten	Grösse
`border-left-color`	Rahmenfarbe links	Farbe
`border-left-style`	Rahmenart links	`none`, Rahmenart
`border-left-width`	Rahmendicke links	Grösse
`border-right-color`	Rahmenfarbe rechts	Farbe
`border-right-style`	Rahmenart rechts	`none`, Rahmenart
`border-right-width`	Rahmendicke rechts	Grösse
`border-top-color`	Rahmenfarbe oben	Farbe
`border-top-style`	Rahmenart oben	`none`, Rahmenart
`border-top-width`	Rahmendicke oben	Grösse
`margin`	Aussenabstand	Grösse
`margin-bottom`	Aussenabstand unten	Grösse
`margin-left`	Aussenabstand links	Grösse
`margin-right`	Aussenabstand rechts	Grösse
`margin-top`	Aussenabstand oben	Grösse
`padding`	Innenabstand	Grösse
`padding-bottom`	Innenabstand unten	Grösse
`padding-left`	Innenabstand links	Grösse
`padding-right`	Innenabstand rechts	Grösse
`padding-top`	Innenabstand oben	Grösse

Positionierung

`bottom`	Positionierung	Grösse
`left`	Positionierung	Grösse
`right`	Positionierung	Grösse
`top`	Positionierung	Grösse
`position`	Positionierung	`static`, `fixed`, `relative`, `absolute`

Schrift

`color`	Schriftfarbe	Farbe
`font-family`	Schriftart	Schriftarten
`font-variant`	Kapitälchen	`normal`, `small-caps`
`font-style`	Kursivschrift	`normal`, `italic`
`font-size`	Grösse der Schrift	Schriftgrösse
`font-weight`	Dicke und Stärke der Schrift	`normal`, `bold`, `bolder`, `lighter`
`text-align`	Textausrichtung	`left`, `right`, `center`, `justify`
`text-decoration`	Text über-, durch- oder unterstrichen	`overstrike`, `strike-through`, `underline`, `none`