6

I can't set this CSS class, the color instruction doesn't work, but the text-shadow does. Help me?

.jumbotron {
    position: relative;
    padding: 40px 0;
    color: #6495ed;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}

I tried to delete the text-shadow, but it also didn't work.

6
  • What is your problem? It seems to work just fine in all my browsers. Here's a fiddle. The text is blue with a grey shadow. Jan 19, 2013 at 12:24
  • 1
    Try color: #6495ed !important
    – Wilq
    Jan 19, 2013 at 12:27
  • 1
    looks like css order issue
    – Peter
    Jan 19, 2013 at 12:31
  • 1
    If this doesn't work, then I suppose there's another conflicting style for that element.
    – NGLN
    Jan 19, 2013 at 12:31
  • 1
    Add your solution as an answer and accept it, so this question won't remain unsolved.
    – NGLN
    Jan 19, 2013 at 12:33

5 Answers 5

12

Use !important to override other color styling.

like: color: #6495ed !important

2
  • 1
    The !important may be dangerous because he apply this style to a class not an id. Be sure that it do not override things in an unexpected way.
    – Hieu Le
    Jan 19, 2013 at 13:32
  • It also adds to the rule weight and is slower for old browser's selector engines. Trumps should be done using the order of the cascade. The only time you should use important is to get around Mozilla's button padding bug from their default stylesheet.
    – Eric Harms
    Jun 4, 2015 at 20:25
0

I think the closing brace is missing. Put all the setting in .jumbotron class and give it a try. Good Luck.

I did a test about your CSS code like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Untitled</title>
    <meta name="author" content="" />
    <style>
    .jumbotron {
      position: relative;
      padding: 40px 0;
      color: red;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    }
    </style>
</head>
<body>
  <p class="jumbotron">This is a test</p>
</body>
</html>

It seems to be working well

0

If the background color changes but the text does not then one possible cause could be the anchor. By default when you place a text in anchor it automatically becomes underlined because it is a link and underlined when it is visited once. So if anyone else having this problem try overriding that in css by

a:hover, a:active, a:link, a:visited {
   text-decoration:none;
   color : #000; /* for example */ 
}

or simply repeat the css item and add "a" in front of the class:

myClass, myClass a { }

0
<!doctype html>
<head>
<html>
    <style>
    .jumbotron {
      position: relative;
      padding: 40px 0;
      color: #6495ed !important;
      text-align: center;
      text-shadow: 0 0px 0px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    }
    </style>
</head>
<body>
  <p class="jumbotron">hello world</p>
</body>
</html>
1
  • 1
    Code only answers are really discouraged. To help future readers, please explain what you are doing too! Oct 30, 2018 at 12:40
0

Another possibility might be accidentally using HTML comment tags instead of CSS comment tags or added some unrecognizable characters right before the color: #6495ed; causing user agent to ignore the color: #6495ed; declaration

<!doctype html>
<html>
<head>
    <style>
    .jumbotron { 
        position: relative;
        padding: 40px 0; <!--some comments -->
        color: #6495ed; 
        text-align: center;
        text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    }
    </style>
</head>
<body>
    <p class="jumbotron">Testing...</p>
</body>
</html>

The user agent will instead treat it as

<!doctype html>
<html>
<head>
    <style>
    .jumbotron { 
        position: relative;
        padding: 40px 0; 
        text-align: center;
        text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
    }
    </style>
</head>
<body>
    <p class="jumbotron">Testing...</p>
</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.