How to change TAB color in bootstrap

Question

I want to change the color of when a tab is selected, it is blue, I want to change to black, I also want to change the color of the letters inside the tab, when they are not selected, to gray. How should I proceed? I’ll leave a link with the code I’m using to see: https://www.codeply.com/go/rv3Cvr0lZ4

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

<div class="container">
    <div class="row">

        <div class="col-md-6">
            <h3>Pills left</h3>
            <!-- tabs left -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-md-3">
                    <li><a href="#a" data-toggle="tab">One</a></li>
                    <li class="active"><a href="#b" data-toggle="tab">Two</a></li>
                    <li><a href="#c" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-md-9">
                    <div class="tab-pane active" id="a">Lorem ipsum dolor sit amet, charetra varius rci quis tortor imperdiet venenatis quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="b">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="c">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis elementum auctor accumsan. Duis pharetra
                    varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->
        </div>

        <div class="col-md-6">
            <h3>Pills right</h3>

            <!-- tabs right -->
            <div class="tabbable">
                <ul class="nav nav-pills nav-stacked col-sm-3 col-sm-push-9">
                    <li class="active"><a href="#d" data-toggle="tab">One</a></li>
                    <li><a href="#e" data-toggle="tab">Two</a></li>
                    <li><a href="#f" data-toggle="tab">Twee</a></li>
                </ul>
                <div class="tab-content col-sm-9  col-sm-pull-3">
                    <div class="tab-pane active" id="d">Lorem ipsum dolor sit amet, rci quis tortor imperdiet venenatischaretra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.</div>
                    <div class="tab-pane" id="e">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor rci quis tortor imperdiet venenatis. Aliquam in felis sit amet augue.</div>
                    <div class="tab-pane" id="d">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae. </div>
                </div>
            </div>
            <!-- /tabs -->

        </div>

    </div>
    <!-- /row -->
</div>

<hr>

Answer 1

In the code you sent you can use the following code:

.nav>li>a { // para todos os links
  color: gray;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover, 
.nav-pills>li.active>a:focus { // para hover e focus do elemento ativo
  background-color: #000; 
}

But I recommend you put a class in the parent of your tabs and put this before the rules in css to change only the place you want, if you want to overwrite all the bootstrap rules, you can use the top css.