{"id":701,"date":"2017-03-18T10:36:45","date_gmt":"2017-03-18T05:06:45","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=701"},"modified":"2018-10-27T20:12:22","modified_gmt":"2018-10-27T14:42:22","slug":"apply-css-iframe","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/apply-css-iframe\/","title":{"rendered":"How to apply CSS to iframe"},"content":{"rendered":"<h2 id=\"what-is-an-iframe\"><span style=\"color: #333399;\"><strong>\u00a0What is an Iframe?<\/strong><\/span><\/h2>\n<ul>\n<li>An <a href=\"https:\/\/www.wikitechy.com\/technology\/remove-border-from-iframe\/\">IFrame<\/a> (Inline Frame) is an HTML document embedded inside another HTML document on a website.<\/li>\n<li>The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.<\/li>\n<li>Although an IFrame behaves like an <a href=\"https:\/\/www.wikitechy.com\/technology\/what-is-the-difference-between-display-inline-and-display-inline-block\/\">inline<\/a> image, it can be configured with its own scrollbar independent of the surrounding page\u2019s scrollbar.<\/li>\n<li>A <a href=\"https:\/\/www.wikitechy.com\/technology\/40-cool-interesting-websites-kill-time\/\">Web designer<\/a> can change an IFrame\u2019s content without requiring the user to reload the surrounding page.<\/li>\n<li>This capacity is enabled through JavaScript or the target attribute of an HTML anchor.<\/li>\n<li>Web designers use IFrames to embed interactive applications in Web pages, including those that employ Ajax (Asynchronous JavaScript and XML), like <a href=\"https:\/\/www.wikitechy.com\/technology\/modify-keyboard-settings-google-chromebooks\/\">Google<\/a> Maps or ecommerce applications.<\/li>\n<li>An iframe is universally handled like a different <a href=\"https:\/\/www.wikitechy.com\/technology\/modify-url-without-reloading-page\/\">HTML<\/a> page by most browsers.<\/li>\n<li>If you want to apply the same stylesheet to the content of the iframe, just reference it from the pages used in there.<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n<h2 id=\"applying-css-to-iframe\"><span style=\"color: #993366;\"><strong>Applying CSS to iframe<\/strong><\/span><\/h2>\n<figure id=\"attachment_31611\" aria-describedby=\"caption-attachment-31611\" style=\"width: 766px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\" wp-image-31611\" src=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-1024x576.jpg\" alt=\"\" width=\"766\" height=\"431\" srcset=\"https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-1024x576.jpg 1024w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-300x168.jpg 300w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-768x432.jpg 768w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-990x557.jpg 990w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-1320x743.jpg 1320w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-470x264.jpg 470w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-640x360.jpg 640w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-215x120.jpg 215w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe-414x232.jpg 414w, https:\/\/www.wikitechy.com\/technology\/wp-content\/uploads\/2017\/03\/How-to-apply-CSS-to-iframe.jpg 1920w\" sizes=\"(max-width: 766px) 100vw, 766px\" \/><figcaption id=\"caption-attachment-31611\" class=\"wp-caption-text\">How to apply CSS to iframe<\/figcaption><\/figure>\n<p><strong>How to apply :<\/strong><\/p>\n<ul>\n<li>If you want to\u00a0apply\u00a0the same\u00a0<a href=\"https:\/\/www.wikitechy.com\/technology\/sass-variable-css-calc-function\/\">stylesheet<\/a>\u00a0to the content of the\u00a0iframe, just reference it from the pages used in there.<\/li>\n<li>If you control the page in the\u00a0iframe, the easiest approach is to create a shared\u00a0CSS\u00a0file with common styles, then just link to it from your html pages.<\/li>\n<li>When you embed an IFRAME element in your HTML, you have two opportunities to add CSS styles to it:\n<ul>\n<li>You can style the IFRAME itself.<\/li>\n<li>You can style the page inside the IFRAME (under certain conditions).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2 id=\"using-css-to-style-the-iframe-element\"><span style=\"color: #339966;\"><strong>Using CSS to style the IFRAME element:\u00a0<\/strong><\/span><\/h2>\n<ul>\n<li>The first thing you should consider when <a href=\"https:\/\/www.wikitechy.com\/technology\/wildcard-css-classes\/\">styling<\/a> your iframes is the IFRAME itself.<\/li>\n<li>While most browsers include iframes without a lot of extra styles, it\u2019s still a good idea to add some styles to keep them consistent.<\/li>\n<\/ul>\n<h3 id=\"here-are-some-css-styles\"><span style=\"color: #ff0000;\"><strong>Here are some CSS styles :<\/strong><\/span><\/h3>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>margin: 0;<\/li>\n<li>padding: 0;<\/li>\n<li>border: none;<\/li>\n<li>width:\u00a0value;<\/li>\n<li>height:\u00a0value;<\/li>\n<\/ul>\n<\/li>\n<li>Here are examples of a<a href=\"https:\/\/www.wikitechy.com\/technology\/use-digital-photo-frames\/\"> frame<\/a> with no styles and one with just the basics styled.<\/li>\n<li>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.<\/li>\n<li>HTML5 recommends that you use the\u00a0overflow\u00a0property to remove the scroll bars, but that isn\u2019t reliable.<\/li>\n<li>So if you want to remove or change the scroll bars, you should use the\u00a0scrolling\u00a0attribute on your iframe as well.<\/li>\n<li>To use the\u00a0scrolling\u00a0attribute, add it like any other\u00a0attribute\u00a0and then choose one of three values:\u00a0yes,\u00a0no, or\u00a0auto.<\/li>\n<li>Yes\u00a0tells the<a href=\"https:\/\/www.wikitechy.com\/technology\/use-web-browser-developer-tools\/\"> browser<\/a> to always include scroll bars even if they aren\u2019t needed.<\/li>\n<li>No\u00a0says to remove all scroll bars whether needed or not.<\/li>\n<li>Auto\u00a0is the default and includes the scroll bars when they are needed and removes them when they are not.<\/li>\n<\/ul>\n<h2 id=\"here-is-how-to-turn-off-scrolling-with-the-scrolling-attribute\"><span style=\"color: #008080;\"><strong>Here is how to turn off scrolling with the\u00a0scrolling\u00a0attribute<\/strong><\/span><\/h2>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22iframe.html%22%20scrolling%3D%22no%22%3E%0AThis%20is%20an%20iframe.%0A%3C%2Fiframe%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>To turn off scrolling in HTML5 you are supposed to use the overflow property.<\/li>\n<li>But in these examples it doesn\u2019t work reliably in all browsers yet. Here\u2019s how you would turn on scrolling all the time with the overflow property:<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%3Ciframe%20src%3D%22iframe.html%22%20style%3D%22overflow%3A%20scroll%3B%22%3E%0AThis%20is%20an%20iframe.%0A%3C%2Fiframe%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<h2 id=\"using-the-iframe-element\"><span style=\"color: #993300;\"><strong>Using The IFRAME element<\/strong><\/span><\/h2>\n<ul>\n<li>\n<h3 id=\"how-to-use-the-iframe-element\"><span style=\"color: #ff0000;\"><strong>How\u00a0 to use the IFRAME element :<\/strong><\/span><\/h3>\n<ul>\n<li><strong>src<\/strong>\u2014the URL for the source of the frame<\/li>\n<li><strong>height<\/strong>\u2014the height of the window<\/li>\n<li><strong>width<\/strong>\u2014the width of the window<\/li>\n<li><strong>name<\/strong>\u2014the name of the window<\/li>\n<\/ul>\n<\/li>\n<li><strong>srcdoc\u2014<\/strong>the HTML for the source of the frame. This attribute takes precedence over any URL in the src attribute<\/li>\n<li><strong>sandbox<\/strong>\u2014a list of features that should be allowed or disallowed in the frame window<\/li>\n<li><strong>seamless\u2014<\/strong>tells the user agent that the iframe should be rendered like it is invisibly part of the parent document<\/li>\n<li><strong>Long desc<\/strong> \u2014 instead, use an A element to link to a description<\/li>\n<li><strong>Align<\/strong> \u2014 instead, use the CSS float property<\/li>\n<li><strong>Allow transparency<\/strong> \u2014 instead, use the CSS background property to make the iframe transparent<\/li>\n<li><strong>Frame border<\/strong> \u2014 instead use the border CSS property<\/li>\n<li><strong>Margin height<\/strong> \u2014 instead, use the CSS margin property<\/li>\n<li><strong>Margin width<\/strong> \u2014 instead, use the CSS margin property<\/li>\n<li><strong>Scrolling<\/strong> \u2014 instead, use the CSS overflow property<\/li>\n<\/ul>\n<h2 id=\"iframe-browser-support\"><span style=\"color: #800080;\"><strong>IFRAME browser support :<\/strong><\/span><\/h2>\n<ul>\n<li>The IFRAME element is supported by <b>all modern browsers<\/b>:\n<ul>\n<li>Android<\/li>\n<li>Chrome<\/li>\n<li>Firefox<\/li>\n<li>Internet Explorer 2+<\/li>\n<li>iOS \/ Safari Mobile<\/li>\n<li>Netscape 7+<\/li>\n<li>Opera 3+<\/li>\n<li>Safari<\/li>\n<\/ul>\n<\/li>\n<li>Using overflow to turn off scrolling is not reliable. If you don\u2019t want scrollbars on your iframes, you should continue to use the scrolling attribute.<\/li>\n<li>The srcdoc, sandbox, and seamless attributes are not supported by any browsers at this time.<\/li>\n<\/ul>\n<p><strong>Sample Program :<\/strong><\/p>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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(\u2018%23cssID\u2019)%5B0%5D)%3B%0A%20%20%20%20%7D)%3B%0A%3C%2Fscript%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>HTML &#8211; CSS &#8211; iframe css example &#8211; How to apply CSS to iframe &#8211; An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[85596,85594,1231,1237,1230,1235,1224,1228,1225,1229,1221,1223,1236,1234,1233,1222,1226,85595,1232,1227],"class_list":["post-701","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-add-css-to-iframe","tag-apply-css-to-iframe-content","tag-apply-css-to-iframe-content-cross-domain","tag-apply-css-to-iframe-from-parent","tag-change-css-inside-iframe-jquery","tag-css-not-working-inside-iframe","tag-css-override-body-style-for-content-in-iframe","tag-edit-iframes-css-from-external-page","tag-how-to-apply-css-to-iframe-content","tag-how-to-inject-custom-html-and-css-into-an-iframe","tag-html-how-to-apply-css-to-iframe","tag-html-how-to-applying-css-style-into-an-iframe-content","tag-iframe-css-example","tag-iframe-css-scrolling","tag-inject-css-into-iframe","tag-jquery-add-css-to-iframe","tag-jquery-how-to-add-css-to-iframe-content","tag-override-css-inside-iframe","tag-override-iframe-css-jquery","tag-overriding-css-inside-an-iframe"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/701","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=701"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/701\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}