CODEWITHSUNDEEP
cssfontscolors
Robert Wiedeman
Robert Wiedeman

Reputation: 35

CSS: Font color wont change

I have a problem with my html file not using a font color defined in a CSS stylesheet. It seems to be partly working but it unfortunately doesn't do what I want it to do.

* {
  font-family: "verdana"
  color: #FFF;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.header {
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}

.bodytop {
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}

.bodybottom {
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}

.buttonbox {
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}
<htmL>

<head>
  <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
  <title></title>
</head>

<body>
  <div class="wrapper">
    <div class="header">
      <!--Header, the first 250px from the top-->
      <div class=bodytop>
        <!--upper part of the website-->
        <center>
          <div class="buttonbox">
            Dit is button3
          </div>
          <div class="buttonbox">
            Dit is button2
          </div>
          <div class="buttonbox">
            Dit is button1
          </div>
        </center>
        <div class=bodybottom>
          <!--Lower part of the website-->
        </div>
      </div>
    </div>
  </div>
</body>

</htmL>

The code seems to be working as the font is changed to Verdana but the color won't change.

Upvotes: 3

Views: 3461

Answers (3)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

It is because of specificity. You have set color for *, the universal selector. For specific elements you need to set the colour. Moreover, there's only one color, which is in the universal selector.

Also, your CSS has errors:

font-family: "verdana"
//--------------------^ No Semi colon.

* {
  font-family: "verdana"; /* Corrected */
  color: #FFF;
}

.wrapper {
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}

.header {
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}

.bodytop {
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}

.bodybottom {
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}

.buttonbox {
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}

Upvotes: 3

Martin
Martin

Reputation: 1226

Looks like your CSS is missing a semi-colon, it should be:

* {
    font-family: "verdana";
    color: #FFF;
}

Upvotes: 2

Jonathan
Jonathan

Reputation: 6537

You're missing a semi-colon after your font-family:

*{
  font-family: "verdana"; /* Missing this semi-colon. */
  color: #FFF;
}
.wrapper
{
  display: table;
  width: 100%;
  height: 100%;
  background-color: #000000;
}
.header
{
  display: table;
  float: left;
  background-image: url("header.jpg");
  width: 100%;
  height: 250px;
  vertical-align: top;
}
.bodytop
{
  display: table;
  clear: both;
  background-image: url(images/header.jpg);
  width: 100%;
  vertical-align: top;
  background-color: #444444;
}
.bodybottom
{
  display: table;
  width: 100%;
  vertical-align: top;
  background-color: #666666;
}
.buttonbox
{
  display: table;
  width: 150px;
  height: 150px;
  background-color: #888888;
  vertical-align: middle;
  margin: 15px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <title></title>
</head>
<body>
<div class="wrapper">
<div class="header">
<!--Header, the first 250px from the top-->
    <div class=bodytop>
    <!--upper part of the website-->
        <center>
        <div class="buttonbox">
        Dit is button3
        </div>
        <div class="buttonbox">
        Dit is button2
        </div>
        <div class="buttonbox">
        Dit is button1
        </div>
        </center>
    <div class=bodybottom>
    <!--Lower part of the website-->
    </div>
    </div>
</div>
</div>
</body>
</html>

Upvotes: 3

Related Questions