bbb Home
Introduction to Style Contents        

WHAT IS STYLE?

HOW TO ADD STYLE

MANY STYLE PROPERTIES

Background,Border,List, Margin,Positioning,Text,Padding

Matrix effect from http://www.dynamicdrive.com

List of Properties


EXAMPLE

Font: 8pt   12pt   20pt   24pt   Width: Min. 50%   75%   100%   

PRACTICE

1. Experiment with the example above:

  1. Change the text color to blue.
  2. Set the padding of the div to 30px.
  3. Eliminate the positioning attributes and use text-indent to indent the div 20px.
  4. Set the margin of the page to 30px using margin in the body tag.
  5. Modify the border so that only the top of the div has a border.
  6. Use font-weight to change the text in the div.

2.  List the Text properties and possible values for each.

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

4.  Create a new page.  Use the inline style approach to define the style for the body tag.  Make sure that the page meets the following requirements:

  1. An image appears repeatedly in the background.
  2. The images scroll with the page
  3. A <div> tag has its background color set to blue.

5.  Create a new page.  Use the inline style approach to define the style for the body tag.  Make sure that the page meets the following requirements:

  1. An image appears once in the center.
  2. The image is fixed to the background so that the text scrolls over it
  3. A <div> tag has its background color set to blue.

6.  Using the page you created in #4, use the inline style approach to define the style for the div tag.  Make sure that your page meets the following requirements:

  1. The background color of the div is green.
  2. The font color is yellow.
  3. A line appears over the text.
  4. The text is centered.
  5. The spacing between the words is 10.
  6. The spacing between the letters is 5.
  7. The font is verdana.
  8. The text is italic.

7.  What style properties are used to...

  1. Make the background image appear in a specific location?
  2. Make text indented?
  3. Make text uppercase?
  4. Make text large? 

8. Experiment with a Web Design  Tool.

  1. Add a tag and select code view. Inside the tag, type style = " . You should be prompted with a list of properties. Select one and hit enter. You should be prompted with a value.
  2. Experiment with style properties. Which ones are available in the menu?

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

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

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

12.  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.

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

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

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

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

17.  List the positioning properties and possible values for each.

18.  If you specify the top and left location of an element, what other property must you set and what should you set it to?

19. Create a new page.  Add a <div> with some text to the page and set its background color to your favorite color.  Make sure that:

  1. The width of the <div> is 100.
  2. The height of the <div> is 100. 
  3. The text is centered horizontally.
  4. The <div> is located at 100, 100.
  5. Its id is "mydiv".

20.  How do you make an element hidden?  Experiment with the <div> in #19 to make it hidden.

21.  Now we will add code to move the <div> in #19 when the user clicks on it. 

a.  Add the following <script> block to the <head> section:

            <script>
                var x = 100;
                function changeDiv()
                    {
                        x = x + 20;
                        window.mydiv.style.top = x;
                        window.mydiv.style.left = x;
                        window.mydiv.style.width = x;
                        window.mydiv.style.height = x;
                     }
            </script>

        

 b.  Add the following to your <div> tag:

    onclick = "changeDiv()"
    

c.  Display your page and experiment.  What happens?

22.  Create a page to demonstrate the use of the z-index property. 


SELF-QUIZ