CSS text not changing color
Question
So when I tried to put a white color on some text it did not change in the browser. When I user inspect on google chrome it shows that the text is "color: rgb(34, 34, 34);" When in the code I put "color:white;"
HTML:
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
CSS:
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
7 answers
solution1
3 ACCPTED 2016-09-09 02:13:30
It could be a caching issue.
Alternatively, there might be a rule within your CSS (or another style sheet) that defines the style of the element after you change the color to white.
When you inspect it, where is the "color: rgb(34, 34, 34);" style defined from? Is it defined from the #features-text h1 that you've written, or is it being defined by another rule, elsewhere in the stylesheet (or another stylesheet?) If it's being defined elsewhere - find out where and make sure this rule isn't overwriting the style you've defined.
Or, if it's being applied by a style sheet that you can't access/edit and you need to define it in your style sheet specifically, try using:
#features-text h1 {
color: white !important;
}
solution2
1 2016-09-09 02:04:14
Well here it works try to set it important maybe something else in your code overwrites it
body{background: gray;} #features { background: url("img/server-room.jpg") no-repeat center; background-size: cover; position: relative; height: 70%; z-index: 99; } #features-filter { position: absolute; background: url("img/dot.png") repeat; z-index: 999; width: 100%; height: 100%; } #features-text { position: absolute; z-index: 999; } #features-text h1 { color: white !important; }
<div id="features"> <div id="features-filter"></div> <div id="features-text"> <h1>Features</h1> </div> </div>
solution3
1 2016-09-09 02:04:30
Something like this should do it. Obviously I changed the color to blue.
<!DOCTYPE html>
<html>
<head>
<div id="features">
<div id="features-filter"></div>
<div id="features-text">
<h1>Features</h1>
</div>
</div>
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: blue;
}</style>
</html>
solution4
1 2016-09-09 02:40:02
Its always better to use Hex Code instead of color name. This way, you make sure every browser supports your code:
#features-text h1 {
color: #FFFFFF !important;
}
Cheers
solution5
1 2016-09-09 03:10:13
Wrap your css code in style tags, then it'll work.
<style>
#features {
background: url("img/server-room.jpg") no-repeat center;
background-size: cover;
position: relative;
height: 70%;
z-index: 99;
}
#features-filter {
position: absolute;
background: url("img/dot.png") repeat;
z-index: 999;
width: 100%;
height: 100%;
}
#features-text {
position: absolute;
z-index: 999;
}
#features-text h1 {
color: white;
}
</style>
solution6
1 2016-09-09 03:32:20
You can change text color by using this css code
h1{
color:#FFF;
}
solution7
0 2016-09-09 03:52:10
try hex code and add !important :
h1{
color:#FFFFFF !important;
}
the hex code have a RGB value. it's like RR-GG-BB.
On normal number, it's count like this: 0123456789
You can count hex number like this: 0123456789ABCDEF
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.