SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Css3
Css3Css3
Css3
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
 
Css Ppt
Css PptCss Ppt
Css Ppt
 
Intro to HTML and CSS basics
Intro to HTML and CSS basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
css.ppt
css.pptcss.ppt
css.ppt
 
Introduction to Bootstrap
Introduction to BootstrapIntroduction to Bootstrap
Introduction to Bootstrap
 
Sass - Getting Started with Sass!
Sass - Getting Started with Sass!Sass - Getting Started with Sass!
Sass - Getting Started with Sass!
 
Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4Introduction to CSS Borders - Lesson 4
Introduction to CSS Borders - Lesson 4
 
CSS Font & Text style
CSS Font & Text style CSS Font & Text style
CSS Font & Text style
 
Cascading style sheet
Cascading style sheetCascading style sheet
Cascading style sheet
 
Id and class selector
Id and class selectorId and class selector
Id and class selector
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Cascading style sheets (CSS)
Cascading style sheets (CSS)Cascading style sheets (CSS)
Cascading style sheets (CSS)
 
Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)Introduction to Cascading Style Sheets (CSS)
Introduction to Cascading Style Sheets (CSS)
 
Css position
Css positionCss position
Css position
 
Bootstrap Part - 1
Bootstrap Part - 1Bootstrap Part - 1
Bootstrap Part - 1
 
Css box-model
Css box-modelCss box-model
Css box-model
 

Similar a CSS - Styling Links and Creating Navigation

Similar a 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
 

Más de Vidya Ananthanarayanan

Más de 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
 

Último

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024Lorenzo Miniero
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Commit University
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxhariprasad279825
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Enterprise Knowledge
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 

Último (20)

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024SIP trunking in Janus @ Kamailio World 2024
SIP trunking in Janus @ Kamailio World 2024
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!Nell’iperspazio con Rocket: il Framework Web di Rust!
Nell’iperspazio con Rocket: il Framework Web di Rust!
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Artificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptxArtificial intelligence in cctv survelliance.pptx
Artificial intelligence in cctv survelliance.pptx
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 

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