6

I have some inline CSS I can't change

<span style = "color: #404040; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 17px;">

stuff

</span>

and it is overriding my external CSS. I tried putting !important

.product-description 
{
  font-family:wide latin !important;
}

but it had no effect

If I go to inspect element and delete the style attribute, my external CSS works

abcdefg4321
  • 63
  • 1
  • 3
  • @HunterTurner not true. `!important` is the only way to override inline styles from a stylesheet, [see here](https://jsfiddle.net/n6vphe2d/) and [here](http://stackoverflow.com/questions/16813220/how-can-i-override-inline-styles-with-external-css). – hungerstar Jul 22 '16 at 19:58
  • @hungerstar Ah, sorry. I was thinking that the inline styles were `!important` as well. Misread that. – Hunter Turner Jul 22 '16 at 20:00
  • If the font name is Wide Latin try enclosing it in quotes `font-family: "Wide Latin" !important;` and see if that has any effect. – Robert Jul 22 '16 at 20:02
  • @hungerstar The only thing I have access to is the CSS file. – abcdefg4321 Jul 22 '16 at 20:08
  • @RobertC It didn't work – abcdefg4321 Jul 22 '16 at 20:11
  • @abcdefg4321 see my updated answer. – hungerstar Jul 22 '16 at 20:16
  • Can you show us more code, specifically enough to show where `. product-description` is in relation to the `span` you've displayed above. You may need to adjust your selector to be something along the lines of `.product-description span { }` or something similar. – Robert Jul 22 '16 at 20:17

1 Answers1

5

Update 1

OP mentioned they only have access to the CSS file.

In this case, you will need to change your CSS selector up a bit but is still doable. The example below has the class applied to the parent element of an element you'd like to change.

.change p {
  color: pink !important;
}
<div class="change">
  <p style="color: blue;">
    This is some text.
  </p>
</div>

You might have to get even more specific with your CSS selector if there are a lot of child elements to wade through when you hook into a CSS class selector. Try to hook into the CSS class selector that is the closest to the element you want to target.

.change div p:nth-child(2) {
  color: pink !important;
}
<div class="change">

  <p style="color: blue;">
    This is some text.
  </p>

  <div>

    <p style="color: green;">
      This is some text.
    </p>

    <p style="color: orange;">
      This is some text. (only change me)
    </p>

  </div>

</div>

Original Answer

My guess is that you're not applying the CSS class directly to the element you want changed as I do not see .product-description being applied to the example <span>.

Look at the two examples below.

  1. I think you're attempting this one, class applied to outer element of the element you want changed. <p> would inherit the color of .change if <p> didn't have something with a higher specificity applied to it, like inline CSS or another CSS class.

  2. Here we apply the class directly to the element we want changed, that way the specificity of !important can override the specificity of the inline CSS.

.change {
  color: pink !important;
}
<!-- #1 -->
<div class="change">
  <p style="color: green;">
    This is some text.
  </p>
</div>

<!-- #2 -->
<div>
  <p class="change" style="color: green;">
    This is some text.
  </p>
</div>
Community
  • 1
  • 1
hungerstar
  • 21,206
  • 6
  • 50
  • 59