Your SlideShare is downloading. ×
Links and Navigation
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Links and Navigation


Published on

Published in: Technology, Education

1 Comment
1 Like
  • Buy Wholesale Cell Phones, QuadBand Cellular Phones, Watch Mobiles, Cheap Cell Phones, TV Mobile Phones, PDA Smart Phones, Dual SIMs & Dual Standby Phones and Accessories Direct from China in A Low Prices
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Links & Navigation <and presentation with css /> Advanced CSS Stephen Ireland
  • 2. Links How the web works - we need to get it right • Conventions should be followed • Links should stand out on a page • Differentiate from body text, preferably with some kind of hover effect • Make something look and act like a button - it becomes easier to understand what it does Advanced CSS Stephen Ireland
  • 3. Anatomy of a Link Relative link within site <a href=”index.html”>Link text goes here</a> <a href=”pages/contact.html”>Contact us</a> <a href=””>Google</a> need http:// if linking to an external website Advanced CSS Stephen Ireland
  • 4. States of a Link A link has four states of activity • Unvisited • Hover • Active • Visited Advanced CSS Stephen Ireland
  • 5. States of a Link What the states mean • Unvisited - user has not visited the link location • Hover - user is hovering over the link (mouse or keyboard) • Active - user has clicked down but not released • Visited - user has visited the location the link points to Why do we need to know this? Because we can control the physical appearance of each state using CSS. Advanced CSS Stephen Ireland
  • 6. Referenced in CSS State CSS selector Default appearance • Unvisited a:link blue, underlined • Hover a:hover blue, underlined • Active a:active red, underlined • Visited a:visited purple, underlined The default appearance of an html link is ugly. CSS gives us ultimate control to change the appearance of the link and its various states. Advanced CSS Stephen Ireland
  • 7. Examples of Styled Link Advanced CSS Stephen Ireland
  • 8. Link Styles What we have control over • Text colour (color) • Font family and style • Background colour • Decoration (Underline, strike-through, etc) • And more Links are inline elements, however we can force them to behave like block-level elements using display: block; Advanced CSS Stephen Ireland
  • 9. How Styles are Applied CSS a:link, a:visited { All links visited or text-decoration: underline; unvisited will be green color: #b3ff3d; and underlined. } a:hover { When hovering over the text-decoration: none; link, the underline will color: #000000; disappear and the link } text will appear black. Advanced CSS Stephen Ireland
  • 10. Be More Specific CSS p a:link, p a:visited { All links in a paragraph text-decoration: underline; visited or unvisited color: #b3ff3d; will be green and } underlined. In many cases we need to be more specific with our CSS styles. The CSS rule above will only affect links within paragraph tags. Advanced CSS Stephen Ireland
  • 11. Navigation and Links What’s the difference? • Navigation is really a group of carefully considered links. • Gives structure and consistency to a website. • Helps visitors around the site, and get back to the homepage. Good navigation should allow a visitor to quickly find what they are looking for on your site. Advanced CSS Stephen Ireland
  • 12. HTML Markup for Navigation Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> <li><a href=”page3.html”>Page 3</a></li> <li><a href=”page4.html”>Page 4</a></li> <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  • 13. Horizontal or Vertical? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> <li><a href=”page2.html”>Page 2</a></li> Use this HTML markup whether you <li><a href=”page3.html”>Page 3</a></li> want your navigation to flow vertically or <li><a href=”page4.html”>Page 4</a></li> horizontally. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  • 14. Why? Example HTML <div id=”navigation”> <ul> <li><a href=”page1.html”>Page 1</a></li> Because whether navigation displays <li><a href=”page2.html”>Page 2</a></li> horizontally or vertically, it is a <li><a href=”page3.html”>Page 3</a></li> presentational consideration, therefore <li><a href=”page4.html”>Page 4</a></li> controlled using CSS. <li><a href=”page5.html”>Page 5</a></li> </ul> </div> Advanced CSS Stephen Ireland
  • 15. Applying Styles Unstyled Styled Advanced CSS Stephen Ireland
  • 16. Step One: Ground Rules We apply some basic styles to the navigation div. CSS #navigation { width: 200px; font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
  • 17. Step Two: Reset Browser Defaults Reset margin and padding on the Unordered List to 0. CSS #navigation ul { margin: 0; padding: 0; } Advanced CSS Stephen Ireland
  • 18. Step Three: Style the <li> Remove the bullet from the list-item and put a coloured border in place. CSS #navigation ul li { list-style: none; border-bottom: 1px solid #b64926; } Advanced CSS Stephen Ireland
  • 19. Step Four: Colour and Block Style the link, display: block; converts the link into a clickable block area. CSS #navigation ul li a:link, #navigation ul li a:visited { display: block; padding: 8px 12px; text-decoration: none; background-color: #8e2800; color: #fff0ab; } Advanced CSS Stephen Ireland
  • 20. Step Five: Hover State Create a roll-over style for the navigation - by changing the background colour of the link. CSS #navigation ul li a:hover { background-color: #468966; } Advanced CSS Stephen Ireland
  • 21. Your Vertical Nav Bar But what if we want it to display horizontally? Advanced CSS Stephen Ireland
  • 22. Horizontal Navigation Remove the contraining width... CSS #navigation { /*width: 200px;*/ font-family: “Lucida Grande”, “Trebuchet MS”, sans-serif; font-size: 80%; font-weight: bold; } Advanced CSS Stephen Ireland
  • 23. Horizontal Navigation Float the list-items left, and change the border to right. CSS #navigation ul li { list-style: none; border-right: 1px solid #b64926; float: left; } Advanced CSS Stephen Ireland
  • 24. Completed Your horizontal navigation Advanced CSS Stephen Ireland