The style sheet which accompanies this file contains several customisations for the heading level2 tag - <H2>. Its effects can be seen in the example below. The style sheet was made using the style sheet wizard, accessible through the Insert | Style Sheet menu item. It also includes a similar definition for a new style, style1.
Style 1
This is a heading level 2.
Here is some text for the paragraph after the heading
Here is another heading using the style
Description
The style sheet contains information about the customisations to the <h2> tag, and then the tag can be used as normal. This can be very useful if you have already used such a tag in various files and then want to change the appearance in the same way in all the files. If you only want to change the appearance in one of the files, you may be better off using an inline style. The use of a style sheet means that all the information is kept in a distinct file which can then be linked to in any HTML file.
How to make it
Load the style sheet wizard and scroll down the list of tags on the left until you find the tag you want to customise, in this case H2. Next, find the attribute of the tag you want to change on the right. In this case, we want to change the background colour, the colour of the text, and the name of the font. First, to change the background colour, find the background-color attribute. Click on this attribute and drag it across onto the H2 tag. It will appear as a sub item of the tag. Click on the [+] button to the left of the H2 tag to make the attribute visible. Click on the attribute. The colour button on the right should now be enabled. Click on this button and select the colour you want to change the background to, in this case a pale green. Repeat this procedure with the color attribute to change the colour of the text, only this time select a blue colour so that the text will stand out.
To change the font used, drag the font-family attribute onto the H2 tag. Click on this attribute and the drop-down list on the right titled Font should be enabled. Select Arial from the list. The style sheet is now ready.
To make sure that the style sheet will always be available when we upload the file or copy it to another folder, ensure that the Use Relative Filename option is checked. Now, click on the Finish button. You will be prompted to save the style sheet. Save it in the same folder as the HTML file you are using it for, and give it a name like styles.css. The style sheet will now be saved and a link to it placed in the HTML file.
Style 2
This is a heading with style1 applied to it.
This is some text in the paragraph
This is another paragraph heading using style1.
Description
The style sheet contains a definition for a new style, style1. After this style has been created in the style sheet, the style sheet has been linked into this page and the style can then be applied in the same way as heading levels.
How to make it
Load the style sheet wizard. Since we are not customising an existing element, or tag, right-click on the list of tags on the left and select the New Element menu item. A new item in the list named New Element will now be found at the bottom of the list. Click on this item once to select it, then click on it again to begin renaming it. Change the name to .style1, taking care to include the dot before style1. We can now begin to change how this style will be displayed. Follow the same instructions as above for customising the >h2< tag, except replace H2 in the instructions with .style1. Click on Finish to save the style sheet. You will not be prompted to save the style sheet this time, as it has already been saved once and the original style sheet will just be overwritten. To apply the style, highlight the text you want to apply it to, and select style1 from the drop-down style list on the formatting toolbar. Although we customised both H2 and style1 in the same way, you may notice that they do not display in exactly the same way. This is because H2 already has some default customisations which we did not override.