Jeder erfahrene Foren- oder Homepagebesitzer kennt das Problem, wenn man sein Design etwas seinen Wünschen anpassen möchte ,reicht die Standarteinstellungsmöglichkeit bei Homepage- oder Forensoftwaren nicht aus.
Doch nachdem ihr einen Blick in in die CSS (Cascading Style Sheets) geworfen habt, wusstet ihr nicht was ihr tun sollt. Hier kommt ein kleiner Einblick in die Verwendung von CSS-Classes:

---

Der allgemeine Aufbau:

Selektor {
 Eigenschaft: Wert;
 Eigenschaft: Wert 
} 

Bei mehreren Eigenschaften muss zwischen jeder ein Semikolon! Beim letzten Element kann das Semikolon weggelassen werden.

Der Selektor bezeichnet entweder das zu selektierende Element vom einem bestimmten Typ, einer Class oder mit einer Id.

Was sind denn jetzt schon wieder Elemente, Class und Id?

Elemente: - entspricht im allgemeinen dem Namen, dem Selektor
Typ: - sind allgemein gültige Bezeichnungen, wie zum Beispiel a oder h1...
Anwendung:

a (Selektor) {
 font-color: #ffffff
}

Nun werden alle Elemente des Typs '<a>' mit der Schriftfarbe #ffffff (weiß) dargestellt.
Class: - Selektiert jedes Element der Klasse des angegebenen Selektors
Anwendung:

.top (Selektor) {
font-color: #ffffff
}

Wichtig!!!: Den Punkt vor dem Selektor nicht vergessen!
Nun wird die Schrift aller Elemente denen sie die Klasse 'top' zugewiesen haben weiß dargestellt.
Classen weißt man durch das Attribut 'class= (name des Slektors)' z.B. "<td class = 'top'></td>

Id: - Selektiert jedes Element mit der angegebenen Id.
Anwendung:

#top (Selektor) {
font-color: #ffffff
}

Wichtig!!!: Das '#' vor dem Selektor nicht vergessen.
Nun wird die Schrift aller Elemente denen Sie die Id 'top' zugewiesen haben weiß dargestellt.
Id's weißt man durch das Attribut 'id= (name des Slektors)' z.B. "<div id = 'top'></div>

Wenn man alle Elemente ansprechen möchte verwendet man '*'.
Anwendung:

* (Selektor) {
font-color: #ffffff
}

Nun wird jedes Element selektiert.

Mit dem nun erlangten Wissen können wir zum nächsten Schritt kommen:

Jetzt wollen Sie aber nur bestimmten a - tags ( <a> ) ein anderes Aussehen verpassen.

Also müssen wir nun Klassen und Typen verbinden:

Anwendung:

a.top (Selektor) {
font-color: #ffffff
}

Nun werden allen A-tags mit der Class top weiße Schriftfarbe zugeordnet.

---

Beziehung zu HPM:

Damit sie Die CSS direkt bearbeiten zu können, klicken Sie im Administratormenü den Punkt Layout und danach den Unterpunkt Farben & Schrift auswählen. Nun müssen Sie gegebenenfalls auf der erscheinenden Seite den Punkt "CSS direkt hacken" auswählen. Haben Sie dies getan wählen Sie nocheinmal den Punkt Farben & Schrift aus.
Wenn alles geklappt hat, müsste Sie nun ein ähnliche Bild sehen:

---

Wichtige CSS-Funktionen:

PADDING: - Legt den Abstand zwischen dem Inhalt und den Rändern fest. --> Innenabstand
Anwendung:

Selector {
padding:3px   //Innenabstand = 3 px
}

MARGIN: - Erzeugt einen transparenten Abstand zu einem anderen Element. -- Außenabstand
Anwendung:

Selector {
margin:3px   //Außenabstand = 3 px
}

Bei 'Margin' und 'Padding' können 4 Werte eingetragen werden.

Ein Wert:
Übernimmt den Abstand für oben, unten, links und rechts.
Zwei Werte:
Übernimmt der erste Wert den Abstand für oben und unten, der Zweite Wert für links und rechts.
Drei Werte:
Übernimmt der erste Wert den Abstand für oben, der Zweite für links und rechts und der Dritte für unten.
Vier Werte:
Übernimmt der erste Wert den Abstand für oben, der Zweite für rechts, der für Dritte unten und der für Vierte links.

---

BORDER: - Erzeugt einen Rahmen um ein Element.

Selector {
border:3px   //Rahmendicke = 3 px
}

Bei der Funktion 'Border' können 3 Werte gesetzt werden.
Ein Wert:
Übernimmt die Rahmendicke (Breite).
Zwei Werte:
Übernimmt der Erste die Rahmendicke und der Zweite die Rahmenart (solid - durchgezogen, dotted - gepunktet..).
Drei Werte:
Übernimmt der Erste die Rahmendicke, der Zweite die Rahmenart und der Dritte die Rahmenfarbe.

---

FONT-SIZE: - Gibt die Schriftgröße an.

Selector {
font-size:3px   //Schriftgröße = 3 px
}

FONT-COLOR: - Gibt die Schriftfarbe an.

Selector {
font-color:#ffffff   //Schriftfarbe = weiß
}

WIDTH: - Legt die Breite eines Elements fest.

Selector {
width:3px   //Breite = 3 px
}

HEIGHT: - Legt die Höhe eines Elements fest.

Selector {
height:3px   //Höhe = 3 px
}

Bei den Funktionen 'width', 'height', 'font-size' und 'border' müssen die Größen nicht in px angegebn werden, sondern können auch durch Prozentzahlen ersetzt werden.

COLOR: - Erzeugt die Vordergrundfarbe.

Selector {
color: #ffffff   //Vordergrundfarbe = weiß
}

BACKGROUND-COLOR / BACKGROUND-IMAGE: - Erzeuge die Hintergrundfarbe/ das Hintergrundbild.

Selector {
background-color: #ffffff   //Hintergrundfarbe = weiß
}

Selector {
background-image:url('http:// ihre Bilder Adresse ')   //Hintergrundbild
}

Zusätzliche Funktionen für BACKGROUND-IMAGE:

BACKGROUND-ATTACHMENT: - Bestimmt die Scrolleigenschaft des Hintergrundbildes, ob es beim Scrollen mit wandert oder seinen festen Standort beibehält.

Selector {
background-attachment: scroll   //Hintergrundbild scrollt mit
}

Selector {
background-image:fixed   //Hintergrundbild behält festen Standort
}

BACKGROUND-REPEAT: - Bestimmt, ob das Hintergrundbild über die gesamte Höhe und oder gesamte Breite wiederholt wird.

Selector {
background-repeat: no-repeat  //Hintergrundbild wird einmal dargestellt
}

Selector {
background-repeat: repeat   //Hintergrundbild wird über gesamte Höhe und Breite wiederholt
}

Selector {
background-repeat: repeat-x   //Hintergrundbild wird nur horizontal wiederholt
}

Selector {
background-repeat: repeat-y   //Hintergrundbild wird nur vertikal wiederholt
}

BACKGROUND-POSITION: - Legt die Position des Hintergrundbildes fest.

Selector {
background-position: left   //Hintergrundbild wird links angezeigt (center - mittig, right - rechts, bottom - unten, top - oben)
}

Es können auch genaue Angaben durch px oder % getroffen werden.