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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Vorwort

Bitte unterstützen

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

E-Books zum Kurs
von HTML-Seminar.de
E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

Mehr Details

Projekt: Design der Schrift

Design definieren über CSS

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

E-Books zum Kurs