Basic HTML Version

|  | Table of Contents |  | View Full Version

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

| 79 80 81 82 83 84 85 86 87 88 89 |