Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 101 - CodePilot V5.0 C7
P. 101

    RAPID RECALL                            Tick ( ) if you know this.

                         1.  Hover is used to apply styles when the mouse pointer moves over the link.

                         2.  External links connect your active web page to a separate web page.

                     STYLING OF AN IMAGE USING CSS

                     CSS allows you to enhance the appearance of images. You can use CSS to adjust the size, add
                     borders and apply special effects like shadows.

                     The following table lists all CSS properties, their values and descriptions used with the <IMG> tag:

                        Property Name                 Value                                Description

                      WIDTH                 Any numeric value in px       It sets the width of the image.
                                            or percentage

                      HEIGHT                Any numeric value in px       It sets the height of the image.
                                            or percentage

                      BORDER                SOLID, DASHED, DOUBLE         It sets the style, width and colour of the
                                                                          border of the image.

                      BORDER-RADIUS         Any numeric value in px       It sets the corners of the image to round.
                                            or percentage

                      OPACITY               A value between 0 and 1       It sets the transparency of an image.

                        Code     Write the HTML code to present the given web page using CSS properties to add a
                          7      border, rounded edges and opacity around the image.

                     <!DOCTYPE HTML>

                     <HTML>

                     <HEAD>
                     <TITLE>Flamingo Facts</TITLE>

                     </HEAD>
                     <BODY STYLE="BACKGROUND-COLOR: #F0F8FF;">

                     <H1 STYLE="COLOR: #FF6347;

                     TEXT-ALIGN:  CENTER;">All About Flamingos
                     </H1>
                     <H2 STYLE="COLOR: #4682B4; TEXT-ALIGN:
                     CENTER;">The Graceful Pink Birds</H2>

                                                                                                                      99
                                                                                               Making Web Pages Alive

| 96 97 98 99 100 101 102 103 104 105 106 |