2 – CSS, images and color

Learn to add CSS to webpages; learn about basic image and color formats.

We finished the HTML content of a fan webpage; now let’s add the “Wow factor”.

Class preparation

1. Watch at home the following video by Jake Wright (12 mins):

CSS: Learn CSS in 12 minutes

2. Watch at home the following video from DIYWebmastery (7-1/2 min):

Image Formats: Understanding images

3. Learn about the RGB color format; play with the color selector at w3Schools.com

4. Work on your fan page..

Class work

This week we are going to talk about adding the Wow! factor to the content of the HTML page that we created last week.

Topics for today

  • General purpose editors: Notepad (Win), TextEdit (Mac), Sublime (Win/mac/linux)
  • How to specify colors: color codes, RGB, HSL, hexadecimal
  • Image depth: 8-bits, 24-bits
  • Transparency: the alpha channel, RGBA, HSLA
  • Image formats for webpages: GIF, JPG, PNG
  • Adding styles: the style tag vs. the style sheet
  • CSS (Cascade Style Sheets)

Workfiles

Download in class: classpak2.zip

We start from were we left off last week, adding the style:

style_dat

  1. webpage 3: this is the html file with only images rescaled.
     

     
  2. webpage 4: taking care of the body and the container.
     

     
  3. webpage 5: taking care of the header.
     

     
  4. webpage 6: taking care of the content.
     

     
  5. webpage 7: taking care of the main picture and text.
     

     
  6. webpage 8: taking care of the footer
     

     

Resources

Mini-project (estimated time: 1 hour)

Add the CSS component to the HTML content of the static fan webpage that you started last week.