I am trying to understand css logic -- and a Bootstrap Tab Control sample project at jsfiddle is using bootstrap-combined.min.css which contains several .active listings. Here is a sample of the project code that is confusing me:
...
Both Home and Regular link are referenced by class=active and href="#". Obviuosly these are different .active classes. I am thinking that each tab is under a different super css class and that is how the different class=active are distinguished, but I am not sure about that because the background-color for each tab does not appear to be located with a respective .active. How do these tabs both have class=active but have different background colors?
here is the demo project at jsfiddle
The reason I want to know is (not just that I want to understand css better) because I want to modify these background-colors and should I modify bootstrap-combined.min.css or should I just create another css file and reference a different .active class there? or just add some css inside my project?