Pravin1389 at 13:54, 13 November 2020

2020-11-13T13:54:10Z

Nehasolanki: Created page with "'''Title of the script: '''Link in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

2020-11-11T12:45:23Z

Created page with "'''Title of the script: '''Link in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."

New page

'''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

{| border="1"
|-
| | '''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:

<nowiki> </nowiki>

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

<nowiki> </nowiki>
| |

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/ 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>

<nowiki> </nowiki>

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

<nowiki> </nowiki>
| | 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.
|-
|}

@@ Line 15: / Line 15: @@
 |-
 |  | Slide: Title
-|  | Welcome to the spoken tutorial on “'''Link in CSS'''” .
+|  | Welcome to this spoken tutorial on “'''Link in CSS'''” .
 |-
 |  | Slide: Learning Objectives
@@ Line 57: / Line 57: @@
 |  | Slide: Link
 |  |
-* '''Links '''allow users to navigate through the '''website''' from '''page''' to '''page'''
+* '''Link '''allow users to navigate through the '''website''' from '''page''' to '''page'''
 |-
@@ Line 69: / Line 69: @@
 |  | For this demonstration, I’m using the file '''Mypage.html'''.
-The same is available in the '''Code files''' link for practice.
+The same file is available in the '''Code files''' link for practice.
 |-
 |  | Open Mypage.html in gedit

CSS/C3/Link-in-CSS/English - Revision history

Pravin1389 at 13:54, 13 November 2020

Nehasolanki: Created page with "'''Title of the script: '''Link in CSS '''Author:''' Neha Solanki '''Domain Reviewer: '''Ankita Maske, Om Prakash Soni '''Novice Reviewer:''' Madhuri Ganapathi '''Keywords..."