How to Style IFrames With CSS

When you embed an 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 we always include on 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 within a scroll box, 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

scrollingattribute:scrolling="no">This is an 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:style="overflow: scroll;">This is an iframe. 

There is

no way

to turn off the scrolling completely with the

overflow

property. 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-bottomproperties) 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;}

But you shouldn't stop with scrolling and borders for your styles. You can apply a lot of other CSS styles to your iframe. This example uses 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.