quiz
TRANSCRIPT
Web Dev Exercises
Monday, February 20, 2012
Exercise 1:
Create a red box that is 300px wide and 300px high
Monday, February 20, 2012
Answer 1
#mybox{ width:300px; height:300px; background-‐color:red;}
Monday, February 20, 2012
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
Answer 2
#mybox{ width:230px; border:1px solid black;}
Monday, February 20, 2012
Exercise 3:
Change the fonts for everything to Helvetica. Change the headline to be red.
Hello World!This is my first blog post. I hope you enjoy it.
Monday, February 20, 2012
Answer 3
body{ font-‐family:Helvetica, sans-‐serif;} h1{ color: red;}
Monday, February 20, 2012
Exercise 4:
Create a black 1px border around the image that is padded 10 pixels from the edges.
Monday, February 20, 2012
Answer 4
img{ border:1px solid black;
padding:10px;}
Monday, February 20, 2012
Exercise 5:
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
This is the lead headline for the storyThis is a smaller subhead for the storyLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Monday, February 20, 2012
Answer 5 body{ font-‐family:Helvetica, sans-‐serif; } h1{ font-‐size:34px; } h2{ font-‐style:italic; } #container{ width:218px; }
Monday, February 20, 2012
Exercise 6:
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.
http://google.com/
http://google.com/
http://google.com/
Monday, February 20, 2012
Answer 6a:link{ color:red;text-‐decoration:none;
}
a:hover{ color:blue;}
a:active{ color:purple;}
Monday, February 20, 2012
Exercise 7:
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.
Wikipedia
Wikipedia
Monday, February 20, 2012
Answer 7a: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
Exercise 8:
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.
Home Blog Portfolio Resume Contact
Monday, February 20, 2012
Answer 8li{ 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
Exercise 9:
Make a box, 200px wide, 50px tall. Add a black 1px border and a gray background (#ccc)
Monday, February 20, 2012
Answer 9
.box { width:200px; height:50px; background-‐color:#ccc; border:1px solid #000;}
Monday, February 20, 2012
Exercise 10:
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.
This is the main headlineThis 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.
Monday, February 20, 2012
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
Exercise 11:
400px wide. Background color is #9999CCCreate a 1px solid black border.
Center the box.Text transform is uppercase for the headline
Create a border to the bottom of the headline
Text
THIS IS THE MAIN HEADLINELorem 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 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.
Monday, February 20, 2012
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