Extending Text Styles

Exercise 2

Use the Styles palette to create a paragraph style (click the top right arrow in the Styles palette window to get the fly-out menu).

As you’re creating the style, make a note of the Extended... button in the bottom left corner of the dialogue window. In fact, click on it. If the button is unavailable, make sure the ‘View CSS Attributes’ checkbox is ticked.

When you click the Extended... button, it brings up the dialogue window that you may recognise from the first exercise. Clicking ‘New’ lets you enter a Name/Value pair that extends the style. So, let’s do just that. Click New and type the following in the respective fields:

Name: margin
Value: 10px

Note that in this dialogue, you do not close the value with a trailing semi-colon, it is automatically set by Freeway in the generated code—so if we were to type a closing semi-colon here it would give us a double semi-colon in the generated code. While this might not technically mean anything, it’s still not recommended. Also note that you can use any acceptable unit for the value since you’re writing raw code, i.e percentage, em, points or pixels. If you want your units to be as acceptable as possible across browsers and platforms, use relative units such as percent or em, rather than fixed units like pixels.

Click OK to save the attribute, then OK again to save the style. Apply the style to a block of text in an HTML box and give the box a background colour to make it visible against the page background. Preview in a browser. Here is an example of how it should look.