LEARNING ACTIVITY NO.

10

Activity Title: CSS Links

Learning Targets:
1. I can identify the different properties of a link in CSS.
2. I can create an HTML page with the application of icons and links using CSS style.
3. I can appreciate the importance of an icon and links in a website.

References:
1. W3Schools.com. CSS links. Retrieve on November 09, 2020
https://www.w3schools.com/css/css_link.asp

I. Concepts/Examples:
CSS Links

With CSS, links can be styled in different ways.

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example:
a{
color: hotpink; }

In addition, links can be styled differently depending on

what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

49 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
 When setting the style for several link states, there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

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 Buttons

50 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
 This example demonstrates a more advanced example where we combine several CSS
properties to display links as boxes/buttons:

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; }

Example:
This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}

a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}

a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}

a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}

a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}

a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline; }

51 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
 Example:
Another example of how to create link boxes/buttons:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block; }
a:hover, a:active {
background-color: green;
color: white; }
Example:

This example demonstrates the different types of cursors (can be useful for links):

52 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022
<p>Mouse over the words to change the cursor.</p>
<span style="cursor: auto">auto</span><br>
<span style="cursor:
crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-
resize</span><br>
<span style="cursor: nw-resize">nw-
resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: -">se-resize</span><br>
<span style="cursor: sw-resize">sw-
resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>

II. Exercises/Activities:

Activity 1. Fill-in the Blanks

Directions: Study the codes below and fill-in the blanks with the correct answers.

1. Set the color for links to "green". 2. Set the color for unvisited links to "red",
Hint: Use the color property and the color for visited links "blue".
Hint: The four links states are: a:link,
a:visited, a:hover, a:active
<html> <html>
<head> <head>
<style> <style>
_______________________________________ ___________________
<style> ___________________
</head> ___________________
<body> ___________________
<p>This is a paragraph. </p> ___________________
<p>This is another paragraph. </p> ___________________
<p><a /* mouse over link */
href="https://www.w3schools.com">W3Scho a:hover {
ols.com</a></p> color: black; }
</body> /* selected link */
</html> a:active {
color: green; }
<style>
</head>
<body>
<p>This is a paragraph. </p>
<p><a
href="https://www.w3schools.com">W3Sc
hools.com</a></p>
</body>
</html>

53 | L e a r n i n g A c t i v i t y S h e e t i n C O M - E D - 1 0 SY: 2021-2022