CSS/C3/Link-in-CSS/English

From Script | Spoken-Tutorial
Revision as of 18:15, 11 November 2020 by Nehasolanki (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title of the script: Link in CSS

Author: Neha Solanki

Domain Reviewer: Ankita Maske, Om Prakash Soni

Novice Reviewer: Madhuri Ganapathi

Keywords: CSS, HTML, Web Page, Web Design, Web Technology, Video Tutorial, Spoken Tutorial, CSS Link, Visited link, Hover link, Active link, a:link, a:visited, a:hover, a:active

Visual Cue Narration
Slide: Title Welcome to the spoken tutorial on “Link in CSS” .
Slide: Learning Objectives In this tutorial, we will learn about:
  • Styling links in CSS by applying different properties
  • Customising links to match their individual website designs.
Slide:

System Requirements

This tutorial is recorded using,
  • Ubuntu Linux OS v 18.04
  • CSS3
  • HTML5
  • gedit Text Editor and
  • Firefox web browser

However you may use any other editor or browser of your choice.

Slide: System Requirements You will also need internet connectivity to go to the external websites.
Slide: Prerequisite

https://spoken-tutorial.org

To practise this tutorial, you should know to use HTML and CSS.

If not, please go through the HTML and CSS tutorials on this website.

Slide: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Make a copy and then use them while practising.

Slide: Link
  • Links allow users to navigate through the website from page to page
Narration: Let’s add a link to a page.
Open my-css folder Go to the practice folder my-css.
Point to Mypage.html in my-css folder For this demonstration, I’m using the file Mypage.html.

The same is available in the Code files link for practice.

Open Mypage.html in gedit Open the file Mypage.html in the text editor.
[gedit - Mypage.html]

Type:

<br> <br>

<a href="https://spoken-tutorial.org" target=”_blank”> Spoken Tutorial </a>

<br> <br>

Inside the body tag, next to the div closing tag, type the code as shown.

[gedit - Mypage.html]

Highlight:

<a href="https://spoken-tutorial.org" target=”_blank”> Spoken Tutorial </a>

I have created a link for the Spoken Tutorial website homepage.

Here, target="_blank" is used, so that the link will be opened in a new browser tab.

Press Ctrl + S Save the file.
Open Mypage.html in firefox Switch to the my-css folder.

Now open the file Mypage.html in a web browser.

[Firefox]

Highlight the output

Observe the output.

The link for the Spoken Tutorial webpage is added to this page.

The color of the link is by default set to blue and it is underlined.

[Firefox] Click on the link

Point to the link

Point to the web page

Click on the link.

While clicking, the color of the link appears in red.

Spoken Tutorial web page opens.

Since, target="_blank" was used, the link opened in a new tab.

[Firefox]

Switch to previous page

Point to the link

Come back to the previous page.

Observe the color of the link.

Now it has changed to purple.

Slide: Link By default:
  • All links are underlined
  • The color of the
    • unvisited link is set to blue
    • active link is set to red
    • visited link is set to purple
Slide: Link States Links can be in any of the four possible states.
  • link: It is a normal and unvisited link
  • visited: link which is already visited
  • hover: link when we place the mouse over it
  • active: link which is just clicked

The order in which link states have to be written is: link, visited, hover, active.

Slide: Link Using CSS property we can style the links in many ways, to make them stand out.

We can change the values of any of the following to match our web design:

  • Color
  • Background
  • Text Decoration

Let us understand these through examples.

Switch to my-css folder Switch to the “my-css” folder.
Open mystyle.css Now open the file mystyle.css, in any text editor.

I have opened it in the gedit Text Editor.

[gedit - mystyle.css]

Type-

a:link {color: black;}

a:visited {color: red;}

a:hover {color: green;}

a:active {color: blue;}

Now I will set color property for all the link states.

Next to the img tag, type code as shown.

[gedit - mystyle.css]

Highlight-

a:link {color: black;}

a:visited {color: red;}

a:hover {color: green;}

a:active {color: blue;}

In this code, we are changing the default state colours.

Normal and unvisited link is set to black.

Visited link is set to red.

Hover link is set to green.

Active link is set to blue.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Point to the link

Observe the output.

Color of the link is red

This is because we have already visited this link in our previous example.

[Firefox]

Point to the link

Move the mouse pointer over the link.

Notice that the color of the link has changed from red to green.

This is because we have set the color green to the hover state.

Narration: Let us now add two more links to the page.
Switch to Mypage.html in gedit Switch to Mypage.html file in the text editor.
[gedit - Mypage.html]

<a href="https://forums.spoken-tutorial.org" target=”_blank”> Forum Spoken Tutorial </a>

<br> <br>

<a href="https://www.google.com" target=”_blank”> Google </a>

<br> <br>

At the end of the body tag, type the code as shown.
Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Point to the link

Observe the output.

The new links are added to the page.

The color of these links is set to black.

This is because the links are unvisited.

[Firefox] Click on the link

Point to the link

Point to the web page

Click on the link - Forum Spoken Tutorial.

While clicking, notice the color of the link changes to blue.

Forum Spoken tutorial page opens.

[Firefox]

Switch to previous page

Point to the link

Come back to the previous page.

Observe the color of the link - Forum Spoken Tutorial.

Now the color of the link has changed to red.

Narration Generally links are present as menus in web pages.

Usually the menus are not underlined.

So we will use text decoration property to remove the underline.

Switch to mystyle.css Switch to the mystyle.css file.
[gedit - mystyle.css]

Update:

a:link {

color: black;

text-decoration: none;

background-color: palegreen;

}


a:visited {

color: red;

background-color: lightcyan;

}


a:hover {

color: green;

text-decoration: underline;

background-color: hotpink;

}


a:active {

color: blue;

background-color: lightgreen;

}

Next to the img tag, update the code as shown.

To remove the underline from a link, we are using this text decoration property.

Here, I am also changing the background color of the links.

Press Ctrl + S Save the file.
Switch to firefox Switch to the browser and refresh the page.
[Firefox]

Point to the first two links

Observe the output.

The background color for the first two links is set to lightcyan.

This is because they are visited links.

[Firefox]

Point to the third link

The background color for the third link is set to palegreen.

This is because it is an unvisited link.

[Firefox]

Point to the third link

These links are not underlined.

This is because the text decoration property for a:link state is set to none.

[Firefox]

Point to the link

When we move the mouse over the link, it gets underlined.

Also, the background color of the link changes to hot pink.

[Firefox]

Point to the link

When we click on the link, the background color changes to light green.
Only narration In this manner, we can style our links using CSS.
Only narration With this we have come to the end of this tutorial.

Let us summarize.

Slide: Summary In this tutorial, we have learnt about:
  • Styling links in CSS by applying different properties
  • Customising links to match their individual website designs.
Slide: Assignment As an assignment
Slide: Assignment
  • Open the file styles.css which you have created earlier.
  • Set red color for the unvisited link.
  • Set green color for the visited link.
  • Remove underline from all the link states.
  • Link the styles.css file to webpage.html file
  • Observe the output.
Slide:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial Workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forums Please post your timed queries on this forum.
Slide: Acknowledgement Spoken Tutorial project is funded by the Ministry of Education (MoE), Govt. of India.
Slide: Thanks This is Neha Solanki from IIT Bombay.

Thank you for watching.

Contributors and Content Editors

Nehasolanki, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=CSS/C3/Link-in-CSS/English&oldid=54388"