CSS Activity

Back to Calendar

Today, you will be working with CSS. We will have 3 different CSS files that you are working with. Follow the steps below to see how CSS works when you have more than one CSS file. Pay attention to font size, color, and type.

  1. Go to <Files to Copy> -- <Web>
  2. Get the <css-test> folder and paste it in your Web Design Folder
  3. Open each file in Notepad++
  4. Notice how the CSS files are "attached"
    • <link rel="stylesheet" type="text/css" href="first.css" />
    • <link rel="stylesheet" type="text/css" href="second.css" />
    • <link rel="stylesheet" type="text/css" href="third.css" />
  5. From now on -- I will just refer to these lines above as "first", "second" and "third"
  6. Create a Google doc called "CSS Test" -- share it with me
  7. In your shared Google Doc -- describe:
    • What does each section look like -- describe section and font, color, etc
    • Be specific (i.e. The header is... The navigation area is....)
  8. Now change the order of the attached css -- move "third" to the top of the list (so the order should be third, first, second)
  9. In your shared Google Doc -- describe:
    • What does each section look like -- describe section and font, color, etc
  10. Now move "second" to the top of the list (so the order is second, third, first)
  11. In your shared Google Doc -- describe:
    • What does each section look like -- describe section and font, color, etc
  12. Try moving these around in different orders.
  13. Look at the css files and figure out exactly what is going on.
  14. There is a hidden message in one of the sections -- what order do the css files need to be attached for the hidden message to appear? Why?
  15. What does the order have to do with how the information impacts what you see on the site?
  16. In your Google doc -- write a short paragraph about how this works when you have multiple css files.
    Explain how this could be useful. Make any other observations.