Apply CSS to Iframe

To apply CSS to iframe, is a very simple process. We can add CSS to iframe using all the three methods of adding CSS to any document. We will be understanding three approaches to apply CSS to iframe which are by using inline CSS, internal CSS and external CSS.

In this article we are having an iframe, our task is to apply CSS to iframe. We will be understanding each approach with stepwise explaination and example codes.

Approaches to Apply CSS to iframe

Here is a list of approaches to apply CSS to iframe which we will be discussing in this article with stepwise explaination and complete example codes.

Applying Inline CSS to iframe

To apply CSS to iframe, we have used simple style attribute to apply an inline CSS to the iframe.

  • We have used style attribute with HTML iframe tag to apply inline CSS.
  • We have added a solid border of 2px using CSS border property and set the dimension of the iframe using CSS height and width property.

Example

Here is a complete example code implementing above mentioned steps to apply CSS to iframe using inline CSS.

<!DOCTYPE html>
<html>
<head>
    <title>
        To apply CSS to iframe
    </title>
</head>
<body>
    <h3>
        Applying CSS to iframe
    </h3>
    <p>
        In this example we have used <strong>inline
        CSS</strong> to apply CSS to iframe.
    </p>
    <iframe style="border: 2px solid #031926;
            width: 500px; height: 300px;" 
            src="/https/www.tutorialspoint.com/market/index.asp">
    </iframe>
</body>
</html>

Applying Internal CSS to iframe

In this approach to apply CSS to iframe, we have used style tag which applies an internal CSS to the iframe.

  • We have used style tag to use internal CSS then used iframe as an element selector to select the iframe.
  • Then, we have added a solid border of 2px using CSS border property and set the dimension of the iframe using CSS height and width property.

Example

Here is a complete example code implementing above mentioned steps to apply CSS to iframe using internal CSS.

<!DOCTYPE html>
<html>
<head>
    <style>
        iframe {
            border: 2px solid #031926;
            width: 500px; 
            height: 300px;
        }
    </style>
</head>
<body>
    <h3>
        Applying CSS to iframe
    </h3>
    <p>
        In this example we have used <strong>internal
        CSS</strong> to apply CSS to iframe.
    </p>
    <iframe src="/https/www.tutorialspoint.com/market/index.asp">
    </iframe>
</body>
</html>

Applying External CSS to iframe

In this approach we have used an external CSS with name styles.css which applies CSS to iframe.

  • We have used an external stylesheet with name styles.css to add an external css to iframe.
  • Then, we have added a solid border of 2px using CSS border property and set the dimension of the iframe using CSS height and width property.

Example

Here is a complete example code implementing above mentioned steps to apply CSS to iframe using external CSS.

styles.css

Here is the external stylesheet which we have added to our HTML document to apply CSS to iframe.

iframe {
    border: 2px solid #031926;
    width: 500px; 
    height: 300px;
}
index.html

Here is the HTML file to add iframe to our HTML document.

<!DOCTYPE html>
<html>
<head>
    <title>
        Applying CSS to iframe
    </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h3>
        Applying CSS to iframe
    </h3>
    <p>
        In this example we have used <strong>external
        CSS</strong> to apply CSS to iframe.
    </p>
    <iframe src="/https/www.tutorialspoint.com/market/index.asp"></iframe>
</body>
</html>

Conclusion

In this article we discussed how to apply CSS to iframe and understood three different approaches which are: by using inline CSS, by internal CSS and by external CSS.

Updated on: 2024-09-12T10:47:12+05:30

9K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements