Damit herumprobieren ist eine sinnvolle Sache, so ist es gedacht ;o)
Grundkenntnisse in (X)HTML braucht man schon, um ein
Dokument sinnvoll zu strukturieren.
Der angesprochene Unterschied von id und class liegt darin, daß
man mit class grob gesprochen Elemente Klassen zuordnen
kann, wobei mehrere Elemente zu einer Klasse gehören können
und auch ein Element zu mehreren Klassen gehören kann.
Der Wert von class ist dann also der Name der Klasse, der bei
einer guten Struktur einen Hinweis auf dieselbe gibt, etwa wie
bei meinem Beispiel ‘kopf’, ‘inhalt’ , ‘fuss’, ‘menu’.
Mit dem Attribut id werden Elemente identifiziert, bei meinem
Beispiel etwa die Kapitel oder Abschnitte, damit man sie z.B. im
Menü direkt ansteuern kann.
Dann werden auch noch Elemente dekoriert, weil sie eine
bestimmte Funktionalität haben, die im Namen des Elementes
selbst steckt. Anders als die Zuordnung per class ist das eine
inhaltlich sehr wichtige Zuordnung, weil die unabhängig von der
konkreten Dekoration verständlich ist und Bedeutung hat.
Erst wenn es keine Elemente gibt, die Bedeutung einer benötigten
Struktur haben, verwendet man div mit einem Attribut class mit
eigenen Klassen.
Als konkreten Ansatz solltest du vielleicht einfach erstmal ein
Dokument erstellen, was die von dir gewünschten
Grundstrukturen aufweist.
Typisch sowas hier:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Projekttitel</title>
<style type="text/css">
</style>
</head>
<body>
<div class="kopf">
<h1>Projekttitel</h1>
</div>
<div class="inhalt">
<div class="kapitel"><h2>Kapitelüberschrift</h2>
<p>...</p>
<p>...</p>
</div>
<div class="kapitel"><h2>Kapitelüberschrift</h2>
<p>...</p>
<p>...</p>
</div>
</div>
<div class="menu">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="fuss">
...
</div>
<body>
</html>
Wenn da, wo hier ‘…’ steht, relevanter Text drin steht, umso
besser, kann man sich eher vorstellen, wie das dann aussehen
wird, wenn das Projekt inhaltlich fertig ist.
Und dann fügst du zum Herumprobieren in das Element style im
Element head CSS-Anweisungen ein, erstmal mit verschiedenen
Farben und Rahmen für die verschiedenen Elemente und Klassen.
Z.B. div.kopf h1 {color:blue; backround:red;border:thin solid yellow}
Wenn das klappt, hast du doch offenbar verstanden, wie du diese
Elemente und Strukturen dekorieren kannst.
In einem zweiten Schritt kannst du dann versuchen, dort zusätzlich
oder alternativ zu Farbe und Rahmen Angaben zur Positionierung
zu notieren.
Dieser Artikel hier geht ja auch eher schrittweise vor, wie man
so eine Dekoration für ein konkretes Beispiel angehen kann, ist
vermutlich hilfreicher, als ein fertiges Beispiel:
hoffmann.bplaced.net/hilfe.php?m … =csserstes