How to apply CSS property to an iframe ?

An iframe is the short form of inline frame. By using iframe tag, you can display another webpage content into a HTML page document in a rectangular shape structure. The webpage content can be any video, another website, any image and so on. This iframe also has scrollbars and borders for good look and feel of the document.

Syntax:

<iframe src="URL"></iframe>

Please refer: For better understanding refer the article HTML | Iframes

Approach 1: There are several techniques to apply CSS property to an iframe, as given below.
We can use inline CSS for the iframe by using CSS inside the iframe tag.

<iframe src=”www.geeksforgeeks.org” style=”border: 3px dotted; width: 300px; height: 300px;”> </iframe>



Example: The design of the HTML page is implemented as follows.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to apply CSS property
        to an iframe?
    </title>
</head>
  
<body style="margin:0px;">
    <table style="width:100%; 
        border-collapse:collapse; 
        font:14px Arial, sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px; 
                background-color:#16641a;">
                <h1 style="font-size:24px; 
                    color:#fbfffb;">
                    Welcome to GeeksforGeeks
                </h1>
            </td>
        </tr>
  
        <tr style="height:300px;">
            <td style="padding:20px; 
                background-color:#5c9b37; 
                vertical-align:top;">
                <h2>Way to gain knowledge</h2>
                <ul style="list-style:none; 
                    padding:0px; line-height:24px;">
                    <li style="color:#ffffff;">
                        Learn</li><br>
                    <li style="color:#ffffff;">
                        Practice
                    </li><br>
                    <li style="color:#ffffff;">
                        Apply to real world
                    </li>
                </ul>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; 
                background-color:#2b2a2a; 
                text-align:center;">
                <p style="color:#ffffff;">
                    copyright © geeksforgeeks,
                    Some rights reserved
                </p>
            </td>
        </tr>
    </table>
</body>
  
</html>

chevron_right


Example: In the following example, the iframe size is of “300px” for both width and height and the border thickness is “3px” and dotted style.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <h4 style="color:#006400; 
        font-size:24px;">
        Apply CSS to iframe
    </h4>
</head>
  
<body>
    <!--inline CSS in iframe tag-->
    <iframe style="border: 3px dotted; 
        width: 300px; height: 300px;" 
        src="iframe page.html" id="Iframe">
    </iframe>
</body>
  
</html>                                       

chevron_right


Output:

Approach 2: You can use the internal CSS for the iframe tag inside the HTML file.

<style>
    #frame {
        border: 3px dotted;
        width: 300px;
        height: 300px;
    }
</style>
<iframe src="www.geeksforgeeks.org" 
    id="frame">
</iframe>

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS iframe
    </title>
</head>
  
<head>
    <style>
        #Iframe {
            border: 3px dotted;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
  
<body>
    <h4 style="color:#006400; 
        font-size:24px;">
        Apply CSS to ifram
    </h4>
  
    <iframe src="iframe page.html" 
        id="Iframe">
    </iframe>
    <!-- iframe tag-->
</body>
  
</html>

chevron_right


Output:

Approach 3: You can use external CSS for the iframe, that is making use of external CSS file. Create a different file for the CSS code and include it in the HTML file using link and href tag before the iframe tag.

CSS file: (name of the file iframeCss.css )
#frame {
  border: 3px dotted;
  width: 300px;
  height: 300px;
}
HTML file:
<link rel="stylesheet" type="text/css" href="iframeCss.css">
<iframe src="www.geeksforgeeks.org" id="frame"> </iframe>

Example :



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS iframe
    </title>
  
    <link type="text/css" 
        rel="Stylesheet" 
        href="iframeCss.css" />
  
    <style>
        #Iframe {
            border: 3px dotted;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
  
<body>
  
    <!--external CSS link-->
    <h4 style="color:#006400; 
    font-size:24px;">
        Apply CSS to iframe
    </h4>
  
    <iframe src="iframe page.html" 
        id="Iframe">
    </iframe>
    <!--iframe tag-->
</body>
  
</html>

chevron_right


Output:

Approach 4: In this approach, JavaScript code is used to add the CSS file link at the head of HTML document. The methods are used:

  • document.createElement(): This method creates an HTML element to define the name of the element.

    var g = document.createElement('link');
  • document.appendChild(): This method appends any value or any node at the specified tag as child value.
    var g = document.createElement('link');
    document.head.appendChild(g)
    

    g is a child, that is added to the head tag using appendChild() method.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        #Iframe {
            border: 3px dotted;
            width: 300px;
            height: 300px;
        }
    </style>
  
    <script>
        window.onload = function () {
  
            // Create a link Element
            // for the css file
            var link = 
                document.createElement("link");
  
            // Set the attributes 
            // for link element  
            link.href = "iframeCss.css";
            link.rel = "stylesheet";
            link.type = "text/css";
  
            // Set the link element at the
            // 'head' of HTML document  
            document.head.appendChild(link);
        }
    </script>
</head>
  
<body>
    <h4 style="color:#006400; 
        font-size:24px;">
        Apply CSS to iframe
    </h4>
      
    <iframe src="iframe page.html"
        id="iframe1">
    </iframe>
    <!--iframe tag-->
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

3rd year student of Information Technology JADAVPUR UNIVERSITY

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.