body {
    font-family: "Comic Sans MS", sans-serif;
    font-size: 16px;
    color: #000000;
    background-color: rgb(255,216,206);
	
	margin-left: 10mm;
    margin-right: 10mm;
	margin-top: 10mm;
	margin-bottom: 10mm;
}

/* Schriftgrößen */
.fs12 { font-size: 12px; }
.fs16 { font-size: 16px; }
.fs20 { font-size: 20px; }

/* Farben */
.black { color: #000000; }
.red   { color: #ff0000; }
.blue  { color: #0000ff; }
.green { color: #008000; }
.yellow    { color: #B8860B; }
.olive     { color: #808000; }
.goldenrod { color: #B8860B; }

/* Linke Abstände */
.ml10 { margin-left: 10mm; }
.ml18 { margin-left: 18mm; }
.ml26 { margin-left: 26mm; }

/* Rechter Abstand */
.mr10 { margin-right: 10mm; }
.mr18 { margin-right: 18mm; }

/* Obere Abstände */
.mt30  { margin-top: 30mm; }
.mt45  { margin-top: 45mm; }
.mt60  { margin-top: 60mm; }
.mt90  { margin-top: 90mm; }
.mt120 { margin-top: 120mm; }

/* Untere Abstände */
.mb30  { margin-bottom: 30mm; }
.mb45  { margin-bottom: 45mm; }
.mb60  { margin-bottom: 60mm; }
.mb90  { margin-bottom: 90mm; }
.mb120 { margin-bottom: 120mm; }

/* Anwendungsbeispiel <p class="ml18 mr10 mt30 fs20 red">Mein Text</p> Man darf mehrere Klassen auf einmal anwenden, aber natürlich keine, die sich widersprechen. */

#ueberschrift {
	color: red;
}

#ausgabe {
    white-space: pre-wrap;
	color: blue;
}