Format Horizontal Line Styles

After completing this topic, you will be able to format horizontal line styles in the style sheet.

Steps:

1. Add a horizontal line style to the style sheet.

    

   Click the Add Style menu.

   Step 1

2. Click the Horizontal Line list item.

   Step 2

3. Name the style Thin Line.

    

   Enter the desired information into the Style name field. Enter

    a valid value
    e.g.
    "Thin Line"
   .
   Step 3

4. Press [Enter].

   Step 4

5. Remove the default setting for the style.

    

   Click in the Horizontal Line field in the header.

   Step 5

6. You want to format the width of the line so that it is always 50% of the screen width.

    

   Click the Width and Height button.

   Step 6

7. Change the width to 50%.

    

   Enter the desired information into the Width field. Enter

    a valid value
    e.g.
    "50"
   .
   Step 7

8. Change the unit to a percentage.

    

   Click the Unit list.

   Step 8

9. Click the Percentage list item.

   Step 9

10. Click the OK button.

    Step 10

11. The horizontal line spans 50% of the preview pane.

    Step 11

12. We have added another Horizontal Line style and named it Thick Line.

     

    Format the line for a thicker, red line.

    Step 12

13. Click the Width and Height button.

    Step 13

14. Change the Height of the line to 4 pixels.

     

    Double-click in the Height field.

    Step 14

15. Enter the desired information into the Height field. Enter

     a valid value
     e.g.
     "4"
    .
    Step 15

16. Click the OK button.

    Step 16

17. Change the color of the line to red.

     

    Click the Background Color button.

    Step 17

18. Click the red color in the Web Colors palette.

    Step 18

19. Click the Ok button.

    Step 19

20. The line will act as a separator between large sections. Add 18 points of spacing above and below the line.

     

    Click the Spacing button.

    Step 20

21. Enter the desired information into the Before field. Enter

     a valid value
     e.g.
     "18"
    .
    Step 21

22. Click in the After field.

    Step 22

23. Enter the desired information into the After field. Enter

     a valid value
     e.g.
     "18"
    .
    Step 23

24. Click the OK button.

    Step 24

25. Save the changes to the style sheet.

     

    Click the Save button.

    Step 25

26. We have opened the Page Setup web page. Select the horizontal line element.

     

    Click the horizontal line graphic.

    Step 26

27. Apply the Thin Line style.

     

    Click the Styles button.

    Step 27

28. Click the Thin Line - Horizontal Line list item.

    Step 28

29. The line spans 50% of the width of the web page.

    Step 29

30. Preview the web page in the browser.

     

    Click the Open in Browser button.

    Step 30

31. The line spans 50% of the width of the browser window.

     

    The line will resize to fit the size of the user's browser window.

    Step 31

32. Close the browser window.

     

    Click the Close button.

    Step 32

33. Apply the Thick Line style.

     

    Click the Styles button.

    Step 33

34. Click the Thick Line - Horizontal Line list item.

    Step 34

35. The formatting of the horizontal line changes to a thick, red line.

    Step 35

After completing this topic, you are able to format horizontal line styles in the style sheet.

Table of Contents  Start Topic