Dieses Tutorial ist im Prinzip eine Erweiterung zu diesem.
Ich werde oft gefragt, wie man denn jetzt dieses oder jenes Element stylen kann. Weil das eigentlich gar nicht mal so schwierig ist das zu verstehen, schreib ich mal auf wie ich das mache.

So Seiten wie myblog.de, aber auch Wordpress spucken manchmal durch einen php-Befehl oder ähnliches vorgefertigtes HTML aus. Weil das aber meistens in seiner "Rohform" unansehnlich ist, will man so was natürlich verschönern. Dazu nimmt man sich dann einfaches CSS

Ich gehe mal verschiedene Beispiele durch:

Code mit Klassen und IDs
<ul id=navi">
<li class="categories">
<h1>Kategorien</h1>
<ul>
<li class="cat-item cat-item-1">
<a href="http://www.url.de">Link 1</a>
</li>
<li class="cat-item cat-item-2">
<a href="http://www.url.de">Link 2</a>
…

So, das hat man mir vor die Füße geworfen und ich möchte jetzt die Links hier anders als meine normalen Links aussehen lassen, aber wie komm ich da dran?
Um besser zu veranschaulichen wie das funktioniert, liste ich mal alles auf was man denn in diesem Fall so in die CSS schreiben kann:

ul#navi li.categories ul li.cat-item a {
color:#000;
font-size:2em;
...}

Hups, Fehlt da nicht das h1? Nein, es wird nur jedes Element, welches die Links umschließt (also nicht vorher mit </ … > endet) benannt.
Wenn die Elemente eine Klasse oder ID haben, steht das Element wie z.B. ul immer vorne, dann kommen Punkt oder Raute, je nachdem ob es sich jetzt um Klasse oder ID handelt, und zum Schluss der jeweilige Klassen- oder ID-Name.
Hier hätte es jetzt auch weniger CSS getan, weil diese cat-item-Klassen sonst nirgends anzutreffen sind. Und weil weniger meist viel besser ist:

.cat-item a {
color:#000;
font-size:2em;
...}

So hätt’s auch gereicht.


Manchmal aber, zum Beispiel bei myblog.de steht das Styling direkt im HTML-Tag und da kommen wir so nicht weiter, wir müssen ein bisschen Tricksen.

Code Beispiel
<table border="0" class="inhaltetable" width="420" cellspacing="1" cellpadding="3">
...
<tr>
<td width="100%">
<table border="0" style="BORDER-TOP: #f2f2f2 1px dotted;" width="100%" cellspacing="3">
…

(Schreckliches Coding, by the way)
So, ich will aber nicht, dass diese eine Tabelle da einen gepunkteten Rand hat, aber mit der Methode von oben ändert sich nichts! Das liegt daran, dass direkt im HTML-Tag gestylte Elemente „wichtiger“ sind als unsere CSS im head-Bereich. Um das zu erreichen schreiben wir etwas hinter den Befehl:

.inhaltetable table {
border-top: none !important;
}

Durch das !important wird der Befehl im HTML-Tag überschrieben :)

Ich hoffe alles ist verständlich und ich hab genug Beispiele genannt, sonst mach ich gerne noch welche.