CODEWITHSUNDEEP
htmlcss
Juicy
Juicy

Reputation: 12500

Font-size gets overwritten even with !important

I'm using the follow PHP to output some tags on my blog:

foreach ($tagvalues as $tag => $count) {
    $size = 12 + $count * 2;
    echo '<div class="tag" style=" font-size:' . $size . ' !important; "> ' . $tag . ' </div>';
}

Which results in this HTML on my blog:

...
<div class="tag" style=" font-size:14 !important; "> career </div>
<div class="tag" style=" font-size:16 !important; "> parenting </div>
...

As you can see I'm trying to set each tag's size according to the number of instances. The code output fines but all the tags appear the same size. When I look at it with developer tools in Chrome I see that the font-size attribute is overwritten by nothing! The font-size for these tags is not set anywhere else and I'm really puzzled as to why it's ignored/overwritten.

You can see my site here (need to click on My Blog to load tags)

Upvotes: 0

Views: 483

Answers (1)

Melvinr
Melvinr

Reputation: 534

You don't need the !important because of the CSS order precedence (you're applying inline styles). The problem is you're missing the px,

Eg. 

<div class="tag" style=" font-size:16px"> parenting </div>

Upvotes: 4

Related Questions