TopStyle Tutorial 6

Setting the Body and Paragraph Properties

Now you will set background-color, color, font-family and font-size properties for the body and paragraph tags (the BODY, P { } selector). Note that this is a grouped selector, that specifies properties for multiple HTML elements.

This time you will use TopStyle's Style Insight feature to enter the properties and values. You will also use the Font Builder to create a list of alternative fonts to be used for this style rule.

In the editor, position the cursor between the empty curly braces for the selector BODY, P. Then press ENTER, wait a moment, and you should see a dropdown menu of properties appear:

Use the cursor keys to scroll down the list and select background-color. Press ENTER again to insert the property. A new dropdown list of colors will appear. Use the cursor keys again to move down this list and select White. Press ENTER again to insert the property value. After the value White, enter a semi-colon (;) to complete the property/value pair.

Note that all property/value pairs are separated by a semi-colon. Make sure that property values are always followed by a semi-colon.

Now press ENTER again to start a new line, and the dropdown Style Insight menu of properties will appear again. You will now repeat the process above to enter the following properties

color: Navy;

font-size: medium;

Next you will add one more property, font-family, but this time, instead of choosing a single value from the value list, choose Font Builder, which appears at the top of the dropdown list that Style Insight provides. The Font Builder dialog will appear, allowing you to choose multiple fonts. First choose Arial from the Available Fonts and add it to the Selected Fonts list. Then choose the generic sans-serif family and add it to the Selected Fonts. Then click OK.

It is always a good idea to include the generic font family at the end of the font list, in case none of the fonts you have specified exist on a client system.

When you are finished, the code inside the curly braces for the Body,P selector should look like this:

BODY, P {
background-color: White;
color: Navy;
font-size: medium;
font-family: Arial, sans-serif }

The order of the properties does not matter.