Today’s Goals:

• Review CSS colors
• Continue learning CSS

 Today’s featured website:

• http://roblafratta.com/mariowario – CSS is used to create fun superhero costumes for Mario!

 Fun with CSS colors

• To choose colors with CSS, you can either use color names, RGB (red, green, blue) values, or hex color codes- check this out for examples. 
• Hex value examples:
  • #ffffff (white) (full color)
  • #000000 (black) (no color)
  • #ff0000 (red)
  • #00ff00 (green)
  • #0000ff (blue)
• Test your new color knowledge with this fun game! 

 Beginning CSS

• What is CSS and why do we use it?
  HTML tells the browser what the content IS (link, paragraph, headline, etc.) while CSS STYLES the content (color, layout, positioning, font, etc.).
• Let’s see the difference CSS makes even on a basic webpage.
  Go to http://medfordpublicschools.org/MHS%20Web%20Design/rainbow.html and then let’s disable the CSS by using the Chrome developer tools to edit the HTML and comment out the CSS code. What is left?
• CSS syntax:
  Pointy brackets < > for style tags in head section
  curly brackets { } in style sheet (next to the letter P on your keyboard; hit shift to make them)
  semi-colons ; at the end of every line (next to the letter L, no shift key needed)
• Let’s look at this example .
  Notice where CSS is written (head section)
  Notice how CSS looks different than HTML
• CSS vocabulary:
  What does CSS stand for?
  What is a style sheet?
  Selector– selects what you’re styling (ex. body, h1, p)
  Property– the style you’re applying to your content (ex. background-color, font-family, color)
  Value– the value of the property (ex. pink, Arial)

 CSS Practice

• You will:
  1. Add CSS and apply it to your HTML
  2. Change the background color of your page
  3. Add a background image to your page
  4. Change the font
  5. Change the text color and size
• Set up basic webpage: Let’s set up a basic webpage with html, head, title, and body opening and closing tags. Save this as csspractice1.html. Now, let’s add some content to style- a headline and a paragraph.
• Add some basic CSS to change the color, font, and size of the text and to add a background-color:
  1. Begin by adding style tags in your head section and some selectors to target our headline and paragraph.
  2. Now let’s change the background color of our webpage by adding the background-color property to our body selector and some color value 
  3. Next, let’s change the colors of our headline and paragraph by using the color property and a value taken from the color names list. Let’s give each one a different color.
  4. Let’s use the font-size property to change the size of our text. We will make our headline and paragraph different sizes- the headline should be larger. For now, we will use pixels for the font-size value but later on will learn about different values.
  5. Let’s also try changing the font.  by using the font-family property and some font value. Don’t worry, we will learn more exciting fonts later!
• Let’s add a background image
  1. We’ll use this image  and this code  to get started.
  2. We will copy and paste the background-image properties into our body declaration block. Don’t just simply copy/paste the whole thing into your code!
  3. Let’s try changing the values of the background-repeat property and use repeat, repeat-x, and repeat-y
  4. Let’s change the values of the background-position property and use left, right, left top, left bottom, right top, right bottom
• Big background-image:
  1. Let’s use a large image that will take up most of our page
  2. Use this image  (copy/paste the image address)
  3. We will comment out the original background image using a CSS comment (code sample in code from above; forward slash and starburst). Comment out just the value for the background image property or comment out the entire line and put a new one below by typing or copying/pasting the same thing.
  4. What values do you think are best for the background-repeat and background-position properties when you use a large image?