SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (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
 

Ähnlich wie CSS - Styling Links and Creating Navigation

Ähnlich wie 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
 

Mehr von 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
 

Kürzlich hochgeladen

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
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Kürzlich hochgeladen (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
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, ...
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
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
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
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
 
"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 ...
 
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
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
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
 
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
 
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
 

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; }