Scribd
Upload
37 views9 pages

Q4 - Module5 - G10 - Programming Ii

This document discusses how to style hyperlinks using CSS. It covers the different pseudo-classes like :link, :visited, :hover, and :active. It provides examples of how to set properties like background color, text decoration, and color for each pseudo-class. The document also includes an activity to test the reader's understanding.

Uploaded by

JO EL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views9 pages

Q4 - Module5 - G10 - Programming Ii

This document discusses how to style hyperlinks using CSS. It covers the different pseudo-classes like :link, :visited, :hover, and :active. It provides examples of how to set properties like background color, text decoration, and color for each pseudo-class. The document also includes an activity to test the reader's understanding.

Uploaded by

JO EL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Grade

10 TVL- ICT

COMPUTER PROGRAMMING

QUARTER 4 – MODULE 5

CSS LINKS

Prepared by:

JOEL A. MANIO
Teacher III
San Jacinto National High School

0
QUARTER IV
WEEK IV

I. LEARNING OBJECTIVES

After reading this module you will be able to learn the how to use link using CSS.

II. INTRODUCTION

This module teaches you how to set different properties of a hyper link using CSS.
You can set following properties of a hyper link.

We will revisit the same properties when we discuss Pseudo-Classes of CSS.


 The :link signifies unvisited hyperlinks.
 The :visited signifies visited hyperlinks.
 The :hover signifies an element that currently has the user's mouse pointer hovering
over it.
 The :active signifies an element on which the user is currently clicking.

III. READINGS/LECTURES
 LINK – This will connect site from another site or specified location defends on the
programmer or programmer called hyperlink.
 VISITED – It's meant to help users distinguish the difference between links they have
and haven't visited.
 HOVER - selector is used to select elements when you mouse over them.
 ACTIVE - A hyperlink is considered to be an active hyperlink from the time a user
presses and releases the mouse button when clicking on the hyperlink.
 TEXT DECORATION - The text-decoration property is mostly used to remove
underlines from links.
 BACKGROUND COLOR - The background-color property can be used to specify a
background color for links.

LINK
The :link CSS pseudo-class represents an element that has not yet been visited. It matches
every unvisited <a> or <area> element that has an href attribute.
The following example shows Link Style:
<!DOCTYPE html>
<html>
<head>
<style>

1
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>

<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>

</body>
</html>
Output:

VISITED
The :visited CSS pseudo-class represents links that the user has already visited.
For privacy reasons, the styles that can be modified using this selector are very limited.
The following example shows Link styles:
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>

<body>
<a href = ""> link</a>
</body>
</html>

2
Output:

HOVER
The :hover CSS pseudo-class matches when the user interacts with an element with
a pointing device, but does not necessarily activate it. It is generally triggered when the
user hovers over an element with the cursor (mouse pointer).
The following example demonstrates how to change the color of links when we bring a
mouse pointer over that link. Possible values could be any color name in any valid format
The following example shows Hover link:
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>

<body>
<a href = "">Link</a>
</body>
</html>

Output:

ACTIVE
The :active CSS pseudo-class represents an element (such as a button) that is
being activated by the user. When using a mouse, "activation" typically starts when the user
presses down the primary mouse button.
The following example demonstrates how to change the color of active links. Possible values
could be any color name in any valid format.
The following example shows Active link:
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}

3
</style>
</head>

<body>
<a href = "">Link</a>
</body>
</html>
Output:

TEXT DECORATION
The text-decoration shorthand CSS property sets the appearance of decorative lines on text.
It is a shorthand for text-decoration-line , text-decoration-color , text-decoration-style , and
the newer text-decoration-thickness property.
The following example shows all these border widths:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: underline;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>
</html>

4
Output:

BACKGROUND COLOR
The background-color property sets the background color of an element.
The background of an element is the total size of the element, including padding and border
(but not the margin). Tip: Use a background color and a text color that makes the text
easy to read.
The following example shows Background Color:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}

a:visited {
background-color: cyan;
}

a:hover {
background-color: lightgreen;
}

a:active {
background-color: hotpink;
}
</style>
</head>
<body>

<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be
effective.</p>

</body>
</html>

Output:

5
ACTIVITY 1: Select your answer on the box the letter can be repeat on your answer.
A. Link B. Visited C . Hover D. Active E. Text Decoration
F. Background Color G. Background

1. The ______________ of an element is the total size of the element, including


padding and border (but not the margin).
2. The ______________ shorthand CSS property sets the appearance
of decorative lines on text.
3. The _____________ property can be used to specify a background color for
links.
4. This will connect site from another site or specified location defends on the
programmer or programmer called hyperlink called ____________.
5. Pseudo-class represents links that the user has already __________.
6. Use a ____________________ and a text color that makes the text easy to
read.
7. It is generally triggered when the user _________over an element with the cursor
(mouse pointer)..
8. A hyperlink is considered to be an __________ hyperlink from the time a user
presses and releases the mouse button when clicking on the hyperlink.?
9. It is a type of link that the user to select elements when you mouse over them
what is this __________?
10. For privacy reasons, the styles that can be modified using this selector are very
limited called __________?

SUMMATIVE EVALUATION

A. MODIFIED TRUE OR FALSE:


Write TRUE if the statement is correct and if it is FALSE

1. Hover is a normal, unvisited link

6
2. Link is a link when the user mouses over it
3. Visited link is a link the user has visited
4. Active is a link the moment it is clicked
5. The background-color property can be used to specify a background color for
links
6. The text-decoration property is mostly used to remove underlines from links
7. When setting the style for several link states, a:link MUST come after a:hover and
a:visited
8. There are three links states in CSS.
9. When setting the style for several link states, a:active MUST come after a:hover
10. With CSS, links can be styled in different ways.

B. Complete the codes by following the instructions below.

1. Identify the output of this code (10 pts)


Hint: Use the rounded properties.
Edit this code

<!DOCTYPE html> Key Answer


<html>
<head> 1. G
<style>
a:link, a:visited { 2. E
background-color: white; 3. F
color: black;
border: 2px solid green; 4. A
padding: 10px 20px; 5. B
text-align: center;
text-decoration: none; 6. F
display: inline-block; 7. C
}
8. D
a:hover, a:active { 9. C
background-color: green;
color: white; 10.B
}
</style>
</head>
<body>

<a href="default.asp" target="_blank">This is a link</a>

</body>
</html> >

7
References: https://www.w3schools.com/css
Learn to Code HTML & CSS –Develop and Style Website by: Shay Howe

ANSWER SHEET

NAME: ________________________________________ Score: ____________________


Gr. & Sec: ___________________ Subj. Teacher: _______________________________

You might also like