Change Text Color CSS3

Question

I am trying to change the text color of this link, I am using a twitter bootstrap template. I can change the size, font, padding, and background color of this text but I cannot change the text color it's self. I am also using a font I got online.

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
            @Html.ActionLink("Fat", "Index", new { controller = "Home" }, new { @class = "navbar-brand" })<br />
            @Html.ActionLink("Savage", "Index", new { controller = "Home" }, new { @class = "navbar-brand" })
        </div>

CSS:

.navbar-brand {
    font-family: 'TribecaRegular';
    color: green;
    font-size:xx-large;
    padding-right: 150px;
}

the font color is always grey never anything else.

Answer 1

.navbar-brand is colored by bootstrap.

The rule used by bootstrap is .navbar-default .navbar-brand {...}

So you need to create an equal or higher specificity rule

.navbar-default .navbar-brand {
    font-family: 'TribecaRegular';
    color: green;
    font-size:xx-large;
    padding-right: 150px;
}

The above will work if it is placed after the bootstrap rule.

Or you could define it with .navbar-default a.navbar-brand so that it is used regardless of where you place the rule.