Today’s goals:

• Continue learning CSS, including styling links
• Learn how to add a Google Font
• Get started on CSS Quote project

 Today’s featured website:

• https://jenniferdewalt.com/color_clock.html– Watch the page color slowly change while the hex value changes

 Google Fonts

• Google Fonts has tons of free and easy to use fonts for our webpages
• 1. Go to https://fonts.google.com/
  2. Choose a font by scrolling and/or check off categories on the right to narrow your choices
  3. When you find a font to use, click on the red circle with the plus sign on the top right
  4. It will say “family selected” on the bottom and click on the black bar to open your font information
  5. Copy the link to the font into the head section of your webpage
  6. Copy and paste the font-family wherever you want to use it (body, h1, p, etc.).

 Styling Links

• It’s possible to make links look much nicer than the default ways browsers choose to display them.
• 1. Let’s add a link on our webpage so we have a link to style
  2. Go to this W3Schools link example
  3. Let’s review the four different link states
  4. Let’s add a sample link into the tutorial
  5. Now let’s copy/paste the code into our own project to style our own link
  6. Underlining links: let’s use the text-decoration property to remove the default underlining by the browser

  CSS Quote Project

• You’ll create an inspirational quote webpage using the new CSS you’ve learned
• Directions: Go here