Question

I am trying to modify the CSS of a specific div within my CSS file. The inline style is shown here:

div class="widget-area ten columns marT20 left" style="width: 16%; margin: 0px 0px 0px 17px; padding-top: 100px; 

How can I replicate the inline style above in an external CSS file referencing the specific div element? Here is my attempt:

div.widget-area ten columns marT20 left element.style {
      margin:0 0 0 17px;
      padding-top:100px;
      width:16%;
    }

The CSS above does not output the desired change in the div element.

Thanks,

AME

Answer 1

widget-area, ten, columns, etc. are all individual classes. Which means in a CSS stylesheet they must all have a class identifier (.)

If you’re trying to target any div that contains all 5 classes, then you need to join them. element.style is unnecessary. That is what Firebug and other inspectors name the class when there is an inline-style (and therefore no class name)

Try

div.widget-area.ten.columns.marT20.left {
  margin:0 0 0 17px;
  padding-top:100px;
  width:16%;
}