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.
<!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>
|
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.
<!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>
|
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:
<!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>
|
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 :
<!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>
|
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:
<!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>
|
Output: