Chapter 4: Id’s and Selectors

Goals for this Lesson

  • Learn how to add classes to selectors
  • Learn how to add id’s to selectors
  • Create new page layouts

Exercise

Objective

  • Insert styles to a webpage.
  • Insert id’s and classes to selectors.

Instructions

  1. Open Dreamweaver and be sure to work within your Web Design and Interactive Media website from Chapter 3 Exercise. The Web Design folder on the desktop should be the Local Site Folder.
  2. Open the index.html file.
  3. Delete ALL the styling for the main tag.
  4. Insert a div with the id of container, that hold everything within the body.
  5. Style the newly created id named container to have a width of 85%, margin of auto, and a background color of white.
  6. Insert the same div with the id of container, that hold everything within the body, in the about.html and contact.html page.
  7. Add padding of 25px to the top of the header.
  8. Add a class named: .title to the h1 in the header. Style that class to have a color of: #797979. Apply this class to the other pages where the h1 is located in the header.
  9. Style the main tag to have padding of 10px to the left and to the right. Also style to main to have an overflow-x of auto.
  10. In the index.html file, add a class called: .program to the first section.
  11. Style the newly created class- .program to have a width of 70% and float it to the left.
  12. In the index.html file, add a class called: .sidebar to the second section.
  13. Style the newly created class- .sidebar to have a width of 25% and float it to the right.
  14. In the about.html file, add a class called: .students to the image.
  15. Style the newly created class- .students to float to the right and have a margin to the left and bottom of 10px.
  16. In the contact.html file, add a class called: .information to the h3.
  17. Style the newly created class- .information to have it be center aligned.
  18. Save your work! File > Save All.
  19. Save your work and Preview it! File > Save All.
  20. Submit the root folder that you named: Web Design into the shared drive.

Example

Resource Video