Hallo zusammen,
ich habe eine Sidebar auf meiner Seite, die Links formatiert darstellt mit folgendem Code:
HTML-Code:
#sideBarRight a {
text-decoration: none;
font-weight: bold;
font-size: 13px;
color: #516168;
}
In dieser Sidebar möchte ich unter anderem ein Widget mit einer Wortwolke (Tagcloud) einbinden, welches Link-Elemente beinhaltet, die wiederum jeweils eine Klasse mit einer bestimmten font-size beinhalten.
So soll der ungefähre Html-Code aussehen:
HTML-Code:
<div class="widget">
<div class="widgetHeader">
Meistgesucht in...
</div>
<div class="widgetCloud">
<a href="#" class="size1">Bielefeld</a>
<a href="#" class="size2">Hamburg</a>
<a href="#" class="size3">München</a>
<a href="#" class="size4">Leipzig</a>
<a href="#" class="size5">Köln</a>
</div>
</div>
Und so in der Art (es funktioniert ja so nicht) sollte die Formatierung der Link-Klassen aussehen:
HTML-Code:
a.size1 {font-size:1.1em}
a.size2 {font-size:1.3em}
a.size3 {font-size:1.5em}
a.size4 {font-size:1.7em}
a.size5 {font-size:1.9em}
Leider wird die font-size von obigem CSS-Code überschrieben - wie kann ich das vermeiden oder gibt es generell einen besseren Ansatz?
Danke schon einmal im Voraus!