Can I style embedded content within an HTML page?

I am displaying an HTML formatted report within a webpage using the following code:

<object data="server//report.html"> <embed src="server//report.html" width="100%" height="400"> </embed> Error: Embedded data could not be displayed. </object>
</div>

Open in new window


My question is, can I edit the loaded page styles somehow without having to edit the source content? I would like to simply change the color of the dropdown controls and header bars to match the page it is displayed in.

Thanks in advance!

TM
mrslate1Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterSenior Software DeveloperCommented:
You can. One of the great things about CSS is the cascading part. If you have a class declared you can redeclare it later and change the existing style or append to it. Just create a new style sheet and declare the class with the new color.

So, if you have a style sheet that has the following class...

.foo
{
    width: 100px;
    height: 40px;
    color: white;
    background-color: black;
}

Open in new window


You could add your own style sheet after the default sheet with your own version of .foo like this:

.foo
{
    background-color: blue;
    font-weight: bold;
}

Open in new window


the resulting class will have the following attributes

.foo
{
    width: 100px;
    height: 40px;
    color: white;
    background-color: blue;
    font-weight: bold;
}

Open in new window


as you can see the new class has inherited the font-weight from the later version of .foo and the background color has been replaced by the latest version.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mrslate1Author Commented:
Thanks for your quick answer. The question becomes if a page is being loaded using the <object>  WEB PAGE </object> where would I place the <link rel="stylesheet" href="css/report.css"> so it would cascade with the orininal embedded web page's style sheet?

Wherever I place the code, the newer code is not overwritten.

Here is the HTML. .Where would I place the style sheet link?
<!DOCTYPE html>
<html lang="en-US">
   <head>
      <meta charset="UTF-8">
      <title>ASK FAQ</title>
      <link rel="stylesheet" href="css/components.css">
      <link rel="stylesheet" href="css/responsee.css">
           
   </head>
   <body>
      <!-- TOP NAV WITH LOGO -->          
      <header class="margin">
         <div class="line">
            <nav>
               <div class="top-nav">
                  <p class="nav-text"></p>
                  <div class="logo">PAGE Logo</div>            
                            
                     <ul class="top-ul right">
                     <li>            
                        <a href="index.html">Home</a>            
                     </li>
                     <li>            
                        <a href="about.html">About</a>            
                     </li>
                     <li>            
                       
                     </li>
                     
                  </ul>
               </div>
                </nav>
         </div>
      </header>
      <!-- MAIN SECTION -->                  
             
                           
               <article>
                  <!-- text -->                 
                 <div class="header">
   	  <h1>Title</h1>
    	
    </div>
             <div class="embed_contain"> 

<!-- WHERE TO PLACE? <link rel="stylesheet" href="css/report.css"> -->

		   <!-- Embedded HTML page Start -->
         <object data="webpage_report.html" width="100%" height="400"> </object> <embed src="webpage_report.html" width="100%" height="400"> </embed> Error: Embedded data could not be displayed.  
     <!-- Embedded HTML page END -->           
               
</div>
 </article>
              
    
      <!-- FOOTER -->       
      <div class="line">
      
      <footer>
            <div>
             Footer
            </div>
        </footer>
      
       </div>
   </body>
</html>

Open in new window


Thanks again!

TM
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.