Today’s Goals:
- Continue learning CSS: Google Fonts, styling links
- Review CSS Quote project
Today’s featured website:
- http://cssstats.com/ – This site will give you a CSS summary of any website you want
Google Fonts
- Google Fonts has tons of free and easy to use fonts for our webpages
-
- Go to https://fonts.google.com/
- Choose a font by scrolling and/or check off categories on the right to narrow your choices
- When you find a font to use, click on the red circle with the plus sign on the top right
- It will say “family selected” on the bottom and click on the black bar to open your font information
- Copy the link to the font into the head section of your webpage
- 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.
-
- Let’s add a link on our webpage so we have a link to style
- Go to this W3Schools link example
- Let’s review the four different link states
- Let’s add a sample link into the tutorial
- Now let’s copy/paste the code into our own project to style our own link
- 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