SlideShare a Scribd company logo
1 of 7
CSS - Links
This chapter 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 will 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.
 Usually, all these properties are kept in the header part of the HTML
document.
 Remember a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective. Also, a:active MUST come after a:hover in
the CSS definition as follows −
<style type = "text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
Now, we will see how to use these properties to give different effects to
hyperlinks.
Set the Color of Links
The following example demonstrates how to set the link color. Possible
values could be any color name in any valid format.
<html>
<head>
<style type = "text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
<html>
<head>
<style type = "text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href = ""> link</a>
</body>
</html>
<html>
<head>
<style type = "text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>
<html>
<head>
<style type = "text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href = "">Link</a>
</body>
</html>

More Related Content

Similar to Css links

Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
Chirag Aggarwal
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
Ismaciil2
 

Similar to Css links (20)

Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)Make Css easy(part:2) : easy tips for css(part:2)
Make Css easy(part:2) : easy tips for css(part:2)
 
Sacramento web design
Sacramento web designSacramento web design
Sacramento web design
 
Hyperlink
HyperlinkHyperlink
Hyperlink
 
Css
CssCss
Css
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
html-css
html-csshtml-css
html-css
 
HTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchorsHTML5 - create hyperlinks and anchors
HTML5 - create hyperlinks and anchors
 
Css
CssCss
Css
 
Css jon duckett - flashcards
Css   jon duckett - flashcardsCss   jon duckett - flashcards
Css jon duckett - flashcards
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
Css
CssCss
Css
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Tfbyoweb.4.9.17
Tfbyoweb.4.9.17Tfbyoweb.4.9.17
Tfbyoweb.4.9.17
 
Css
CssCss
Css
 

More from AbhishekMondal42

More from AbhishekMondal42 (20)

Oss evaluation-certification-oss-financial-advantages
Oss evaluation-certification-oss-financial-advantagesOss evaluation-certification-oss-financial-advantages
Oss evaluation-certification-oss-financial-advantages
 
Word press 01
Word press 01Word press 01
Word press 01
 
Word press posts(preview &amp; publish)
Word press posts(preview &amp; publish)Word press posts(preview &amp; publish)
Word press posts(preview &amp; publish)
 
Word press posts(add , edit , delete post)
Word press posts(add , edit , delete post)Word press posts(add , edit , delete post)
Word press posts(add , edit , delete post)
 
Word press pages(edit and delete)
Word press pages(edit and delete)Word press pages(edit and delete)
Word press pages(edit and delete)
 
Word press pages(add)
Word press pages(add)Word press pages(add)
Word press pages(add)
 
Word press media(add,insert,delete)
Word press media(add,insert,delete)Word press media(add,insert,delete)
Word press media(add,insert,delete)
 
Word press media library
Word press media libraryWord press media library
Word press media library
 
Word press widget management
Word press  widget managementWord press  widget management
Word press widget management
 
Word press view plugins
Word press  view pluginsWord press  view plugins
Word press view plugins
 
Word press user roles
Word press  user rolesWord press  user roles
Word press user roles
 
Word press theme management
Word press  theme managementWord press  theme management
Word press theme management
 
Word press personal profile
Word press  personal profileWord press  personal profile
Word press personal profile
 
Word press moderate comments
Word press  moderate commentsWord press  moderate comments
Word press moderate comments
 
Word press install plugins
Word press  install pluginsWord press  install plugins
Word press install plugins
 
Word press edit users
Word press  edit usersWord press  edit users
Word press edit users
 
Word press edit tags
Word press  edit tagsWord press  edit tags
Word press edit tags
 
Word press edit links
Word press  edit linksWord press  edit links
Word press edit links
 
Word press edit comments
Word press  edit commentsWord press  edit comments
Word press edit comments
 
Word press delete users
Word press  delete usersWord press  delete users
Word press delete users
 

Recently uploaded

Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
Chris Hunter
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
negromaestrong
 

Recently uploaded (20)

Unit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptxUnit-IV- Pharma. Marketing Channels.pptx
Unit-IV- Pharma. Marketing Channels.pptx
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Making and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdfMaking and Justifying Mathematical Decisions.pdf
Making and Justifying Mathematical Decisions.pdf
 
Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104Nutritional Needs Presentation - HLTH 104
Nutritional Needs Presentation - HLTH 104
 
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
Mattingly "AI & Prompt Design: Structured Data, Assistants, & RAG"
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
Ecological Succession. ( ECOSYSTEM, B. Pharmacy, 1st Year, Sem-II, Environmen...
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Class 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdfClass 11th Physics NEET formula sheet pdf
Class 11th Physics NEET formula sheet pdf
 
Seal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptxSeal of Good Local Governance (SGLG) 2024Final.pptx
Seal of Good Local Governance (SGLG) 2024Final.pptx
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17  How to Extend Models Using Mixin ClassesMixin Classes in Odoo 17  How to Extend Models Using Mixin Classes
Mixin Classes in Odoo 17 How to Extend Models Using Mixin Classes
 
Paris 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activityParis 2024 Olympic Geographies - an activity
Paris 2024 Olympic Geographies - an activity
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Grant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy ConsultingGrant Readiness 101 TechSoup and Remy Consulting
Grant Readiness 101 TechSoup and Remy Consulting
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
APM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across SectorsAPM Welcome, APM North West Network Conference, Synergies Across Sectors
APM Welcome, APM North West Network Conference, Synergies Across Sectors
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 

Css links

  • 2. This chapter 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 will 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.  Usually, all these properties are kept in the header part of the HTML document.  Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows −
  • 3. <style type = "text/css"> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FFCC00} a:active {color: #FF00CC} </style> Now, we will see how to use these properties to give different effects to hyperlinks. Set the Color of Links The following example demonstrates how to set the link color. Possible values could be any color name in any valid format.
  • 4. <html> <head> <style type = "text/css"> a:link {color:#000000} </style> </head> <body> <a href = "">Link</a> </body> </html>
  • 5. <html> <head> <style type = "text/css"> a:visited {color: #006600} </style> </head> <body> <a href = ""> link</a> </body> </html>
  • 6. <html> <head> <style type = "text/css"> a:hover {color: #FFCC00} </style> </head> <body> <a href = "">Link</a> </body> </html>
  • 7. <html> <head> <style type = "text/css"> a:active {color: #FF00CC} </style> </head> <body> <a href = "">Link</a> </body> </html>