How to apply CSS to iframe?

Problem:

You have a “iframe” section in your page that holds another page. Now you need to add some CSS to style the <iframe> tag.

Solution:

There are two different ways of styling “iframe” tag-

  1. Styling the <iframe> block itself.
  2. Styling the page inside <iframe> block

 

1. Styling the <iframe> block itself:

<iframe src="http://www.SchoolsOfWeb.com" width= “300px” height= “400px” scrolling= “yes” >
<p>You can style in this way</p>
</iframe>

Or you can add External stylesheet in the CSS

The code:

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

Explanation:

You can style either using the different attribute in the <iframe> tag or use different stylesheet for CSS styling. You can find many other properties of <iframe> on the following link.http://www.w3schools.com/tags/tag_iframe.asp

 

2. Styling the page inside <iframe> block

Styling the contents of the page inside <iframe> block means you want to style or edit other web page. But, you can only do this, If you have access to edit that page,. Otherwise it is not possible. If you have access to edit the page, just add external style sheet on that “page” head element.

The code:

<link type="text/css" rel="Stylesheet" href="style.css" />

Then you can style in the external stylesheet like above step.