How to Block CSS From Affecting iFrame
If you use Cascading Style Sheets (CSS) to design your website and you have an iFrame, or inline frame, on your page, the iFrame has the potential to inherit the style rules from your CSS. Oftentimes, the style is unwanted because it displays your frame with an unwanted characteristic such as a border. Further, if your iFrame contains HyperText Markup Language (HTML) elements, such as a paragraph, the text has the potential to adopt the CSS styles. To stop this, add style rules directly to your iFrame code to block the original CSS from affecting your iFrame.
Other People Are Reading
Instructions
-
-
1
Start your text editor program and open the website document that contains your iFrame.
-
2
Locate the iFrame code in the HTML. A typical iFrame looks like the following example:
<iframe src="URL of website" width="300px" height="400px">
<p>Your content.</p>
</iframe> -
-
3
Position your cursor inside the iframe tag. Type "style=" inside the brackets, enter a pair of quotation marks and type the attribute you want followed by a colon and the desired value inside the quotations. For instance, to block a border from appearing around the iFrame window, type "border: none" like so:
<iframe style="border: none"> -
4
Place your cursor inside the HTML element, such as <p>, that is being affected by your current CSS. Common CSS rules that affect the HTML elements in your iFrame include the typeface size and color. Type "font-size: ;" and "color: " inside the element and enter the desired values after each attribute like so:
<p style="font-size: 12px; color: black"> -
5
Save your document and preview it in a browser to see the changes. When ready, upload the file to your Web host to make the modified iFrame live on the Internet.
-
1
Tips & Warnings
The attribute in a CSS style rule names the particular property, such as color, that you are styling. The value of the attribute is the specific characteristic, such as blue, you are assigning to the property.
If your iFrame does not load, the HTML elements, such as paragraphs, you encompass in the iFrame code appear in lieu of the frame.
References
Resources
- Photo Credit Ciaran Griffin/Stockbyte/Getty Images
