Nick Nick - 2 months ago 16
CSS Question

Change Text Color CSS3

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 Source

.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.