Cascading Style Sheets (CSS)

Lab 9/27/12

Decorating the HeadFirst Lounge

  1. Here is the code for chapter 7.
  2. Download and save this file in the My Documents directory of the computer at your desk.
  3. Double-click on the HFHTML_ch08.zip and extract it in place.
  4. Copy the resulting HFHTML_ch08 directory to the LABS directory on your thumbdrive.
  5. Rename that directory to Chapter7
  6. Edit the lounge.html file in the lounge directory.
  7. Create a <style> element inside its <head> element.
  8. Modify color, font-family, and border bottom of <h1>, <h2>, and <p> elements as indicated in the text.
  9. Move your CSS rules to a lounge.css file in your Chapter7 directory.
  10. Using the <link> element, attach your lounge.css CSS rules to your lounge.html page.
  11. Link the elixir.html and directions.html pages to the same lounge.css file. (Get the relative path right as the value for the <link>'s href attribute.)
  12. Use property inheritance to change the default font-style to sans-serif by creating a rule for the <body> element.
  13. Use the class attribute (as indicated in the text) to change the colors of the text in the paragraphs of the elixir.html page.
  14. Use the validator, http://jigsaw.w3.org/css-validator, to check that your pages meets W3C standards.
  15. Edit the index.html file in your LABS directory to hyper-link to your revised lounge.html page in your Chapter7 directory.

Begin to style your About Me site

  1. Create an project.css file in your PROJECT directory.
  2. Use inheritance to make the default font-style be sans-serif.
  3. Attach this CSS file to your index.html page.
  4. Check that the CSS is valid.

Synchronize your website to your thumbdrive

Check with Bowen that the work you have done is visiable on your web site, today, before leaving class.

Always turn off your computer and screen before leaving the room.