Directions
Create both an external CSS page and a html page that uses the <div> tags along with CSS IDs.
- In your Assignments folder create a new Notepad file and called it scrapbook.html.
- In your HTML code, make sure you use the link tag (in the head) to link to an external CSS page called boxes.css.
- In the body add a div tag that aligns to the center (and close it at the bottom of the page).
- Then add another div tag with the id called “header”. Type “CSS Scrapbook” and then close the div tag.
- Add a another div tag with the id called “page” and close the close it at the bottom of the page.
- Then make five div tags to create the five boxes (like the example below).
- In each of the div tags you will need a id called “box1” through “box5”.
- Add a div tag that uses the footer ID. Make sure it says “Made by Your Name“.
- Make a new notepad page called boxes.css and save it in your Assignment folder.
- In your CSS page add IDs for the header, footer, page, box1, box2, box3, box4, and box5.
- The header should be centered, in a larger font size and the position of relative.
- The page ID should have a grey background, height of 700 pixels, width of 500 pixels, position set to relative, text align to the left, font size 11, and Verdana (sans-serif).
- Then use the information on the example to style each of the five boxes.
- The footer style can be the same as the header style, expect the font size should be much smaller.
- Open your HTML page again, and add the display code with <br> tags in between each line.
- Check to make sure it looks just like the example.
- In your CSS, make a new class changing the background color and fontsize to be larger.
- Then in your HTML, using a <span> tag to “highlight” three new things that you learned about positions or borders.
- Raise your hand and ask your teacher to grade your assignment on screen.
