Wissen, was gut ist. Studieren in Chemnitz.

Vordefinierte CSS-Formate

Die folgenden Stile und Formate sind im zentralen StyleSheet des Corporate Designs der TU vordefiniert und für Sie als Autor nutzbar.

Standard-Überschriften

<h1> Überschrift ist eine Schrift, die drüber steht</h1>

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h2> Überschrift ist eine Schrift, die drüber steht</h2>

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h3> Überschrift ist eine Schrift, die drüber steht</h3>

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h4> Überschrift ist eine Schrift, die drüber steht</h4>

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

Klassen für "besondere" Überschriften

<h1 class="titel">

<h2 class="titel">

<h3 class="titel">

<h4 class="titel">

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h1 class="linie">

<h2 class="linie">

<h3 class="linie">

<h4 class="linie">

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h1 class="tipp">

<h2 class="tipp">

<h3 class="tipp">

<h4 class="tipp">

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h1 class="teaser">

<h2 class="teaser">

<h3 class="teaser">

<h4 class="teaser">

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

<h1 class="topics">

<h2 class="topics">

<h3 class="topics">

<h4 class="topics">

Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.

Zentrierung durch zusätzliche Klasse center:

<h1 class="titel center">

Besondere Hervorhebungen im Text

Prinzipiell identisch auch Abschnitte und Absätze:

<div class="linie">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>
<div class="tipp">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>
<div class="topics">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>
<div class="block">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>
<div class="teaser">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>
<div class="teaser2">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</div>

Statt <div> geht natürlich auch <p>, um Abstände vor und nach den Absätzen zu erhalten. Z. B.:

<p class="topics">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</p>

<p class="teaser">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</p>

<p class="teaser2">
Ein Link! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Voll fett! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen. Ein Link im Text! Fülltext ist Text, der dazu da ist, ansonsten leere Flächen mit Buchstaben beliebiger Art zu füllen.
</p>

<div class="achtung">

Achtung - unbedingt beachten!

<strong>Eine Warnung ist ein wichtiger Warnhinweis! </strong> Eine Warnung ist ein wichtiger Warnhinweis! Link Eine Warnung ist ein wichtiger Warnhinweis! Eine Warnung ist ein wichtiger Warnhinweis!
</div>

<div class="hinw">

Zur freundlichen Beachtung:

Ein Hinweis ist ein wichtiger Tipp! <strong>Ein Hinweis ist ein wichtiger Tipp! </strong> Link Ein Hinweis ist ein wichtiger Tipp! Ein Hinweis ist ein wichtiger Tipp!
</div>

Tabellen

Normal ohne spezielle Auszeichnung:

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link

<table class="ohne">

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link

<table class="horizontal">

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link

<table class="vertikal">

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link

<table class="gitter">

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link

Mit der Klasse zeile lassen sich Tabellenzeilen farbig abwechselnd unterlegen (kombinierbar mit allen o.g. Tabellenklassen), z.B. <table class="ohne zeile">

Tabellenkopf <th> Link Tabellenkopf <th> Link Tabellenkopf <th> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link
Tabellenzelle <td> Link Tabellenzelle <td> Link Tabellenzelle <td> Link