Day 6

  • Take Home Review
  • CSS Position Property
  • Element Inspector
  • Daily Challenge
  • Styling Hyperlinks
  • Take Home Challenge
  • Questions?
  • Examples of CSS Position Property
    • position: static; /* default */
    • relative and sticky elements will retain the space at its original placement on the page.
    • absolute and fixed elements will not retain the space at its original placement on the page.
    • commonly used with top, right, bottom, and/or left properties (or inset shorthand)
    • top, left, right, and bottom has no effect when set to static
    • for sticky typically top value is required to function i.e. top: 0;
  • To open your element inspector from your browser:
    • Right-click on any web page and select "Inspect" or "Inspect Element"
  • Try it! Inspect this page
  1. Using your project from Day 5:
    • Create a sticky nav element at the top of your page
    • Add some links to your nav
    • Make sure your links open in a new tab
  2. Save your work!
  3. Right click your code > "Open with Live Server" to view your work in the browser!
  • Hyperlink Styles and States 
                  a {
  /* default */
}

a:link {
  /* unvisited links */
}

a:visited {
  /* visited links */
}

a:focus {
  /* when in focus by tabbing */
}

a:hover {
  /* when hovered over */
}

a:active {
  /* when clicked on */
}
  • Using your Daily Challenge Project:
    1. Remove the underline from your nav links
    2. Give your nav links a background color on hover
    3. Change the text color after a link has been visited
  • Save your work!
Previous Next