Styling <object> elements and their child content can be tricky, because the content inside an <object> is a separate document (often HTML, SVG, or PDF). We can do using jquery at some point. Let’s go step-by-step through how CSS styling works with <object>, why direct styling often doesn’t work, and how to solve it — with working demos and alternatives.
Understanding <object> Behavior
The <object> HTML tag is used to embed external resources such as:
- PDFs (
.pdf) - Images (
.svg,.png, etc.) - Videos
- HTML files
- Flash (legacy)
- Other web documents
It’s a general-purpose container for embedding foreign content inside a web page.
for example:
<object data="child.html" type="text/html"></object>When you do this:
- The
child.htmlfile loads as a separate document inside the<object>. - Your parent CSS doesn’t automatically apply inside it — it’s sandboxed (like an iframe).
So if your parent CSS says:
object h1 {
color: red;
}
…it only affects the <object> itself, not the content inside child.html.
Why You Can’t Directly Style Inside the <object>
Each <object> creates a different DOM and CSS context.
Think of it like loading a mini web page inside your page.
Your parent’s CSS and JavaScript cannot reach inside unless the content is from the same origin (same domain and protocol).
How to Style <object> Child Content (if same-origin)
If your embedded file (child.html) is from the same domain, you can access it with JavaScript and inject CSS dynamically.
Example: Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object Styling Demo</title>
<style>
object {
width: 500px;
height: 300px;
border: 2px solid #444;
}
</style>
</head>
<body>
<h2>Parent Page</h2>
<object id="childFrame" data="child.html" type="text/html"></object>
<script>
const obj = document.getElementById('childFrame');
obj.addEventListener('load', () => {
const childDoc = obj.contentDocument; // access the loaded HTML
const style = childDoc.createElement('style');
style.textContent = `
body {
background-color: #f0f8ff;
font-family: sans-serif;
}
h1 {
color: red;
text-align: center;
}
`;
childDoc.head.appendChild(style);
});
</script>
</body>
</html>
Child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<h1>Hello from Object!</h1>
<p>This is inside the object element.</p>
</body>
</html>
The parent page loads child.html inside the <object>, and after it loads, the script injects custom CSS into the child document.
If the Content is from a Different Domain
If data="https://domain.com/page.html", then:
- You cannot access or modify it due to CORS and security sandboxing.
- Injecting CSS or accessing
contentDocumentwill throw a cross-origin error.
How to fix issue :
- Host the file on your own domain if possible.
- Fetch and inject the content manually instead of using
<object>.
So here are the working Demo 1— Style Content Inside <object> (Same Origin)
Works only if both files are in the same folder (like on localhost or same domain).
object-demo/
├── index.html
└── child.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Object Styling Demo</title>
<style>
body {
font-family: Arial, sans-serif;
background: #fafafa;
text-align: center;
}
object {
width: 500px;
height: 300px;
border: 3px solid #555;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Parent Page</h2>
<p>This is the parent HTML page.</p>
<object id="childFrame" data="child.html" type="text/html"></object>
<script>
const obj = document.getElementById('childFrame');
obj.addEventListener('load', () => {
const childDoc = obj.contentDocument;
const style = childDoc.createElement('style');
style.textContent = `
body {
background-color: #e0f7fa;
color: #333;
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
h1 {
color: #00796b;
font-size: 26px;
}
p {
color: #004d40;
font-size: 18px;
}
`;
childDoc.head.appendChild(style);
});
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<h1>Hello from the Object!</h1>
<p>This is inside the embedded document.</p>
</body>
</html>
- Save both files in the same folder.
- Open
index.htmlin your browser.
You’ll see the parent page and a styled child page loaded inside the<object>element.
Demo 2 — Load and Style HTML via Fetch (Recommended for full control)
This method avoids the <object> tag completely and gives you direct CSS control.
object-demo/
├── index.html
└── child.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fetch HTML and Style It</title>
<style>
#container {
width: 500px;
margin: 20px auto;
padding: 20px;
border: 2px solid #666;
border-radius: 8px;
background: #f0f0f0;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
#container h1 {
color: #4caf50;
}
#container p {
font-size: 18px;
color: #555;
}
</style>
</head>
<body>
<h2>Parent Page</h2>
<div id="container">Loading child content...</div>
<script>
fetch('child.html')
.then(res => res.text())
.then(html => {
document.getElementById('container').innerHTML = html;
})
.catch(err => {
document.getElementById('container').innerText = 'Failed to load child.html';
});
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<h1>Hello from the Object!</h1>
<p>This is inside the embedded document.</p>
</body>
</html>The content from child.html loads into the div.
Your parent CSS styles it immediately — no cross-domain restrictions.
