CSS vs HTML

Class Friday, October 28, 2016

 Today’s Goals:

  • Review how to add favicons, begin CSS

 Today’s Featured Site:

 Quick PSA’s:

Spirit Week

  • Monday – Happy Halloween…don’t forget your costume!
  • Tuesday – Boston Sports Day
  • Wednesday – Wacky Wednesday
  • Thursday – Throw Back Thursday
  • Friday – Mustang Pride Day

School Lunch Taste Test

  • If you like seafood and have first lunch on Thursday, November 3, email Ms. Smith at rsmith@medford.k12.ma.us

 Favicons

  • Favicons are the tiny icons next to your page title in the browser.
  • Favicons are 16 x 16 pixels and the code for adding them goes into the <head> section
  • 2 steps to get a favicon on your website: add the code to your head section and create the favicon (make sure you save it in same location as your webpage).
  • Code to add to head section: <link rel=“shortcut icon” href=“favicon.jpg”>
  • Creating your favicon: use a photo editing program such as Pixlr.com to create a 16 x 16 pixel image.

 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.).
  • See some CSS in action through Web Design in 4 Minutes
  • Open Firefox, and let’s go to a few different sites to see the difference CSS makes in design. Let’s try YouTube and http://le-mugs.com/en/. Go to CSS in the web developer menu at the top and choose disable all styles. What differences do you notice?
  • 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) and semi-colons ; at the end of every line (next to the letter L, no shift key needed)
  • Let’s look at this example
  • Set up basic webpage: Let’s set up a basic webpage with html, head, title, and body opening and closing tags. Save this as css1.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. Next, let’s change the colors of our headline and paragraph. Now let’s change the background color of our webpage. Let’s also try changing the font.

 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!