CSS Text Colour

Question

I have some text that I rotate and fade in. My problem is the text has no colour, and I would like to make it blue.

As you can see, I do assign a color attribute to the rubber class, but it does not seem to be taking effect.

Please can anyone advise how I can change my css to achieve this? Thank you

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
// fade-in
 .fade-in p {
  margin-top: 25px;
  text-align: center;
  animation: fadein 8s;
  -moz-animation: fadein 8s;
  /* Firefox */
  -webkit-animation: fadein 8s;
  /* Safari and Chrome */
  -o-animation: fadein 8s;
  /* Opera */
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-moz-keyframes fadein {
  /* Firefox */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes fadein {
  /* Safari and Chrome */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-o-keyframes fadein {
  /* Opera */
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}

<div class="rubber fade-in">
  <p>Job Offered</p>
</div>

@Justinas, thanks, I see it does work in jsfiddle. Perhaps some other element above this affecting it. Appreciate the help. — Richard, Nov 11 '16 at 07:54
Check the steps in my answer here to easily debug this kind of problems: http://stackoverflow.com/questions/40462112/button-size-inheritance-mystery/40462301#40462301 — Mattia Nocerino, Nov 11 '16 at 07:57
The exact same code seems to work on my machine, using chrome — pokeyOne, Nov 11 '16 at 07:59

score 3 · Accepted Answer · answered Nov 11 '16 at 07:57

Please replace // fade-in with /* fade-in */ . In css to add comment line you should use /* comment here */

Here is the working code

.rubber {
  padding: 5px 2px;
  color: blue;
  font-family: 'Black Ops One', cursive;
  text-transform: uppercase;
  text-align: center;
  width: 155px;
  transform: rotate(-10deg);
}
/* fade in */
.fade-in  p{
    margin-top: 25px;
    text-align: center;
    animation: fadein 8s;
    -moz-animation: fadein 8s; /* Firefox */
    -webkit-animation: fadein 8s; /* Safari and Chrome */
    -o-animation: fadein 8s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity:0.8;
    }
}

<div class="rubber fade-in"><p>Job Offered</p></div>

thank you. I think my problem is with some other element in the DOM affecting it. I have tried this with now success though: `color: blue !important;` — Richard, Nov 11 '16 at 08:03

Vinod kumar G · Answer 2 · 2016-11-11T08:04:32.963

1

I tried your code in jsfiddle as well as it normal HTML page. Only problem was with the comment in css style tag use this format

/ Shift+8 comment Shift+8/

edited Nov 11 '16 at 08:04

answered Nov 11 '16 at 08:00

Vinod kumar G

639
6
17

Please proof-read your post. – Nov 11 '16 at 08:02
Please update your answer. Syntax for css comment is not /comment/ right way is /*comment*/ – Sa Si Kumar Nov 11 '16 at 08:03

CSS Text Colour

2 Answers2