User:Wonghk3/Sandbox/WikiTextDa4

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

SO WE LEARNED: To separate paragraphs, we can use spaces [enterkey], page breaks or P-tags {PP} :
 * neither spaces nor page breaks allows us to add attributes
 * P-tags do allow for attributes and it automatically puts a space between paragraphs
 * What if we want to use attributes and want to control the spacing between the paragraphs?

TO DEMO:

SHOW ME: using 1. copy Lorem Ipsum... two times, back-to-back, making bold the Lorem Ipsum 2. enter between first PP and second PP, then show preview 3. RESULTS: Paragraph breaks WITHOUT space between them

SHOW ME: using P-tags (contains built-in spacing between paragraphs) 4. copy Lorem Ipsum... two times again, back-to-back 5. place first and second PP between P-tags 6. add to first PP  {Lorem...}  and to second PP  {Lorem...}   then show preview 7. RESULTS: Note space between paragraphs; so, how do we get rid of that spacing?

SHOW ME: using DIV-tags {PP}  (allows for attributes without the built-in spacing between paragraphs) 8. copy Lorem Ipsum PP with P-tags to third section and replace P-tags with div-tags, then show preview 9. RESULTS: Note no space between paragraphs

NOTE: space still between p-tag paragraphs, but not for div-tag paragraphs Furthermore, div-tags give us more control over spacing between paragraphs and we can still use all the attributes we have learned so far

CH-23: 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

SHOW ME: border:10px groove violet 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.

SHOW ME: border:15px ridge lightgray 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
HOW TO ROUND CORNERS on square boxes (default value)

border-radius:5px The BORDER RADIUS ATTRIBUTE is made up of PROPERTY=border-radius and VALUE=thickness in px Using limited corner rounding:
 * border-top-left-radius:5px
 * border-bottom-left-radius:5px
 * border-top-right-radius:5px
 * border-bottom-right-radius:5px

BORDER 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 (width of element)
.....TO BE COVERED WITH LESSON ON WIDTH AND HEIGHT.....

When a border attribute is added to a div tag, must watch out that the content + border width does not exceed actual page width.

CH-24: 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} <p style="background-color:pink;color:black;padding-bottom:100px">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-25: 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.

<p style="margin:20px">{Paragraph}

<p style="color:red">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