1. Web Dev Exercises
Monday, February 20, 2012

2. Exercise 1:
Create a red box that is 300px wide and 300px high
Monday, February 20, 2012

3. Answer 1
#mybox{
width:300px;
height:300px;
background-­‐color:red;
}
Monday, February 20, 2012

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 wide
Monday, February 20, 2012

5. Answer 2
#mybox{
width:230px;
border:1px
solid
black;
}
Monday, February 20, 2012

6. Exercise 3:
Hello World!
This is my first 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. Answer 3
body{
font-­‐family:Helvetica,
sans-­‐serif;
}
h1{
color:
red;
}
Monday, February 20, 2012

8. Exercise 4:
Create a black 1px border around the image
that is padded 10 pixels from the edges.
Monday, February 20, 2012

9. Answer 4
img{
border:1px
solid
black;
padding:10px;
}
Monday, February 20, 2012

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 218px
Monday, February 20, 2012

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. 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. Answer 6
a:link{
color:red;
text-­‐decoration:none;
}
a:hover{
color:blue;
}
a:active{
color:purple;
}
Monday, February 20, 2012

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. 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. 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. 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. Exercise 9:
Make a box, 200px wide, 50px tall.
Add a black 1px border and a gray background (#ccc)
Monday, February 20, 2012

19. Answer 9
.box
{
width:200px;
height:50px;
background-­‐color:#ccc;
border:1px
solid
#000;
}
Monday, February 20, 2012

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. 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. 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 officia 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 headline
Monday, February 20, 2012

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