Das etwas komplexere Beispiel ...
Ja, das ist wirklich auch dieselbe Seite mit denselben Dateien - man möchte es kaum glauben.
Der Unterschied besteht in der Formatierung der zwei <div>-Elemente und dem Wegfall einiger Formatierungen bzw. Eigenschaften. Natürlich ist die CSS-Datei dadurch eine andere.
Grenzt an Zauberei? Nein, und eigentlich nicht schwer ...
Schauen Sie sich den HTML-Code an - nur bei den Hyperlinks gibt es einen kleinen Unterschied, nämlich den senkrechten Strich und ein Extraformat für den Link der aktuellen Seite (id="current").
Um dieses Ergebnis per Hand, also ohne CSS, zu erreichen, müsste man selbst bei dieser winzigen Beispiel-Homepage, die gerademal aus fünf Dateien besteht, eine ganze Menge Tipp- und Kopierarbeit leisten.
Hier der Code aus der CSS-Datei - die Hauptunterschiede zum Beispiel 3 liegen in den Eigenschaften von div#links mit den darin enthaltenen Hyperlinks und in div#content:
div#links {
margin:15px 10px 10px 10px;
font:13px sans-serif;
}
div#links a {
text-align:center;
font:bold 1em sans-serif;
padding:10px;
margin:3px;
text-decoration:none;
color:darkgray;
}
div#links a#current {color:blue;}
div#links a:hover {color:darkred;}
div#content {
color:rgb(15,15,15);
font:13px Verdana, sans-serif;
padding:10px;
}
div#content p {margin:0 1em 1em;}
h1 {
margin:5px 5px 15px 0;
padding:10px;
text-align:right;
color:darkred;
border-bottom:3px double darkred;
letter-spacing:0.2em;
font:bold 25px sans-serif;
height:28px;
vertical-align:middle;
white-space:nowrap;
}
div#content a:link {color:darkslateblue;}
div#content a:visited {color:darkblue;}
div#content a:link:hover {color:blue;}
table {margin:0 0 1em 1em;}
td {
color:black;
font:12px sans-serif;
padding:5px;
border:1px solid #444;
}
.code1 {color:darkred; font:90% monospace; margin:0 0 15px 25px;}