Why won't my CSS classes load? - html

Question

My PHP looks like this (it's in a while loop) :
print"<li>
<a class='topcategory' href='index.php?category=$encode'>$category[name]</a>
</li>";
My CSS looks like this:
.topcategory {
display: block;
float: right;
height: 20px;
padding: 10px 20px 0 20px;
border: none;
font-size: 85%;
font-weight: bold;
color:#333;
text-decoration:none;
text-align:center;
}
But it doesn't affect my <a> tag at all, why?
(later edit) ---> Weird, it seems it spontaneously started working after 10 minutes of just looking on the code and refreshing even though i didn't do anything

Answer 1

All my examples assume HTML of...
<li>
Example
</li>
When you are writing your CSS, the order of the style rules matters, so if you have rules like this...
.topcategory {
color: red;
}
a {
color: blue;
}
CSS follows your order and the rule for "a" will override your rule for ".topcategory".
You can solve this in a few ways, but the easiest is to declare rules in order of generality / specificality, so declare your most general rules first, then declare rules in a more specific way later...
In this example, we start by declaring really general tag names, then slightly more specific tag names, then very specific tag names, then class names and finally ids. Using this order means that the cascading nature of CSS will apply the most specific rule to your element.
body {
color: Silver;
}
div {
color: Orange;
}
p {
color: Yellow;
}
a {
color: Blue;
}
.topcategory {
color: red;
}
.topcategory span {
color: black;
}
#someid {
color: Aqua;
}
#someid span {
color: Green;
}
You can override the cascade by using !important - but it is much easier to maintain if you declare your rules in the right order instead.

Answer 2

It's not weird at all. It's the browser cache. It is very common with CSS files, so from now on, be sure you check that first.

Answer 3

li a.topcategory {
display: block;
float: right;
height: 20px;
padding: 10px 20px 0 20px;
border: none;
font-size: 85%;
font-weight: bold;
color:#333;
text-decoration:none;
text-align:center;
}
If you have defined another rule for a tags elsewhere in your CSS, then this rule will overwrite those and force the priority of this class over a tags with the class topcategory.

Answer 4

Try this
print "<li>
<a class='topcategory' href='index.php?category=".$encode."'>".$category['name']."</a>
</li>";
<style>
.topcategory {
display: block !important;
float: right !important;
height: 20px !important;
padding: 10px 20px 0 20px !important;
border: none !important;
font-size: 85% !important;
font-weight: bold !important;
color:#333 !important;
text-decoration:none !important;
text-align:center !important;
}
</style>