CSS

Class Tuesday, October 20, 2015

 Today’s goals:

  • Create and work with CSS style sheet in Notepad++
  • Begin CSS Cheat Sheet
  • Review yesterday’s CSS code
  • Learn how to add Google Fonts and page background images

0. Today’s featured website:

1. CSS Basics

  • Open Notepad++ and do File, New to begin your CSS Cheat Sheet. Just save this as a plain text file. You will add stuff to this as we continue along with CSS; you might even want to write down a couple of key points from the videos we’re about to watch.
  • What the heck is it?
    • How did he “turn off” the CSS? Let’s see. (A similar web developer extension exists for Chrome & Safari).
  • What does cascading mean and why is it important?

2. More CSS Practice

  • Good color-picker site to use: http://materialuicolors.co/
  • Download this code. Paste into Notepad++ and start a new webpage. Call this css_practice1.html. Let’s review the code from yesterday and make some changes.
  • Google Fonts– you are going to learn today how to grab free code from Google to use for a font for your webpage.
    • Go to http://www.google.com/fonts
    • Click the arrow next to All Categories at the top left and un-check serif.
    • Choose a font! Once you choose a font, click the middle box with the arrow pointing to the right (quick use).
    • Choose the style and character set you want (the default will already be checked)
    • Skip to #3 and copy and paste the link ref code into your section. This will link the font you want to your webpage.
    • Finally, copy and paste the font family into the appropriate places on your style sheet (body, paragraph, headline)
  • Body background image
    • Begin by removing the comment code around lines 22-25 (delete /* and */). What do you see now?
    • Try changing center to left or right.
    • Try changing repeat to no-repeat, repeat-y, and repeat-x.
    • Finally, find another background image to use. Try Bing.com (do image search, then search for free to share and use under License). Make sure you download and save this image in the correct location (same as your webpage). You might have to re-size your image in pixlr.com.
    • To add your background image, remove my image of the pug and add yours. It will just be the image name and not a link like mine. Example: url(‘pumpkin.jpg’);. There is no space between url and the parenthesis, those are single quotes around the image name, and there is a semi-colon at the very end.