Präsentation und Layout mit Cascading Style Sheets (CSS)

Individuelle Style Sheet Regeln

<p style="font-size: 12pt; color: red">... </p>

Dokumentweite Style Sheet-Regeln

<head>
<title>
Mein Titel</title>
<style type="text/css" [media="all|print|..."]>
selector {Declarations}
...
<style>
<head>

Dokumentübergreifende Style Sheet-Regeln in verknüpften, externen Dateien (link)

<head>
<link href="datei.css" rel=stylesheet" type="text/css" />
...
</head>

Differenzierte Style Sheet-Anweisungen mit dem Attribut class (Klassen-Selektoren)

<html>
<head>
<style type="text/css">
p {font-size: 10pt; text-align: justify}
p.moreimportant {font-style: italic}
p.mostimportant {font-size: 12pt; color: red}
...
</style>
...
</head>
<body>
 
<p class="moreimportant">
Das ist ein ziemlich wichtiger Absatz...</p>
 
<p class="mostimportant">
Das ist ein furchtbar wichtiger Absatz, der noch wichtiger als ziemlich wichtig ist...</p>
 
</body>
</html>
 
Beispiel

Differenzierte Style Sheet-Anweisungen mit dem Attribut id (ID-Selektoren)

<html>
<head>
<style type="text/css">
#myid {font-size: 18pt; color:blue}
...
</style>
...
</head>
<body>
 
<h1 id="myid">
Neue Entwicklungen</h1>
 
</body>
</html>
 
Beispiel

Pseudo-Klassen und dynamische Effekte mit CSS:

a:link { declarations } - Formatierung von Links
a:visited { declarations } - Formatierung von besuchten Links
a:active { declarations } - Formatierung von aktivierten Links
a:hover { declarations }
 
 
 
Beispiel für ein Seitenlayout mit Tabellen und CSS

Weiterführende Literatur:

Layout mittles CSS
Buttons mit CSS