1. Computing

Discuss in my forum

Iframes and CSS

Styling Iframes With CSS

By

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 I always include on my iframes:

  • margin: 0;
  • padding: 0;
  • border: none;
  • width: value;
  • height: value;

With the width and height set to the size that fits in my document. Here are examples of a frame with no styles and one with just the basics styled. As you can see, 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:

<iframe src="iframe.html" scrolling="no">
This is an iframe.
</iframe>

To turn off scrolling in HTML5 you are supposed to use the overflow property. But as you can see 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:

<iframe src="iframe.html" style="overflow: scroll;">
This is an iframe.
</iframe>

As far as I can tell, there is no way to turn off the scrolling completely with the overflow property. If you know of a way, please let me know! Thanks.

Many designers want their iframes to blend in with the background of the page they are on so that readers don't know that the iframes are even there. But you can also add styles to make them stand out. Adjusting the borders so that the iframe shows up more readily is easy. Just use the border style property (or it's related border-top, border-right, border-left, and border-bottom properties) to style the borders:

iframe {
  border-top: #c00 1px dotted;
  border-right: #c00 2px dotted;
  border-left: #c00 2px dotted;
  border-bottom: #c00 4px dotted;
}

These styles look like this on a typical iframe.

But you shouldn't stop with scrolling and borders for your styles. You can apply a lot of other CSS styles to your iframe. In this example I used CSS3 styles to give the iframe a shadow, rounded corners, and rotated it 20 degrees.

iframe {
  margin-top: 20px;
  margin-bottom: 30px;

  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;

  -moz-box-shadow: 4px 4px 14px #000;
  -webkit-box-shadow: 4px 4px 14px #000;
  box-shadow: 4px 4px 14px #000;

  -moz-transform:rotate(20deg);
  -webkit-transform:rotate(20deg);
  -o-transform:rotate(20deg);
  -ms-transform:rotate(20deg);
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}

Styling the Iframe Contents

Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can't edit the page (for example, it's on another site).

If you can edit the page, then you can add an external style sheet or styles right in the document just like you would style any other web page on your site.

  1. About.com
  2. Computing
  3. Web Design / HTML
  4. HTML and XHTML
  5. XHTML
  6. Frames
  7. iFrames
  8. Iframes and CSS - Styling Iframes With CSS

©2014 About.com. All rights reserved.