Projekt: Design der Schrift

Design definieren über CSS

Hier kommt der Teil, der viel Zeit spart - besonders dann, wenn der Tag kommt, an dem einem die alte Seite nicht mehr gefällt und man zum Renovieren übergeht.

Über CSS kann sehr bequem ein Design in einer einzigen Datei erstellt werden, das für alle Seiten gilt.

Nachgeschlagen werden kann unter
Fortgeschrittene -> Cascade Style Sheet

Damit diese Datei in jeder HTML-Seite berücksichtig wird, muss jeder HTML-Seite deren Existenz und Lage mitgegeben werden. Dazu kommt folgender Code rein.

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

<body>  
<table bgcolor="yellow" height="100%" cellpadding="10" border="1" >    
<tr>        
  <!--  Logo -->        
  <td width="175" valign="top">
     <img src="schach_logo.jpg" width="175" height="137" border="0" alt=""> 
     Adresse <br />       
     <br />        

    <!--  Steuerung -->        
    <a href="index.htm"> Startseite  </a>       
    <br>       
    <a href="termine.htm"> Termine  </a>       
    <br>        
    <a href="mitglieder_neue.htm"> mitspielen?  </a>       
    <br>       
    <a href="lageplan.htm"> Lageplan  </a>       
    <br>        
    <a href="kontakt.htm"> Kontakt  </a>       
    <br>       
    <a href="impressum.htm"> Impressum  </a>      
  </td>      

  <td width="*" >        
    <h1>Ihr Schachverein sagt gut Brett</h1>        

    <p>Und nun kommt der Inhalt - ein bisschen kreativer       
    wie ich sollte es schon sein ....</p>        

    <p>Am besten mehrere Absätze, das sieht dann nach       
    mehr aus - also mit den Absätzen nicht sparen!
    </p>       
  </td>
</tr>
</table>  

</body>
</html>

Und nun benötigen wir eine leere Datei mit dem Namen "design.css"

Hinweis: Die Datei hat die Endung .css und NICHT .htm oder so!

In die Datei schreiben wir nun folgende Zeilen:

h1 { color: darkmagenta; letter-spacing: 3;} 
p  { color: gray; }

Die Ausgabe im Browser sieht wie folgt aus: Ansicht im Browser

vorheriges Kapitel: Text drauf
nächstes Kapitel: Domainnamen
Text draufSeitenanfangDomainnamen
eBook HTML-Seminar.de
del.icio.usMister Wong         Text draufSeitenanfangDomainnamen
© 2000-2010 Axel Pratzner • www.html-seminar.de • Stand 22.06.2010
Wir freuen uns über Weiterempfehlungen und Links zu www.html-seminar.de