User:M4fielding9/Sandbox/Características de las paginas, № dos

Div Tags
Used more frequently than P tags. The REAL workhorse of FS WIKI.

DIV stands for division - part of a page. Use with same coding as P tag Loren ipsum Can add attributes if paragraphs are right next to each other with NO built-in spaces between paragraphs.

Div tags are CONTAINERS. Compare div tags to a box of bottles. You can rearrange the bottles in a box, but that won't affect bottles in OTHER boxes.

EXERCISE:

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.

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.

Borders, Border Shadows, Padding and Margins in Borders
Attribute is "border" and value has THREE parts with spaces in between. 1px Solid Red  Example:  ,div style="border:1px solid red">.....

border-top:1px solid red border-left:1px solid red border-right:1px solid red border-bottom:1px solid red THIS WORKS WELL TO SEPARATE INFORMATION WITH A LINE - APPEARS AS A DIFFERENT COLORED UNDERLINE.

Can create rounded corners using

border-radius:5px   The radius of the corner is 5 pixels.

Border shadow box-shadow:10px 10px 5 px #88888

Padding and Margins in Borders Padding separates the text from the INSIDE edge of the border with blank spaces Margins separate the text from the OUTSIDE edge of the border with blank spaces

EXERCISE:

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.