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:

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

Image Formats:

3. Watch at home the following video from Cameron Christensen (6-1/2) mins)

Color formats:

4. Work on your fan page. If you decide to do it, and either want feedback on it or want it posted on the web, the page is due Feb. 13 (hand me the html and css files in class).

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. If you want to, I’ll give you feedback on it. Likewise, if you want to, I’ll post it on the web so your family and friends can see it. You can do this on your own or with a friend.