Quiz

Web Dev Exercises

Monday, February 20, 2012

Exercise 1:

Create a red box that is 300px wide and 300px high


Answer 1

#mybox{ width:300px; height:300px; background-‐color:red;}


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


Answer 2

#mybox{ width:230px; border:1px solid black;}


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.


Answer 3

body{ font-‐family:Helvetica, sans-‐serif;} h1{ color: red;}


Exercise 4:

Create a black 1px border around the image that is padded 10 pixels from the edges.


Answer 4

img{ border:1px solid black;

padding:10px;}


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.


Answer 5 body{ font-‐family:Helvetica, sans-‐serif; } h1{ font-‐size:34px; } h2{ font-‐style:italic; } #container{ width:218px; }


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/


http://google.com

http://google.com

http://google.com

http://google.com

http://google.com

http://google.com

Answer 6a:link{ color:red;text-‐decoration:none;

}

a:hover{ color:blue;}

a:active{ color:purple;}


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


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;}


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


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;}


Exercise 9:

Make a box, 200px wide, 50px tall. Add a black 1px border and a gray background (#ccc)


Answer 9

.box { width:200px; height:50px; background-‐color:#ccc; border:1px solid #000;}


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.


Answer 10.lead{ font-‐size:30px; margin-‐bottom:0px;}

.subhead{ font-‐size:20px; font-‐style:italic; margin-‐top:0px;}

#container{ width:400px;}


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.


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;}


Technology

Quiz