CSS to be applied to DIV contents

Question

Hello,

I have a DIV like the following:

  <td>  
    <DIV>
    <script type="text/javascript">
    // link to some js
    </script>
    </DIV>
  </td>

The .js renders the latest article abstract inside the div. However it renders it in Calibri 10px.

I want that any content inside the DIV should be rendered as Verdana 10px. I am using a 3rd party .js so have no control over it. How to I force the DIV to render the content the way I want?

Answer 1

If the javascript only puts content and no style, you could do this:

  <td>  
    <DIV style='font-family: Verdana; font-size: 10px;'>
    <script type="text/javascript">
    // link to some js
    </script>
    </DIV>
  </td>

Answer 2

You need to check what elements the javascript generates. Use firebug in FireFox or "Inspect element" in Chrome.

When you know the element, specify something like this in your stylesheet.

body table tr td div elementOrClassNameThatYouFound {
  font: verdana 10px;
}

Answer 3

If the elements the Javascript is adding have their own style declarations, then you will need to use more Javascript to override them.

Otherwise, You should be able to give your div a class, apply your styles to that class, then they should propagate through to any contents inside.

e.g.

css:

.myClass {
  font-family: Verdana; 
  font-size: 10px;
}

html:

  <td>  
    <div class="myClass">
    <script type="text/javascript">
    // link to some js
    </script>
    </div>
  </td>

If that doesn't work, change the CSS to this:

.myClass * {
  font-family: Verdana; 
  font-size: 10px;
}

Answer 4

You could also try something in your CSS like:

.myClass {
    font-family: Verdana !important;
    font-size: 10px !important;
}