CSS Style-Sheets definieren

Allgemeine Syntax
Formate für einzelne Tags
Formate für mehrere Tags
Formate für verschachtelte Tags
Format-Unterklassen
Allgemeine Unterklassen
Unabhängige Formate
Pseudo Formate
Kommentare in CSS



Allgemeine Syntax

 
Eine einfache CSS-rule (Regel,Anweisung) besteht aus zwei Komponenten:
  1. dem selector
    (ein HTML-Befehl)
  2. der declaration
    in geschweiften Klammern
    (eine Style-Anweisung).
    Diese declaration besteht wiederum aus zwei Komponenten:
    • der property
      (eine CSS-Eigenschaft)
    • dem value
      (eine Wertzuweisung)
Einzelne declarations werden durch ein Semikolon voneinander getrennt.
property und value werden durch einen Doppelpunkt unterschieden.

Formate für einzelne Tags
p {font-family:Verdana,Arial,sans-serif;}

h1 {
font-size:24px;
color:#ff0000;
}

Formate für mehrere Tags

td, li {
font-style:italic;
}

body,ol,ul,dl,td {
font-family:Verdana;
font-size:12px;
}

Formate für verschachtelte Tags

p b {font-weight:bolder;}
td b {font-weight:bold;}

Im <body>:
<p><b>extradicke Schrift</b></p>

Format-Unterklassen

p.rot {color:red;}
p.gruen {color:green;}
p.blau {color:blue;}

Im <body>:
<p class="rot">rote Schrift</p>
<p class="blau">blaue Schrift</p>

Allgemeine Unterklassen

.schwarz {color:#000000}
.klein-kursiv {font-size:8px; font-style:italic;}

Im <body>:
<p class="klein-kursiv">klein-kursive Schrift</p>
<h2 class="schwarz">Schrift: schwarz</h2>

Unabhängige Formate

#rot {color:red;}

Im <body>:
<p id="rot">rote Schrift</p>

Pseudo-Formate

a:link {text-decoration:none; color:#ff0000;}
a:visited {text-decoration:none; color:#cc0000;}
a:active {text-decoration:none; color:#00ff00;}

Kommentare in Style-Sheets /* dies ist ein ein- oder
mehrzeiliger Kommentar*/