CSS Activity

Today, you will be working with CSS. We will be learning how to control more than one page a time. This is important so that we can have better repetition across our entire site.

  1. Open your template.html in Notepad++
  2. If you have not finished your template.html page - get the instructions from the teacher
  3. Create a new file in Notepad++ - save as main.css in the same folder as your template.html -- (make sure you change the filetype)
  4. In your main.css - type of the follow
  5. h1 {
    font: 14pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    line-height: 20pt;
  6. Now go to your template.html - in the head (below the title) add the following line
    • <link rel="stylesheet" type="text/css" href="main.css" />
  7. Save both -- did anything happen?
  8. Do you have any h1 tags in your home.html - if not add at least one and see what happens
  9. Move any of your css that might be used on more than one page on your site into the main.css file (i.e. your #header, #left, etc)
  10. Make changes in main.css - save - refresh and make sure those changes appear on your page (you might have to do a Ctrl-F5)
  11. Use what we have learned about lists and linking to files to create a Navigation in the left div
  12. Use any additional time to go out to w3schools and research ideas for css.