3.3  Style Sheets - Borders, Margin, and Padding

Index Code Tester

OBJECTIVE

DISCUSSION

Border Properties

before<span style = "border: double 5 blue">Hi</span>after   


Margin Properties

before<div style = "margin-left: 10; margin-right: 20%">Hi, this is really exciting text</div>after  


Padding Properties

Before the div<div style = "padding-top: 25%; padding-bottom: 10">Hi, this text in the div section is really exciting</div>After the div  

EXERCISES

In all of the following exercises, use style properties.

In exercises 1, 2, and 3 you will list the style properties and possible values for each.  You might want to add this information to the .css file that you  created in lesson 3.3. 

1.  List the Border properties and possible values for each.

2.  List the Margin Properties and possible values for each.

3.  List the Padding Properties and possible values for each.

4.  Create a new page.  Add text to the page so that the margins will be apparent.  Use the internal style approach to define the style for the body tag.  Make sure that the page meets the following requirements:

  1. The left and right margins are set to 10%.
  2. The top margin is set to 10.
  3. The bottom margin is set to 50.

5.  Add a table to your page in #4.  Set the borders for the cells to demonstrate 5 different border styles.

6.  Using the page you created in #4 add five <span> sections and create different size borders around each.

7.  Modify the table in #4 so that the padding of 5 cells is set to 5 different sizes.

8.  Modify the <span>'s in #6 so that they each have different size padding.

LINKS AND HELP

http://www.w3schools.com/css/css_syntax.asp
http://www.w3.org/Style/CSS/learning
http://www.w3schools.com/css/css_reference.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/css/reference/attributes.asp