User:Wonghk3/Sandbox/WikiTextDa4

CH-21: PADDING
FOLLOW samples on tutorial page... Padding

PARAGRAPH WITH NO PADDING
{Paragraph}

TO DEMO: 1. Clear previous lesson's sandbox screen 2. Copy the code from the box above and the Lorem Ipsum PP from Univ page on Padding, then show preview 3. Note: code has no space betw text and border --> rests up against the left border 4. place a space betw text and border, then show preview --> Note: box around text 5. Sooooo... how can we place a space betw text and border?

ADD PADDING ATTRIBUTE (creates spaces INSIDE of the BORDER)
6. We add a PADDING using the Attribute: PROPERTY=padding and VALUE=size in px

{Paragraph}

HOW TO LIMIT PADDING SIDES (examples below:left, top&bottom, right)
{PP} 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.

{PP} 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.

{PP} 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.

CH-22: DIV TAG - INTRO
FOLLOW samples on tutorial page... Div Tag-Intro

RECALL: To separate paragraphs, we can use page breaks or P-tags {PP} :
 * page breaks do not allow for attributes
 * P-tags allow for attributes and leaves a space between paragraphs

TO DEMO: 1. copy Lorem Ipsum... two times, back-to-back 2. enter between first PP and second PP 3. show preview ---> Note NO break between paragraphs 4. copy Lorem Ipsum... two times again, back-to-back 5. place first and second PP between P-tags 6. show preview 7. add style="background-color:lightgreen" to first PP and style="background-color:lightgray" to second PP 8. show preview ---> Note space between paragraphs


 *  DIV tags {PP}, on the other hand, DO allow for attributes and does not have any built in spacing 

9. copy Lorem Ipsum PP with P-tags to third section and replace P-tags with div-tags

Lorem ipsum...turpis. Lorem ipsum... turpis.

NOTE: Borders are touching; i.e. no spacing. Also, you can apply all the attributes we have learned so far in div tags.

CH-23: MARGINS
FOLLOW samples on tutorial page... Margins

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.

Exercise-Ch 24:Borders
========================================================================================================================================================================

GROOVE: 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.

RIDGE: 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.