html

How to Apply CSS to iframe? – HTML

2 years ago
by Hafsa Javed
In HTML, “iframe” is an acronym for the Inline frame. It has a rectangular form structure which is mainly used to insert another website’s content into an HTML page. Any video, link to another website, image, or other information can be found on a webpage using the iframe element. Additionally, this iframe features borders and scrollbars to improve the document’s appearance and feel.

This post will explain:

What is an iframe in HTML?

An element in HTML that is utilized for loading other HTML pages inside the current one is basically known as is known as an “inline frame”. Furthermore, it placed numerous webpages on the root page. This HTML element is used frequently for embedded movies, advertisements, online analytics, and interactive content.

How to Apply CSS to an iframe?

To apply the CSS to an iframe in HTML, try out the mentioned instructions.

Step 1: Create a div Element
First, create a div container by utilizing the “<div>” tag and insert the “id” attribute in the inside div tag.

Step 2: Add Headings
Add a heading in between the “<div>” tag by using the “<h1>” tag. Insert the second heading with the help of the “<h2>” tag.

Step 3: Insert “<iframe>” Tag
Next, insert the “<iframe>” tag to add an inline frame of the webpage in a div container. Further, add the following attributes inside the iframe tag:

  • The “src” attribute is utilized for adding the URL of a webpage to add in a frame.
  • “height” defines the height for the created inline frame.
  • “width” allocates the width size of the frame:
<div id="div-iframe">
<h1>Linuixhint Tutorials Website</h1>
 <h2>Linuxhint Iframe in HTML</h2>
 <iframe src="https://linuxhint.com" height="200" width="400"></iframe>
 </div>

Output

Step 4: Style First Heading
Next, style the first heading by applying the CSS properties:

h1{
 font-family:fantasy;
 color: solid rgb(red, green, blue);
}

Here:

  • “font-family” property can hold multiple font names as a “fallback” system. It is utilized for specifying the font for an element.
  • “color” specifies the color of the font.

Step 5: Style Second Heading
Now, style the second heading according to your choice:

h2{
 color:blue;
 font-style: italic;
}

According to the above code snippet:

  • “font-style” allocates a specific style for the defined font.
  • “color” is set as the “blue” color for the <h2>.

Step 6: Access Div Container for Styling
Access the div container “id” by utilizing the id name “#div-iframe” and apply the CSS properties mention below:

#div-iframe{
 margin: 40px;
 text-align: center;
}

Here:

  • “margin” property defines the given space outside of the boundary.
  • “text-align” property aligns the added text in the center.

Step 7: Style iframe With CSS Properties
To style the iframe, apply the CSS properties according to your preference. For instance, we have used the “border” property to define the boundary around the element and the “border-style” for styling the border:

iframe{
 border: 5px solid blueviolet;
 border-style:inset;
}

Output

It can be observed that the CSS has been successfully applied to the added iframe.

Conclusion

To apply the CSS to an iframe, first, add an iframe by utilizing the “<iframe>” tag in HTML. Then, access it using the tag name and apply the required CSS properties, including “border”, “color”, “height”, and “width” to style and enhance the appearance of the iframe. This post demonstrated the method for applying the CSS properties to an iframe.

About the author

Hafsa Javed

View all posts