SlideShare a Scribd company logo
1 of 14
CSS - Links and
  Navigation
Link States
• Most hyperlinks have four states they can be
  in:
        • unvisited (default link state)
        • visited
        • hover
        • active (being clicked)
Psuedo-Class Selectors
• There are four pseudo-class selectors that
  correspond to these states:
      • a:link
      • a:visited
      • a:hover
      • a:active
  These have to be used in exactly this order!
  Use this handy mnemonic: LoVe/HAte
Using Psuedo-Class
     Selectors
a:link {color: #F60; }
a:visited {color: #900; }
a:hover {color: #F33;}
a:active {color: #B2F511; }
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation

More Related Content

What's hot

What's hot (20)

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
CSS
CSSCSS
CSS
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Flexbox
FlexboxFlexbox
Flexbox
 
Html
HtmlHtml
Html
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)Cascading Style Sheet (CSS)
Cascading Style Sheet (CSS)
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Java script array
Java script arrayJava script array
Java script array
 
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
 
cascading style sheet ppt
cascading style sheet pptcascading style sheet ppt
cascading style sheet ppt
 
CSS Grid
CSS GridCSS Grid
CSS Grid
 
CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout CSS Day: CSS Grid Layout
CSS Day: CSS Grid Layout
 
Html forms
Html formsHtml forms
Html forms
 
Dom(document object model)
Dom(document object model)Dom(document object model)
Dom(document object model)
 
Css position
Css positionCss position
Css position
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 

Similar to CSS - Styling Links and Creating Navigation

Similar to CSS - Styling Links and Creating Navigation (20)

Web Typography
Web TypographyWeb Typography
Web Typography
 
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
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
css-tutorial
css-tutorialcss-tutorial
css-tutorial
 
PHP - Introduction to PHP CSS
PHP -  Introduction to PHP CSSPHP -  Introduction to PHP CSS
PHP - Introduction to PHP CSS
 
Css pseudo-classes
Css pseudo-classesCss pseudo-classes
Css pseudo-classes
 
uptu web technology unit 2 Css
uptu web technology unit 2 Cssuptu web technology unit 2 Css
uptu web technology unit 2 Css
 
1. Seo OnPage
1. Seo OnPage1. Seo OnPage
1. Seo OnPage
 
1. seo onpage
1. seo onpage1. seo onpage
1. seo onpage
 
Css
CssCss
Css
 
Customizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSSCustomizing Your WordPress Theme Using Firebug and Basic CSS
Customizing Your WordPress Theme Using Firebug and Basic CSS
 
Technical SEO Introduction
Technical SEO IntroductionTechnical SEO Introduction
Technical SEO Introduction
 
Digital marketing
Digital marketingDigital marketing
Digital marketing
 
BITM3730 9-26.pptx
BITM3730 9-26.pptxBITM3730 9-26.pptx
BITM3730 9-26.pptx
 
Omeka css
Omeka cssOmeka css
Omeka css
 
What is SEO | Complete Details about SEO
What is SEO | Complete Details about SEOWhat is SEO | Complete Details about SEO
What is SEO | Complete Details about SEO
 
Css
CssCss
Css
 
Girls Can Code East Brunswick Workshop Notes
Girls Can Code East Brunswick Workshop NotesGirls Can Code East Brunswick Workshop Notes
Girls Can Code East Brunswick Workshop Notes
 
Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4Rapid HTML Prototyping with Bootstrap 4
Rapid HTML Prototyping with Bootstrap 4
 

More from Vidya Ananthanarayanan (7)

Social Media For Non-Profits & Educators
Social Media For Non-Profits & EducatorsSocial Media For Non-Profits & Educators
Social Media For Non-Profits & Educators
 
Microblogging
MicrobloggingMicroblogging
Microblogging
 
SEO: A Web Design Perspective
SEO: A Web Design PerspectiveSEO: A Web Design Perspective
SEO: A Web Design Perspective
 
CSS - Adding Background Images
CSS - Adding Background ImagesCSS - Adding Background Images
CSS - Adding Background Images
 
Styling Text With CSS
Styling Text With CSSStyling Text With CSS
Styling Text With CSS
 
Box Model and Page Layouts
Box Model and Page LayoutsBox Model and Page Layouts
Box Model and Page Layouts
 
An Introduction to CSS
An Introduction to CSSAn Introduction to CSS
An Introduction to CSS
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 

Recently uploaded (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 

CSS - Styling Links and Creating Navigation

  • 1. CSS - Links and Navigation
  • 2. Link States • Most hyperlinks have four states they can be in: • unvisited (default link state) • visited • hover • active (being clicked)
  • 3. Psuedo-Class Selectors • There are four pseudo-class selectors that correspond to these states: • a:link • a:visited • a:hover • a:active These have to be used in exactly this order! Use this handy mnemonic: LoVe/HAte
  • 4. Using Psuedo-Class Selectors a:link {color: #F60; } a:visited {color: #900; } a:hover {color: #F33;} a:active {color: #B2F511; }