How to set a background color for each one of the tabs?

How to set a background color for each one of the tabs?

Hi guys,

I'm a newbie in HTML and CSS and want to change the color of the second tab in a JQuery UI tab, but I just can't figure out how to do it. I tried to search for a solution on similar posts on the forum but nothing seems to be working for me (or I simply don't understand how to do it).

I tried to implement this solution.
In CSS I'm overriding some options and created 2 classes to change the background color of my 2 tabs:

    ....
    #tabs .ui-tabs-nav .ui-state-active a {
        color: black;
        font-family:"Arial";
        font-weight:bold;
    }
    #tab1{
        background:orange;
    }
    #tab2{
            background:blue;
   }


 In HTML I have:

<div id="tabs">
<ul>
    <li id="tab1"><a href="#tabs-1"> First Tab</a></li>
    <li id="tab2"><a href="#tabs-2">Second Tab</a></li>
</ul>

However, this doesn't seem to work... Any ideas?

Thanks in advance for your help