Question

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 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; }