Page 84 - CodePilot V5.0 C8
P. 84
CSS WITH IFRAMES
Cascading Style Sheets (CSS) can be used to style inline frames, allowing you to control their
appearance, such as setting borders and adjusting dimensions to make them more visually
appealing. You can have a visual outline around a frame. You can modify the style, width and
colour of the outline around the frame. This outline helps in improving the readability and is also
useful for highlighting important frames on the web page. You can use individual properties like
BORDER-STYLE, BORDER-WIDTH or BORDER-COLOR to change the border’s style, width and
colour. Alternatively, you can use the shorthand border property to set all three values at once.
The following table summarises the CSS properties that can be used to style the borders of
a frame:
Property Values Description
BORDER-STYLE DASHED, DOTTED, DOUBLE, It specifies the style of the border.
GROOVE and RIDGE
BORDER-WIDTH THIN, MEDIUM, THICK and It specifies the width of the border.
values in pixels.
BORDER-COLOR Colour name, Hex value It specifies the colour of the border.
BORDER Width Style Colour It specifies three border properties: WIDTH,
STYLE and COLOR.
Code Write the HTML code to display the given web page using CSS border properties to
3 style the <IFRAME> tag with different border styles.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Iframe styling borders</TITLE>
<STYLE>
BODY {BACKGROUND-COLOR: #FFFACD;}
H2 {COLOR: #4CAF50;}
</STYLE>
</HEAD>
<BODY>
<H2>Styling Iframes with Different
Border Styles</H2>
<IFRAME SRC="Artificial_
Intelligence.html" STYLE="BORDER-WIDTH:4PX; BORDER-STYLE: DASHED;
BORDER-COLOR:RED;" HEIGHT=400PX WIDTH=300PX>
</IFRAME>
82
CodePilot (V5.0)-VIII
