CSS Quote Assignment

Shape of the Day:

  • Complete CSS lesson
  • Complete any incomplete work
  • Practice with Google Fonts
  • Try some styling links
  • Begin CSS Quote Assignment

Website of the Day:

https://colorleap.app/home – Discover popular colour themes during multiple periods of time in history!

1. Complete yesterdays intro lesson on CSS

2. Complete any unfinished work

3. Google Fonts

  • Tons of free and easy to use fonts for our webpages!
  • Go to https://fonts.google.com/
  • Scroll and view the fonts, once you see some that you like, you can “add” as many to your list as you like by clicking the red plus symbol
  • Once you are ready, click on the “families selected” bar at the bottom right
  • Under standard, you need to copy that entire <link href> tag and past it into the <head> tag of your html.
  • It then tells you how it must look in your CSS below. This will either go into your <style> tag or your CSS stylesheet.

4. Styling links

  • It’s possible to make links look a lot cooler and nicer than the default browsers have them as.
  • Add a link to your webpage by referring to this example on W3Schools.
  • Take note of the four different states/possibilities for links – unvisited, visited, mouse over, and selected – notice how each one has their own code with selector ‘a’
  • You can remove the default “underline” property by playing with the css property ‘text-decoration’. Try playing with that here

5. CSS Quote Assignment

  • Go here for directions on how to make a webpage with an inspirational quote using CSS skills you just learned. You should download the document.