Inhaltsverzeichnis

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