Today’s Goals:

• Continue learning CSS: add it to your code; change the background color and image; change the font; change the font color and size

 Today’s featured web site:

• https://picular.co/– Google for colors

 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 CSS:
  • Begin by adding style tags in your head section and some selectors to target our headline and paragraph.
  • Next, let’s change the colors of our headline and paragraph. How can we also change the text size? Hint- see the example we looked at yesterday.
  • Now let’s change the background color of our webpage- what selector do we need to add to our stylesheet?
  • Let’s also try changing the font.
  • Let’s add a background image. We’ll use this image and this code to get started.
  • Fixed background image Like this example.

 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!