CSS/C3/Link-in-CSS/English

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 this 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	Link 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 file 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 Open the file webpage.html which you have created earlier. Add a link to https://forums.spoken-tutorial.org.
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