Upcoming SlideShare
×

# Quiz

881 views

Published on

Published in: Technology, Design
0 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
Your message goes here
• Be the first to comment

• Be the first to like this

Views
Total views
881
On SlideShare
0
From Embeds
0
Number of Embeds
279
Actions
Shares
0
10
0
Likes
0
Embeds 0
No embeds

No notes for slide

### Quiz

1. 1. Web Dev ExercisesMonday, February 20, 2012
2. 2. Exercise 1: Create a red box that is 300px wide and 300px highMonday, February 20, 2012
3. 3. Answer 1 #mybox{    width:300px;    height:300px;    background-­‐color:red; }Monday, February 20, 2012
4. 4. Exercise 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Create a solid border around the text that is 1px thickness. And make the box 230px wideMonday, February 20, 2012
5. 5. Answer 2 #mybox{    width:230px;    border:1px  solid  black; }Monday, February 20, 2012
6. 6. Exercise 3: Hello World! This is my ﬁrst blog post. I hope you enjoy it. Change the fonts for everything to Helvetica. Change the headline to be red.Monday, February 20, 2012
7. 7. Answer 3 body{    font-­‐family:Helvetica,  sans-­‐serif; }         h1{    color:  red; }Monday, February 20, 2012
8. 8. Exercise 4: Create a black 1px border around the image that is padded 10 pixels from the edges.Monday, February 20, 2012
9. 9. Answer 4 img{    border:1px  solid  black; padding:10px; }Monday, February 20, 2012
10. 10. Exercise 5: This is the lead headline for the story This is a smaller subhead for the story Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Use Helvetica font for everything. Make the lead headline’s font size 34px, make the subhead italic, and box the content with a width of 218pxMonday, February 20, 2012
11. 11. Answer 5        body{            font-­‐family:Helvetica,  sans-­‐serif;        }        h1{            font-­‐size:34px;        }        h2{            font-­‐style:italic;        }        #container{            width:218px;        }Monday, February 20, 2012
12. 12. Exercise 6: http://google.com/ http://google.com/ http://google.com/ Style a link so that the text is red, then turns blue when hovered, and turns purple when clicked. Remove the underline from the links.Monday, February 20, 2012
13. 13. Answer 6 a:link{    color:red; text-­‐decoration:none; } a:hover{    color:blue; } a:active{    color:purple; }Monday, February 20, 2012
14. 14. Exercise 7: Wikipedia Wikipedia Style a link so that it has a 1px solid border, a light gray background (#ccc), padding of 5px on top and bottom, and 10px on the sides. Make it red on hover. Make the text black. Remove the underline.Monday, February 20, 2012
15. 15. Answer 7 a:link{    border:1px  solid  #000;    padding:5px  10px  5px  10px;    background-­‐color:#ccc;    color:#000;    text-­‐decoration:none; } a:hover{    background-­‐color:red; }Monday, February 20, 2012
16. 16. Exercise 8: Home Blog Portfolio Resume Contact Style the list items so they display inline. Add 5px margin on the right side the items. Remove text decoration, and color text black. Create 1px solid black border, and 5px padding. Light gray background color. Red on hover.Monday, February 20, 2012
17. 17. Answer 8 li{    display:inline; } a:link{    text-­‐decoration:none;    color:black;    margin:0px  5px  0px  0px;    border:1px  solid  #000;    padding:5px;    background-­‐color:#ccc; } a:hover{    background-­‐color:red; }Monday, February 20, 2012
18. 18. Exercise 9: Make a box, 200px wide, 50px tall. Add a black 1px border and a gray background (#ccc)Monday, February 20, 2012
19. 19. Answer 9 .box  {    width:200px;    height:50px;    background-­‐color:#ccc;    border:1px  solid  #000; }Monday, February 20, 2012
20. 20. Exercise 10: This is the main headline This is the subhead Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Make the main headline a font size 30px, and 0px margin bottom. Make the subhead a font size 20px, italic and 0px margin top. Make the all of the text contained by 400px.Monday, February 20, 2012
21. 21. Answer 10 .lead{    font-­‐size:30px;    margin-­‐bottom:0px; } .subhead{    font-­‐size:20px;    font-­‐style:italic;    margin-­‐top:0px; } #container{    width:400px; }Monday, February 20, 2012
22. 22. Exercise 11: THIS IS THE MAIN HEADLINE Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in Text reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui ofﬁcia deserunt mollit anim id est laborum. 400px wide. Background color is #9999CC Create a 1px solid black border. Center the box. Text transform is uppercase for the headline Create a border to the bottom of the headlineMonday, February 20, 2012
23. 23. Answer 11 #container{    width:400px;    border:1px  solid  #000;    background-­‐color:#9999CC;    margin-­‐left:auto;    margin-­‐right:auto; } .lead{    text-­‐transform:uppercase;    border-­‐bottom:1px  solid  #000; }Monday, February 20, 2012