Question

How to Style an iframe with CSS in HTML

htmlcssiframerss

Question

I have a simple HTML page with several iframe sections used to display RSS content. How can I apply the same CSS styles from the main page to the document displayed inside each iframe?

Short Answer

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.

Concept

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:

You control the HTML loaded inside the iframe and can add CSS there.
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.

Mental Model

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.

Take Quiz

Syntax and Examples

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>

  RSS Feed
  Latest updates...

Step by Step Execution

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

The browser creates the <iframe> element.
The iframe loads feed.html.
When loading finishes, the load event runs.
frame.contentDocument gets the document inside the iframe.

Real World Use Cases

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

Take Quiz

Real Codebase Usage

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..(link);
  }  (error) {
    .(, error);
  }
});

Common Mistakes

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

Comparisons

Approach	Can style iframe content?	Works with external domain?	Best use case
Parent page CSS only	No	Yes	Styling the iframe box itself
Add CSS inside embedded page	Yes	Yes, if you control that page	Best overall solution
JavaScript inject CSS into iframe	Yes	No, usually blocked	Same-origin internal pages
Avoid iframe and render directly	Yes	Not applicable	When shared styling is important

iframe vs normal embedded HTML

Feature	iframe	Normal HTML in page

Cheat Sheet

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.();
  link. = ;
  link. = ;
  doc..(link);
});

FAQ

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.

Related Concepts

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.

Take Quiz

Mini Project

Description

Build a small HTML page that embeds another local page in an iframe and makes both pages share the same visual style. This demonstrates the correct way to keep iframe content consistent when you control both documents.

Goal

Create a parent page and an iframe page that use the same stylesheet so they look visually consistent.

Requirements

Create a parent HTML page with an iframe.
Create a separate HTML page to load inside the iframe.
Use one shared CSS file for both pages.
Style the iframe element itself as well as the content inside the embedded page.
Make the example work without relying on external websites.

Take Quiz

Keep learning

How to Style an iframe with CSS in HTML

Question

Short Answer

Concept

Why this matters

When you can style iframe content

Mental Model

Syntax and Examples

Styling the iframe element itself

Styling the iframe content by editing the embedded page

Step by Step Execution

What happens step by step

Real World Use Cases

Common situations where this matters

Practical note

Real Codebase Usage

1. Shared stylesheet file

2. Theme classes or design tokens

3. JavaScript injection for same-origin previews

4. Guarding for access errors

Common Mistakes

1. Expecting parent CSS to affect iframe content

Fix

2. Confusing the iframe element with the iframe document

3. Ignoring same-origin restrictions

Fix

4. Forgetting to wait for the iframe to load

Comparisons

iframe vs normal embedded HTML

Cheat Sheet

Quick reference

Common syntax

FAQ

Can CSS from the parent page automatically style an iframe?

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

Can I use JavaScript to add styles inside an iframe?

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

Can I at least style the iframe itself?

What if I need full control over the content appearance?

Is this different for RSS content?

Related Concepts

Mini Project

Description

Goal

Requirements

Related questions

Allow Only Numeric Input (0-9) in HTML Input Using jQuery

CSS :not() Selector for Excluding a Class or Attribute

Can HTML Checkboxes Be Readonly? Understanding readonly vs disabled in HTML Forms

Injecting CSS with JavaScript for same-origin iframes

Important limitation

Result

5. Early design decision: iframe or component?

Fix

5. Using iframes when regular HTML would be simpler

Rules to remember

Best practice