Cascading Stylesheets Staffelbare Formatvorlagen sind eine direkte Erweiterung von HTML und gestatten eine exaktere Gestaltung einer Webseite. Seit 1998 ist CSS 2 weltweit gültiger Standard. Es gibt 3 Möglichkeiten!

Inline-Stylesheet: Überschrift Einmalige Veränderung! Die Formatierung erfolgt in einem Tag und wird mit "style" eingeleitet

Zentrale Formatierung h3 {color: blue;font- size:36pt} Eingebettetes Stylesheet Zentrale Stelle nach Formatierung gilt für alle h3

1. Externes Style Sheet Die Dateien werden mit einem Texteditor (z. B. Notepad) erstellt und mit der Dateiendung.css abgespeichert. Der Link wird dann im Kopf zentral angegeben. Hier heißt die Datei meinformat.css Beispiel: Titel Bietet den Vorteil der zentralen Änderung durch Änderung von meinformat.css

* { font-size:14px; color:#ff0000;} Universal-Selektor Universal-Selektoren verknüpfen jedes vorhandene Element mit Stylesheetangaben.

h1 { font-size:14px; font-style:italic; } p {color:#ff0000;} Typ-Selektoren verknüpfen ein HTML-Tag mit einer Formatierung.

body { background-image : url(bilder/koch.gif); background-repeat : no-repeat; background-color : Lime; background-position : top; font-family : Helvetica, Verdana, sans-serif ; } Typ-Selektoren Formatiert alles, was innerhalb von steht!

div { font-family : Helvetica, Verdana, sans-serif ; position : absolute; top : 80px ; left : 50px; } Diese Formatierung wirkt zwischen Typ-Selektoren

a:hover { color : oldlace ; background-color : #009 ; } Bewirkt einen Hoover-Effekt bei Links Typ-Selektoren

.rot{color:#ff0000;}.ul {text-decoration:underline}.fett{font-weight:bold} Ein roter Text Ein fetter Text Ein unterstrichener Text Ein Text, rot und unterstrichen Ein Text, fett und unterstrichen Ein Text, rot, fett und unterstrichen Class-Selektoren

a.zurueck { color : #009 ; text-decoration : none ; border: outset; } h1 { color : #900 ; margin-left : 50px; } a.zurueck { color : #009 ; text-decoration : none ; border: outset; } Class-Selektoren HTML: <a class = “zurueck“ href="../index.htm">zur Titelseite

a { padding:10px 30px; border: 3px solid Red; font-family:Arial, sans-serif; font-weight:normal; color: #DA70D6; text-decoration:none; background-color: #FFD700; } a:hover { border-right:2px solid #000000; font-weight:bold; color: Black; background-color:#FF6600; } Anwendung einfacher Typselektoren

Aufgabe Formatiere dann das Kochbuch zentral mit einem externen Stylesheet! Arbeite die PP-Päsentation noch einmal durch!