title: how to change tab pane color in html/css?
body: <p>I want to change the default colour (blue) of tab-pane.</p>
  
  <p>I want when a user clicks on any tab it will become "orange" and rest of the tab colour will remain "gray".</p>
  
  <p>I am trying the below code:</p>
  
  <pre><code>&lt;!-- Nav tabs --&gt;
  &lt;ul class="nav nav-tabs" role="tablist"&gt;
  &lt;li class="nav-item"&gt;
   &lt;a class="nav-link active" data-toggle="tab" href="#menu1" style="color:orange"&gt;Description&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
   &lt;a class="nav-link" data-toggle="tab" href="#menu2" style="color:gray"&gt;Product Reviews&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
   &lt;a class="nav-link" data-toggle="tab" href="#menu3" style="color:gray"&gt;Specifications&lt;/a&gt;
  &lt;/li&gt;
  &lt;li class="nav-item"&gt;
   &lt;a class="nav-link" data-toggle="tab" href="#menu4" style="color:gray"&gt;Warranty&lt;/a&gt;
  &lt;/li&gt;
  
  &lt;/ul&gt;
  
  
  &lt;!-- Start Tab panes --&gt;
  &lt;div class="tab-content"&gt;
  
  &lt;!-- Start Tab Pane Menu 1 --&gt;
  &lt;div id="menu1" class="container tab-pane active" style="color:orange"&gt;&lt;br&gt;
   &lt;p&gt;Hello Description!&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- End Tab Pane Menu 1 --&gt;
  
  
  &lt;!-- Start Tab Pane Menu 2 --&gt;
  
  &lt;div id="menu2" class="container tab-pane fade" style="color:orange"&gt;&lt;br&gt;
   &lt;p&gt;Hello Product Reviews!&lt;/p&gt;
  &lt;/div&gt; &lt;!-- End Second Container --&gt;
  
  &lt;!-- End Tab Pane Menu 2 --&gt;
  
  &lt;!-- Start Tab Pane Menu 3 --&gt;
  
   &lt;div id="menu3" class="container tab-pane fade" style="color:orange"&gt;&lt;br&gt;
     &lt;p&gt;Hello Store Info!&lt;/p&gt;
   &lt;/div&gt; &lt;!-- End Second Container --&gt;
  
  &lt;!-- End Tab Pane Menu 3 --&gt;
  
   &lt;!-- Start Tab Pane Menu 4 --&gt;
  
   &lt;div id="menu4" class="container tab-pane fade" style="color:orange"&gt;&lt;br&gt;
     &lt;p&gt;Hello Store Reviews!&lt;/p&gt;
   &lt;/div&gt; &lt;!-- End Second Container --&gt;
  
   &lt;!-- End Tab Pane Menu 4 --&gt;
  </code></pre>
  
  <p></p>
  
    
  
  <p>I have clicked "product reviews" tab in image below. But the color remains "gray" instead of "orange"</p>
  
  <p>After I clicked "product reviews" tab the color of the "description" tab has not changed to "gray" and it is still showing "orange"</p>
  
  <p><a href="https://i.stack.imgur.com/qsmxR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qsmxR.png" alt="enter image description here"></a></p>
  
  <p>what am I doing wrong?</p>