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.