User:Lonnyyates/sandbox/FSW-WT-Lesson-21

=Lonnyyates/sandbox/FSW-WT-Lessons-21-thru-30=

Lesson 21 Backgrounds


 Exercises Answers


 * What is the coding to change the color of the background of the lorem ipsum paragraph to green and the text to orange?
 * 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis


 * Create a paragraph of your favorite color for the background of the lorem ipsum paragraph and another color for the text from the list of colors.
 * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis

Ta Da!!!



 Quick Quiz Answers


 * How to make text invisible on a page without erasing it.
 * A. Black text on a black background.
 * B. White text on a white background.
 * C. All of the above.

Ta Da!!!

Lesson 22 - Padding


 Lesson 22 Exercises Answers

1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and padding on the top and bottom of 20 pixels.  Lorem ipsum .....

2. Load our lorem ipsum paragraph twice with no background color and no text color but with a padding-bottom of the first paragraph of 100px. What happens to the space between the paragraphs? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
 * The space between the paragraphs widens to 100 pixels.

Ta Da!!!

Quick Quiz

 * To have the text 20px from the left edge of the background what attribute do you use?
 * C. padding-left:20px


 * To have the background 50px from all sides of the text, what attribute do you use?
 * C. None of the above

Back to Padding

Exercises
 Exercises Answers *Load our lorem ipsum paragraphs twice with the first one with a background color of cornsilk and the second one with a color crimson, both with a padding of 20 pixels, but using div tags instead of paragraph tags:

 Lorem ipsum...   Lorem ipsum...    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Quick Quiz

 * The div tag and paragraph tag function the same way.
 * A. True


 * The attributes work the same way in the div tag as in the paragraph tag
 * A. True


 * Div tags put spaces between paragraphs
 * B. False

<div style="width:160px; height:20px; padding-top:5px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:10px; ">Ta Da!!!

Exercises
<div style="border-top:10px solid teal; border-left:10px solid teal; border-right:10px solid teal; border-radius:20px; "> Exercises Answers 1. What is the coding to install our lorem ipsum paragraph in your sandbox with a background color of light green with white text and a margin on the bottom of 40 pixels. <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

2. What is the coding to install our lorem Ipsum paragraph to your sandbox with a background color of light blue with white text and a margin on the top of 20 pixels. <div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Quick Quiz

 * Margin-top only affects top of paragraph
 * A. True


 * Margin-left moves the paragraph to the right of the left side of the page
 * A. True


 * Margin-right moves the paragraph to the right of the right side of the of the page
 * B. False

Exercises
<div style="border-top:10px solid teal; border-left:10px solid teal; border-right:10px solid teal; border-radius:20px; "> Exercises Answers Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Quick Quiz

 * You can only put borders on all sides.
 * B. False


 * There is a default space between text and borders
 * B. False


 * Solid lines are all that is allowed in borders
 * B. False

<div style="width:160px; height:20px; padding-top:5px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:10px; ">Ta Da!!!

Exercises
<div style="border-top:10px solid teal; border-left:10px solid teal; border-right:10px solid teal; border-radius:20px; "> Exercises Answers Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

Quick Quiz

 * You can't use both width and height in a div tag
 * B. False


 * You can't use both width and height in a paragraph tag
 * B. False


 * You can use percentages in height attributes
 * B. False

<div style="width:160px; height:20px; padding-top:5px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:10px; ">Ta Da!!!

Try these out
<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> I Love Wikitext

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> I Love Wikitext

<div style="border:2px solid crimson; background-color:moccasin; padding:10px; width:97%; font-size:10pt; font-family:Courier New"> I Love Wikitext

Quick Quiz

 * Text-align only works in header tags
 * B. False


 * Text-align cannot put a title to the left because that is the default position.
 * B. False


 * Text-align will work in header, paragraph and div tags
 * A. True

<div style="width:160px; height:20px; padding-top:5px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:10px; ">Ta Da!!!

Try these out
<div style="border-top:10px solid teal; border-left:10px solid teal; border-right:10px solid teal; border-radius:20px; "> Exercises Answers

Quick Quiz

 * Tables do not need a closing tag
 * B. False


 * Rows must have a closing tag
 * b. False


 * Cells must have something in them for the table to be visible.
 * A. True

<div style="width:160px; height:20px; padding-top:5px; padding-left:10px; background-color:orange; color:white; border:1px solid orange; border-radius:10px; ">Ta Da!!!