How to output separate CSS to a separate category in DLE ?

Question

css

Good afternoon, gentlemen, here is an idea to diversify the site a bit (CMS DLE). There are let's say categories: "News" "Games" and let's say "Reviews". By default it outputs from

.news .category
background: #fd5559;

It applies to all categories, of course, as to "News":

So, let's say the category "Reviews":

So here's the question:
How to make it so that there is one color for the "News" section, and a completely different one for the "Reviews" section? .

Answer 1

Something like this:

.category {background: #ccc;}
.category.news {background: #f96;}
.category.hitech {background: #00f;}
.category.rewiew{background: #0f0;}

Answer 2

@abdurahmanich
And what about the default ?:
The style that is displayed:

.news .category {
    float: left;
    background: #fd5559;
    min-width: 37px;
    height: 32px;
    padding: 0 10px 0 10px;
    line-height: 30px;
    margin-left: 0px;
    width: 67px;
    text-align: center;

Answer 3

Can you link to the site, very interesting

Answer 4

@abdurahmanich I still can't figure out how to implement it. After all, the content of the category menu is like this (menu.tpl file):

<ul class="topmenu" id="topmenu">
    <li>
        <a href="/" title=" Главная"><img src="{THEME}/images/logo.png" width="230" height="45" /></a>          
        <a href="news" title="TEST"><b>НОВОСТИ</b></a>
        <a href="internet" title="Internet"><b>ИНТЕРНЕТ</b></a>
        <a href="science" title="Наука"><b>НАУКА</b></a>
</ul>

And you need what would be displayed in the shortstory.tpl file . And in this file is the same standard <div class="category">{link-category}</div>with CSS:

.news .category {
    float: left;
    background: #fd5559;
    min-width: 37px;
    height: 32px;
    padding: 0 10px 0 10px;
    line-height: 30px;
    margin-left: 0px;
    width: 67px;
    text-align: center;

Here is the desired result: