The HTML component <iframe> serves to integrate another complete webpage into your existing page, as well as videos, maps, and forms. Customizing an <iframe> can be difficult since loading data from an alternate source necessitates modifications to the internal CSS elements. Nonetheless, we can still apply CSS attributes to <iframe> via Inline CSS, Internal CSS, and External CSS.
In this article, we will explore these three techniques, their advantages, and provide illustrations to assist you in styling <iframe>.
Table of Contents:
- Why Style an iframe?
- Techniques to Apply CSS Property to an iframe
- Extra Styling for iframe
- Wrapping Up
Why Style an iframe?
- Enhance visual quality: By default, <iframe> appears basic and may lack coherence with the overall web design.
- Boost user interaction: Customizing dimensions, hues, and spacing of the embedded component helps it align with your webpage’s design.
- Manage accessibility: Proper styling of the embedded materials guarantees improved readability for the user.
Techniques to Apply CSS Property to an iframe
You can utilize CSS properties on <iframe> employing Inline CSS, Internal CSS, and External CSS. Let’s delve into them below.
Approach 1: Using Inline CSS
You can style <iframe> directly with inline CSS by using the style attribute. This approach is apt if you have only 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 incorporates the map, and CSS attributes such as height, width, border, and border radius are immediately applied to the style attribute for the embedded material.
Approach 2: Using Internal CSS
You can embed the internal CSS within the style tag located under the head section. This method is appropriate for styling multiple iframes on a single page.
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 exists within the header section. The class .styled-iframe is employed for styling the iframe.
Approach 3: Using External CSS
To maintain a tidy and manageable codebase, external CSS can be utilized. The separate CSS file houses the styling attributes such as height, width, and border used to design <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 utilized to apply styles to the iframe with CSS properties like height, width, and border. This method incorporates the CSS externally.
Extra Styling for iframe
- To ensure the iframe is responsive, allowing it to adapt across various screen dimensions.
.responsive-iframe {
width: 100%;
height: 400px;
max-width: 800px;
}- To eliminate the default scrollbars.
.no-scrollbar {
overflow: hidden;
scrollbar-width: none;
}- To implement a smooth zoom effect on hover.
.styled-iframe:hover {
transform: scale(1.02);
transition: 0.3s ease-in-out;
}Wrapping Up
The methods outlined above can be utilized to implement CSS Properties to an iframe. You can use CSS properties on <iframe> through Inline CSS, Internal CSS, and External CSS. CSS can facilitate the iframe content’s adaptability across different screens and devices, ensuring it maintains an appealing appearance on both desktops and mobile gadgets.
How to Apply CSS Property To an iframe? – FAQs
The article How to Apply CSS Property To an iframe? was initially published on Intellipaat Blog.