Use the HTML tag
We can easily apply CSS to iframes, but let's first look at
src - This attribute is used to give the name of the file that should be loaded in the frame. Its value can be any URL.
name - This property allows you to specify a name for the frame. It is used to indicate into which frame the document should be loaded.
marginheight - This property allows you to specify the height of the space between the top and bottom of the frame border and its content. The value is given in pixels.
height - This property specifies the height of
scrolling - This property controls the appearance of scroll bars that appear on the frame. The value can be "yes", "no", or "auto".
longdesc - This attribute allows you to provide a link to another page containing a detailed description of the frame's contents.
width - This property specifies the
Now let’s apply CSS to the iframe.
The style attribute is used to set inline css. We set the border, width and height -
<iframe style="border: 2px solid gray; width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks">
Let’s look at an example -
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Courses</h1>
<iframe style="border: 2px solid gray;
width: 500px; height: 400px;" src="https://www.tutorialspoint.com/market/index.asp"
id="Ebooks">
</iframe>
</body>
</html>
style tag is used to set the internal css of the iframe. We have styled the iFrame to the new borders, width and height -
iframe {
border: 3px solid green;
width: 500px;
height: 400px;
}
Let’s see an example -
<!DOCTYPE html>
<html>
<head>
<style>
iframe {
border: 3px solid green;
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<h1>Courses</h1>
<iframe src="https://www.tutorialspoint.com/market/index.asp" id="Ebooks">
</iframe>
</body>
</html>
The above is the detailed content of How to apply CSS to iframe?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
