Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 97 - CodePilot V5.0 C7
P. 97

    USING CSS WITH HYPERLINKS
                     CSS allows you to change the appearance of the link based on its state when a user interacts with

                     it using CSS pseudo-classes:
                         A:LINK: It is used to apply styles to non-visited links.

                         A:VISITED: It is used to apply styles to visited links.

                         A:HOVER: It is used to apply styles when the mouse pointer moves over the link.
                         A:ACTIVE: It is used to apply styles to an active link. A link becomes active when the user clicks
                        on it.

                        Code     Write the HTML code to display the given web page using CSS pseudo-classes to style
                          3      the different states of hyperlinks.

                     <!DOCTYPE HTML>
                     <HTML>

                     <HEAD>

                     <TITLE>The Human Digestive System</TITLE>
                     <STYLE>

                     A{FONT-SIZE: 22PX;}

                     A:LINK {COLOR: MEDIUMVIOLETRED;}
                     A:VISITED {COLOR: DARKORANGE; }

                     A:HOVER {COLOR: MEDIUMSEAGREEN;}

                     A:ACTIVE {COLOR: FIREBRICK;}

                     </STYLE>
                     </HEAD>

                     <BODY STYLE="BACKGROUND-COLOR: LIGHTPINK; COLOR: DARKSLATEGRAY;">

                     <H1 STYLE="COLOR: DEEPPINK;">The Human Digestive System</H1>
                     <P STYLE="FONT-SIZE: 18PX;">

                     The digestive system breaks down food into nutrients that the body uses
                     for energy, growth  and repair. Below is a link to learn more about
                     different parts of the digestive system:

                     </P>
                     <A HREF="https://en.wikipedia.org/wiki/Human_digestive_system" TARGET=

                     "_BLANK"> Click here to know more</A>
                     </BODY>

                     </HTML>

                                                                                                                      95
                                                                                               Making Web Pages Alive

| 92 93 94 95 96 97 98 99 100 101 102 |