Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 36 - 2609_Logiccode
P. 36

    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 3.  Write the HTML code to display the given web page using CSS pseudo-classes to style 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>

                       34   Premium Edition-VII

| 31 32 33 34 35 36 37 38 39 40 41 |