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
