CODEWITHSUNDEEP
htmlcssfontsfont-facecss-specificity
X3N4
X3N4

Reputation: 5

Font color not changing despite lack of overriding CSS specifiers

I learned recently that CSS properties can be overridden if another selector contains more specificity. The problem however is that I was only applying one property, the font color, to the body of my page, yet it still does not register.

The basis of my issue lies in the fact that I cannot find any characteristic of my CSS code that would somehow override the font color I have applied to the body. Here is my code:

body {
 background: url(https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6726719ee78dabe78033950d9f3f7145&auto=format&fit=crop&w=1650&q=80);
 background-size: cover;
 background-position: center;
 font-family: 'Exo';
 color: white;
}

#content {
 text-align: center;
 padding-top: 25%;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div id="content">
        <h1>Student Union for Purposeful Education</h1>
        <h3>Learning <em>by</em> students, <em>for</em> students.</h3>
        <hr>
        <button class="btn btn-default btn-lg">Get Started!</button>
      </div>
    </div>
  </div>
</div>

Is there some specifier that's overriding the white font color that I'm not taking into account?

Upvotes: 0

Views: 7579

Answers (1)

Abslen Char
Abslen Char

Reputation: 3135

You need to use !important to overide the default value of the color set by bootstrap HTML

  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css?family=Exo" rel="stylesheet"/>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div id="content">
            <h1>Student Union for Purposeful Education</h1>
            <h3>Learning <em>by</em> students, <em>for</em> students.</h3>
            <hr>
            <button class="btn btn-default btn-lg">Get Started!</button>
          </div>
        </div>
      </div>
    </div>

CSS

 body {
     background: url(https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6726719ee78dabe78033950d9f3f7145&auto=format&fit=crop&w=1650&q=80);
     background-size: cover;
     background-position: center;
     font-family: 'Exo';
     color: white !important;
    }

    #content {
     text-align: center;
     padding-top: 25%;
    }

here is the codepen

https://codepen.io/anon/pen/LQaKzb

Upvotes: 2

Related Questions