CSS - MissionBit/fall-2014-intro-mission-tt GitHub Wiki

CSS Jargon

  • Selector - the first part of a CSS rule that is used to select elements by tag name, id, class, or other features of that element
  • Property - the second part of a CSS rule is a { block } with zero or more properties. Each property controls some presentation aspect of that element and its children, such as font-family or color.

CSS with Dogs

http://bit.ly/mbit-css-dogs

Bob will show how to build a page with CSS and explain how the CSS rules work.

CSS selector game

http://flukeout.github.io/

Project Avatar

http://bit.ly/mbit-intro-avatar

  1. Put the avatar.html and avatar.css files into your repository
  2. Create a link from your index.html to your avatar.html
  3. Make it look just the way you want. Feel free to change the shapes too!

Project Logo Puzzle

http://bit.ly/mbit-intro-logo

  1. Put logo.html and logo.css into your repository
  2. Move the pieces around in logo.css until the logo is in the right place
  3. Change the colors and make it your own! We will share the best ones at the end of the week.

Project Index

  1. Create a CSS file for your index.html, call it index.css.
  2. Add a <link rel="stylesheet" href="index.css"> to the head of your index.html
  3. Experiment with adding colors and styles to your page, try using color, background-color, font-size
  4. Try adding a font from Google Fonts to your index, http://google.com/fonts/

CSS Resources