The HTML element <iframe> is used to embed another entire webpage within your current page, video, maps, and forms. Styling an <iframe> is challenging because loading content from another source requires changes in the internal elements of CSS. But we can still apply CSS properties to <iframe> using Inline CSS, Internal CSS, and External CSS.
In this blog, we will discuss these three methods, their benefits, and examples to help you in styling <iframe>.
Table of Contents:
Why Style an iframe?
- Improve visual appearance: By default, <iframe> looks plain and inconsistent with the web design.
- Enhance user experience: You can customize the size, color, and spacing of the embedded element to blend with your webpage.
- Control accessibility: Styling the embedded content ensures better readability for the user.
Methods to Apply CSS Property to an iframe
You can use CSS properties to <iframe> using Inline CSS, Internal CSS, and External CSS. Let’s discuss them below.
Method 1: Using Inline CSS
You can directly style <iframe> using the inline CSS with the style attribute. This method is suitable when you have one or two iframes to style.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Styling - Inline CSS</title>
</head>
<body>
<h2>Method 1: Styling iframe using Inline CSS</h2>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.2514082899224!2d77.59400687380882!3d12.891549016630831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae234817a8dce1%3A0x23b9cff04eddbff7!2sIntellipaat!5e0!3m2!1sen!2sin!4v1741248076772!5m2!1sen!2sin"
style="width: 50%; height: 200px; border: 2px solid black; border-radius: 10px;">
</iframe>
</body>
</html>
Output:
Explanation: The HTML embeds the map, CSS properties like height, width, border, and border radius are directly applied to the style attribute for the embedded content.
Method 2: Using Internal CSS
You can add the internal CSS inside the style tag, under the head section. If you want to style multiple iframes for a single page, this would be the correct method.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Styling - Internal CSS</title>
<style>
.custom-iframe {
width: 50%;
height: 200px;
border: 3px dashed blue;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h2>Styling iframe using Internal CSS</h2>
<iframe class="custom-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.2514082899224!2d77.59400687380882!3d12.891549016630831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae234817a8dce1%3A0x23b9cff04eddbff7!2sIntellipaat!5e0!3m2!1sen!2sin!4v1741248076772!5m2!1sen!2sin"></iframe>
</body>
</html>
Output:
Explanation: In internal CSS, the <style> tag is inside the header section. The class .styled-iframe is used to style the iframe.
Method 3: Using External CSS
To keep the code clean and maintainable, external CSS can be used. The separate CSS file contains the styling properties like height, width, and border, which are used to style <iframe>.
Example:
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Styling - External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Styling iframe using External CSS</h2>
<iframe class="styled-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3889.2514082899224!2d77.59400687380882!3d12.891549016630831!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae234817a8dce1%3A0x23b9cff04eddbff7!2sIntellipaat!5e0!3m2!1sen!2sin!4v1741248076772!5m2!1sen!2sin"></iframe>
</body>
</html>
style.css
.styled-iframe {
width: 80%;
height: 300px;
border: 4px solid red;
border-radius: 15px;
filter: grayscale(50%);
}
Output:
Explanation: The class .iframe-style is used to style the class with the CSS properties like height, width, and border. And in this method, the CSS is inserted externally.
Additional Styling for iframe
- To make the iframe responsive by making it adaptive to the different screen sizes.
.responsive-iframe {
width: 100%;
height: 400px;
max-width: 800px;
}
- To remove the default scrollbars
.no-scrollbar {
overflow: hidden;
scrollbar-width: none;
}
- To add a smooth zoom effect on hover
.styled-iframe:hover {
transform: scale(1.02);
transition: 0.3s ease-in-out;
}
Conclusion
The above-mentioned methods are used to apply CSS Property To an iframe. You can use CSS properties to <iframe> using Inline CSS, Internal CSS, and External CSS. CSS can make the iframe content adapt to different screen sizes and devices, ensuring it looks good on both desktops and mobile devices.
How to Apply CSS Property To an iframe? – FAQs
1. How do I set the width and height of an iframe?
You can use the height and width CSS properties to set the height and width of the iframe.
2. How can I add a border to an iframe?
You can use the border CSS property to set the border pixel of the container.
3. How do I make the corners of an iframe rounded?
You can use the border radius CSS property to make the corners of the iframe.
4. Can I apply styles to the content inside the iframe?
You can’t apply styles directly to the content inside an iframe from the parent page because of cross-origin restrictions. But you can still style the content by adding a CSS file to the iframe’s own HTML document.
5. How do I make an iframe responsive?
You can make the iframe responsive by making it adaptive to the different screen sizes.