Specifying global frame settings

Step by step

To specify the global frame settings, proceed as follows:

1. Select the profile management page that has been created.

2. Open the Stylesheet element in the Style main element. Right at the top, you will find the existing CSS instructions for the body area.

   Copy

   1
   2
   3
   4
   5
   body {
       font-family: sans-serif;
       font-size: 12px;
       }
   

   Every HTML file has a body tag. All visible contents of an HTML page (headings, text, links, and so on) are contained within this tag. All universal style specifications, such as the font, font size or font colour, can be defined for the body in the CSS file.

3. Set the global font colour to the desired colour value.

   Use colour picker: Most browsers feature a colour picker tool in the developer tools enabling you to quickly determine the colour value. You click a colour on a Web page and the corresponding colour code is immediately displayed.

   Open the colour picker. The procedure differs based on the browser:

   • The colour picker automatically opens in Chrome when you edit a colour in the developer tools.

   • In Firefox, you need to manually open Eyedropper via the Developer Tools menu.

   Copy

   1
   2
   3
   4
   5
   6
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
   }
   

4. Allocate a background colour.

   Note: You will find an overview of all common CSS instructions on the following Web page:

   http://www.w3schools.com/css/default.asp

   Copy

   1
   2
   3
   4
   5
   6
   7
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
   }
   

5. Set the width of the content to the desired value:

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
       width: 600px;
   }
   

6. Centre your page in the browser.

   The margin or the space to another element is generated using the margin element. There are different ways of assigning the desired space to an element.

• margin: 20px: generates a margin of 20 px at the top, bottom, on the left and on the right.
• margin: 20px 10px: generates a margin of 20 px at the top and bottom, and a margin of 10 px on the left and right.
• margin: 10px 0 20px 30px: generates a margin of 10 px at the top, 0 px on the right, 20 px at the bottom, 30 px on the left.

• margin: 0 auto; Generates a margin of 0 px at the top and bottom. auto ensures that the area is centred.

To specify only one particular value, the following values can also be used:

• margin-top

• margin-bottom

• margin-left

• margin-right

Copy

1
2
3
4
5
6
7
8
9
body {
    font-family: sans-serif;
    font-size: 12px;
    color:#555555;
    background-color: #dbecf5;
    width: 600px;
    margin: 0 auto;
}

7. Allocate padding to prevent the contents from joining directly to the browser bar.

   Note: Padding defines the space between the content and the frame or a box. The values are defined in essentially the same way as for margin. However, the "0 auto" instruction is not available for padding.

   Copy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   body {
       font-family: sans-serif;
       font-size: 12px;
       color:#555555;
       background-color: #dbecf5;
       width: 600px;
       margin: 0 auto;
       padding: 20px;
       }
   

8. Click (Save).

9. Click to view the result.

   

• You have specified the global frame settings for your profile management.