1. Turn one word in this sentence to a color.
2. Make this word rainbow colored: Magic
3. Highlight the following text by giving it a yellow background:
4. Did your work in question 3 alter the following text? If so, why did it get altered? What's different about it?
Highlight me!5. Make these divs appear side-by-side by adding one line in css. Why is there space between them?
6. Make this div disappear. Don't delete it though.
7. Increase the amount of orange all around in this div by adding one line of css.
8. Separate these divs so they don't look like one big block.
9. Make these buttons more user-friendly by giving them some shape and space.
Link 1 Another Link Third Link10. Add one line of css to vertically center the text inside the square.
11. Move this div 50px to the left and 50px upward.
12. Add three lines of CSS to have this div 10px from the top of the window, and 10px from the right so that it stays there even if you scroll.
13. Set the "top" property of this div to "20px" and the "left" property to "40px" Did it change? Why or why not?
It didnt change because the position is on defult, which is static.14. Move the blue div 30px from the left and 30 pixels upward, without moving the other divs from their current positions.
15 For the question above, set the display of all of those elements to "inline-block". How does the blue div behave?
The blue div is now inline but it is moved 30px to left and 30 px upward from the baseline.16. Position the smaller square so that it is both horizontally and vertically centered over the larger square. Only use position, and the top/left/right/bottom properties.
a. Change one number below to move the blue div to the bottom left corner
of the parent div.
b. Do it again, but move it to the top right corner.
c. Using only top/left/bottom/right, can you center the blue div inside the grey div?
14. Draw horizontal stripes.
15. Turn the horizontal stripes into vertical stripes.
16. Replicate this sketch by positioning the squares in the grey box below:
17. In the example above, what was the "position" for the grey box? What was the position for the colored squares? What happens if you take out "position:relative" from the grey box?
The grey box had an absolute position whereas the colored squares had relative positions. If "position:relative" was deleted, the colored squares would not be able to move freely across the box.18. Draw the Empire state building below.