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: 10. copy this code to sandbox, then press show preview to see result...
 * Borders are touching; i.e. no spacing.
 * Also, you can apply all the attributes we have learned so far in div tags.
 * Let's look at adding padding <div style="padding:20px; for first PP and <div style="padding-left:150px; for second 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. 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-23: MARGINS
FOLLOW samples on tutorial page... Margins

RECALL: The PADDING attribute is used to build space INSIDE of the BORDERS.

The MARGIN attribute is used to build space OUTSIDE of the BORDERS.

TO DEMO: 1. copy the Lorem ipsum... paragraphs from the previous chapter DEMO 2. change the word 'padding' to 'margin' in the DIV-tag 3. press show preview 4. NOTE difference:


 * a. paragraph words are up against the boarder
 * b. the 20px margin wraps around the first PP but is in white as it is outside the border
 * c. the second PP is indented by 300px (outside the border) with the words up against the border (on the inside)
 * d. text changes to compensate for change in space

5. copy the Lorem ipsum... paragraph from step 2 to one or two lines further down the page 6. make margin in second PP same as first PP


 * e. the space between the two represents the margin around each; margin overlaps, does not combine to 40px

CH-24: BORDERS
FOLLOW samples on tutorial page... Borders

CODING FORMAT
The BORDER ATTRIBUTE is made up of PROPERTY=border and VALUE=(thickness in px)space(type of border)space(line color) border:1px solid red

WHAT SIDE TO PLACE A BORDER
border-top, border-right, border-bottom, border-left

KINDS OF BORDERS
Type of 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.

PADDING AND MARGINS IN BORDERS
Padding and margin attributes work the same way with borders.

TO DEMO: Add borders to the paragraphs from previous chapters and show preview

BORDER RADIUS
Round corners on square boxes (default value) The BORDER RADIUS ATTRIBUTE is made up of PROPERTY=border-radius and VALUE=thickness in px border-radius:5px

BOX SHADOWS
3D shadow effect for boxes The BOX SHADOW ATTRIBUTE is made up of PROPERTY=box-shadow; and
 * VALUE=right edge to shadow edge, in px(space)bottom edge to shadow edge, in px(space)distance box is above page(space)color of shadow
 * Note: bigger the third or distance value, the fuzzier the shadow

"box-shadow:10px 10px 5px red"

EFFECT OF BORDERS ON PAGE
When added to a div tag, border??????