- You can style the
- You can style the page inside the
IFRAME(under certain conditions).
Using CSS to Style the
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:
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 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
<iframe src="iframe.html" 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
<iframe src="iframe.html" style="overflow: scroll;">
This is an 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-bottom properties) to style the borders:
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.
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
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).