How to apply CSS to iframe

 What is an Iframe?

• An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website.
• The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.
• Although an IFrame behaves like an inline image, it can be configured with its own scrollbar independent of the surrounding page’s scrollbar.
• A Web designer can change an IFrame’s content without requiring the user to reload the surrounding page.
• This capacity is enabled through JavaScript or the target attribute of an HTML anchor.
• Web designers use IFrames to embed interactive applications in Web pages, including those that employ Ajax (Asynchronous JavaScript and XML), like Google Maps or ecommerce applications.
• An iframe is universally handled like a different HTML page by most browsers.
• If you want to apply the same stylesheet to the content of the iframe, just reference it from the pages used in there.

[ad type=”banner”]

Applying CSS to iframe

How to apply :

• If you want to apply the same stylesheet to the content of the iframe, just reference it from the pages used in there.
• If you control the page in the iframe, the easiest approach is to create a shared CSS file with common styles, then just link to it from your html pages.
• When you embed an IFRAME element in your HTML, you have two opportunities to add CSS styles to it:
  • You can style the IFRAME itself.
  • You can style the page inside the IFRAME (under certain conditions).

Using CSS to style the IFRAME element: 

• The first thing you should consider when styling your iframes is the IFRAME itself.
• While most browsers include iframes without a lot of extra styles, it’s still a good idea to add some styles to keep them consistent.

Here are some CSS styles :

• • margin: 0;
  • padding: 0;
  • border: none;
  • width: value;
  • height: value;
• Here are examples of a frame with no styles and one with just the basics styled.
• These styles mostly just remove the border around the iframe, but they also ensure that all browsers display that iframe with the same margins, padding, and dimensions.
• HTML5 recommends that you use the overflow property to remove the scroll bars, but that isn’t reliable.
• So if you want to remove or change the scroll bars, you should use the scrolling attribute on your iframe as well.
• To use the scrolling attribute, add it like any other attribute and then choose one of three values: yes, no, or auto.
• Yes tells the browser to always include scroll bars even if they aren’t needed.
• No says to remove all scroll bars whether needed or not.
• Auto is the default and includes the scroll bars when they are needed and removes them when they are not.

Here is how to turn off scrolling with the scrolling attribute

[pastacode lang=”markup” manual=”%3Ciframe%20src%3D%22iframe.html%22%20scrolling%3D%22no%22%3E%0AThis%20is%20an%20iframe.%0A%3C%2Fiframe%3E%0A” message=”html code” highlight=”” provider=”manual”/]

• To turn off scrolling in HTML5 you are supposed to use the overflow property.
• But in these examples it doesn’t work reliably in all browsers yet. Here’s how you would turn on scrolling all the time with the overflow property:

[pastacode lang=”markup” manual=”%3Ciframe%20src%3D%22iframe.html%22%20style%3D%22overflow%3A%20scroll%3B%22%3E%0AThis%20is%20an%20iframe.%0A%3C%2Fiframe%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

Using The IFRAME element

• How  to use the IFRAME element :

  • src—the URL for the source of the frame
  • height—the height of the window
  • width—the width of the window
  • name—the name of the window
• srcdoc—the HTML for the source of the frame. This attribute takes precedence over any URL in the src attribute
• sandbox—a list of features that should be allowed or disallowed in the frame window
• seamless—tells the user agent that the iframe should be rendered like it is invisibly part of the parent document
• Long desc — instead, use an A element to link to a description
• Align — instead, use the CSS float property
• Allow transparency — instead, use the CSS background property to make the iframe transparent
• Frame border — instead use the border CSS property
• Margin height — instead, use the CSS margin property
• Margin width — instead, use the CSS margin property
• Scrolling — instead, use the CSS overflow property

IFRAME browser support :

• The IFRAME element is supported by all modern browsers:
  • Android
  • Chrome
  • Firefox
  • Internet Explorer 2+
  • iOS / Safari Mobile
  • Netscape 7+
  • Opera 3+
  • Safari
• Using overflow to turn off scrolling is not reliable. If you don’t want scrollbars on your iframes, you should continue to use the scrolling attribute.
• The srcdoc, sandbox, and seamless attributes are not supported by any browsers at this time.

Sample Program :

[pastacode lang=”css” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%20id%3D%22cssID%22%3E%0A.className%0A%7B%0A%20%20%20%20background-color%3A%20red%3B%0A%7D%0A%3C%2Fstyle%3E%0A%0A%3Ciframe%20id%3D%22iFrameID%22%3E%3C%2Fiframe%3E%0A%0A%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%24(function%20()%20%7B%0A%20%20%20%20%20%20%20%20%24(%22%23iFrameID%22).contents().find(%22head%22)%5B0%5D.appendChild(cssID)%3B%0A%20%20%20%20%20%20%20%20%2F%2FOr%20%24(%22%23iFrameID%22).contents().find(%22head%22)%5B0%5D.appendChild(%24(‘%23cssID’)%5B0%5D)%3B%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]