How to Style an iframe with CSS in HTML

By the end of this page, you will understand why CSS from a parent HTML page does not automatically affect content inside an iframe, when styling is possible, and the common techniques developers use to make iframe content match the main page.

An iframe embeds another HTML document inside the current page. The important idea is that the content inside the iframe is treated as a separate page with its own document, its own CSS, and its own JavaScript context.

That means:

• CSS in the parent page styles the <iframe> element itself.
• CSS in the parent page does not automatically style the HTML loaded inside the iframe.
• The page inside the iframe must usually include its own stylesheet.

For example, this CSS in the parent page:

iframe {
  border: 2px solid #999;
  width: 100%;
}

will style the iframe box, but not the headings, paragraphs, or links inside the embedded page.

Why this matters

This separation is important for:

• Isolation: embedded content does not accidentally break your page styles.
• Security: one site should not freely change another site's content.
• Maintainability: each document controls its own appearance.

When you can style iframe content

You can style the page inside an iframe only if one of these is true:

1. You control the HTML loaded inside the iframe and can add CSS there.
2. The iframe content is from the same origin and you use JavaScript to inject styles.

If the iframe loads content from another domain, browser security rules usually prevent you from modifying its contents.

Think of an iframe as a window into another room.

• Your main page is one room.
• The iframe shows a different room.
• You can paint the window frame from your room.
• But you cannot rearrange the furniture inside the other room unless you own that room too.

So the parent page can style the iframe element, but the content inside the iframe must usually be styled from within that embedded document.

Styling the iframe element itself

This changes the outer box only:

<iframe src="feed.html" class="rss-frame"></iframe>

.rss-frame {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

This does not style the HTML inside feed.html.

Styling the iframe content by editing the embedded page

If you control the embedded page, add CSS there:

<!-- feed.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <h2>RSS Feed</h2>
  <p>Latest updates...</p>
</body>
</html>

This is the simplest and most reliable approach.

Injecting CSS with JavaScript for same-origin iframes

If the iframe content is on the same domain, you can add a stylesheet dynamically:

<iframe id="feedFrame" src="feed.html"></iframe>

<script>
  const frame = document.getElementById('feedFrame');

  frame.addEventListener('load', () => {
    const doc = frame.contentDocument;
    const link = doc.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'main.css';
    doc.head.appendChild(link);
  });
</script>

This works only when browser same-origin rules allow access.

Important limitation

This will usually fail for content from another website:

const doc = frame.contentDocument;

If the iframe source is cross-origin, the browser blocks access for security reasons.

Consider this example:

<iframe id="feedFrame" src="feed.html"></iframe>

<script>
  const frame = document.getElementById('feedFrame');

  frame.addEventListener('load', () => {
    const doc = frame.contentDocument;

    const style = doc.createElement('style');
    style.textContent = `
      body { font-family: Arial, sans-serif; color: #333; }
      h2 { color: steelblue; }
    `;

    doc.head.appendChild(style);
  });
</script>

What happens step by step

1. The browser creates the <iframe> element.
2. The iframe loads feed.html.
3. When loading finishes, the load event runs.
4. frame.contentDocument gets the document inside the iframe.
5. A new <style> element is created.
6. CSS rules are placed into that style element.
7. The style element is appended to the iframe document's <head>.
8. The browser applies those styles to elements inside the iframe.

Result

• The parent page remains separate.
• The iframe content gets new styles.
• This works only if the iframe content is accessible from the parent page under same-origin rules.

Common situations where this matters

• Embedding internal tools: a dashboard page embeds another internal page and both should look consistent.
• Documentation portals: a parent site loads pages into iframes and wants matching typography.
• Admin panels: preview windows show content in iframes with the same design system.
• Email or content previews: developers embed generated HTML and style it separately.
• RSS or widget pages you host: feed output can include the same stylesheet as the main site.

Practical note

If you are embedding third-party content such as external news, ads, or widgets, you usually cannot force your own CSS into that content. In those cases, you can only style:

• the iframe size
• spacing around it
• borders
• background around the frame
• layout placement on the parent page

In real projects, developers usually avoid trying to "share" CSS automatically between a page and an iframe. Instead, they use one of these patterns:

1. Shared stylesheet file

Both pages load the same CSS file:

<link rel="stylesheet" href="/styles/site.css">

This is the most common solution when you control both documents.

2. Theme classes or design tokens

Teams often define reusable colors, fonts, and spacing in a shared stylesheet so both the parent and iframe can stay consistent.

3. JavaScript injection for same-origin previews

Used in preview tools, editors, and internal dashboards where the embedded page is under the same domain.

4. Guarding for access errors

Developers often check access before modifying the iframe:

frame.addEventListener('load', () => {
  try {
    const doc = frame.contentDocument;
    if (!doc) return;

    const link = doc.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/styles/site.css';
    doc.head.appendChild(link);
  } catch (error) {
    console.log('Cannot access iframe contents:', error);
  }
});

This protects the page from breaking when cross-origin access is blocked.

5. Early design decision: iframe or component?

In many codebases, developers choose not to use iframes unless isolation is needed. If shared styling is important, rendering content directly in the page is often easier than embedding it in an iframe.

1. Expecting parent CSS to affect iframe content

Broken assumption:

body {
  font-family: Arial;
}

This styles the parent page body, not the iframe body's document.

Fix

Add the stylesheet inside the embedded page or inject it with JavaScript if same-origin.

2. Confusing the iframe element with the iframe document

This CSS:

iframe {
  background: #f5f5f5;
}

changes only the iframe box, not the embedded page text, headings, or links.

3. Ignoring same-origin restrictions

Broken code:

const doc = document.getElementById('myFrame').contentDocument;
doc.body.style.backgroundColor = 'yellow';

If the iframe loads another domain, this may throw a security error.

Fix

Only access iframe contents when both documents are same-origin, or style the embedded page directly on its own server.

4. Forgetting to wait for the iframe to load

Broken code:

const frame = document.getElementById('myFrame');
const doc = frame.contentDocument;

The document may not be ready yet.

Fix

Use the load event:

frame.addEventListener('load', () => {
  const doc = frame.contentDocument;
});

5. Using iframes when regular HTML would be simpler

Sometimes beginners use iframes for content that could be included directly in the page. If the content belongs to your page and should share styles naturally, normal HTML is often easier.

iframe vs normal embedded HTML

Quick reference

• An iframe loads a separate HTML document.
• Parent CSS can style the <iframe> element, not the content inside it.
• To style iframe content:
  • add CSS inside the embedded page, or
  • inject CSS with JavaScript if the iframe is same-origin.
• Cross-origin iframe content is usually not accessible from the parent page.

Common syntax

Style the iframe box:

iframe {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
}

Load the same stylesheet in the iframe page:

<link rel="stylesheet" href="main.css">

Inject CSS after load:

frame.addEventListener('load', () => {
  const doc = frame.contentDocument;
  const link = doc.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'main.css';
  doc.head.appendChild(link);
});

Rules to remember

• Same origin is required for script access.
• Wait for load before accessing iframe contents.
• If you do not control the iframe page, you usually cannot restyle it.

Best practice

If both pages belong to you, load the same shared stylesheet in both documents.

Can CSS from the parent page automatically style an iframe?

No. The iframe contains a separate document, so parent CSS does not automatically apply inside it.

How do I make an iframe match my site's design?

If you control the embedded page, include the same stylesheet there. That is the most reliable solution.

Can I use JavaScript to add styles inside an iframe?

Yes, but usually only when the iframe content is from the same origin.

Why does the browser block access to iframe content from another site?

For security. Same-origin policy prevents one site from reading or changing another site's document.

Can I at least style the iframe itself?

Yes. You can style the iframe element's width, height, border, margin, and layout from the parent page.

What if I need full control over the content appearance?

If possible, avoid using an iframe and render the content directly in your page, or host the embedded content yourself.

Is this different for RSS content?

Not really. If the RSS content is rendered inside a page loaded by the iframe, that rendered page still needs its own CSS.

• Same-origin policy — explains why browsers block access to iframe contents from other domains.
• DOM manipulation — useful when injecting styles into a same-origin iframe with JavaScript.
• link and external stylesheets — the normal way to reuse the same CSS file across multiple pages.
• CSS selectors — important for targeting elements inside the embedded document.
• HTML embedding — helps compare iframes with other ways of including content.
• JavaScript load events — needed when waiting for an iframe to finish loading before accessing its document.