[Contents]

jsEditor - Style Sheets: The Text Tab

Aim: To learn about the Text Tab of the Style Sheet Dialogue.

Open the Style Sheet Maker:

Tools: Style Sheets

Choose:

Selector P and click Add Selector

The style sheet should look like this:

P { }

Ensure the cursor is in the curly brackets!

Click the colour button and choose blue (or any colour!). Ensure that the other boxes are either on 'default' or are empty.

Click Add. You should see (unless you chose a different colour):

P { color: #0000FF; }

Click the Preview button and notice that all the text in paragraphs is now blue. Click Style Sheet to return to the editor.

Choose Edit: Reset to reset the defaults. Ensure the cursor is placed just before the end curly bracket (or just after the first curly bracket, or just after a semicolon!) Now, in the same panel, choose Font : cursive and then click the Add button. You should see this in the Style Sheet:

P { color: #0000FF; font-family: cursive; }

Preview so you can see the effect and then return to the editor.

Ensure the cursor is just before the end bracket. Reset the values again (Edit: Reset). Enter 200 for the size and choose %. Click the Add button. Check your results in the Viewer. And return to the editor. The editor should contain the following:

P { color: #0000FF; font-family: cursive; font-size: 200%; }

To change the font size, or any other property and value, delete the old one, and repeat the process above, or change the value directly in the editor. You can enter font-size in % or pixels (px).

While viewing, you will notice that all the text in paragraphs changes according to the declarations in the P Selector so all the text in paragraphs is blue, cursive and 200%. However, some text is not changed. The headings do not change, nor do the blockquotes. The text in the table remains the same.

In the editor, delete and P and type BODY. Preview the results. Now almost all the text is blue (the links are unaffected).

Type B in the Selector box. Click Add Selector. You should see this in the editor:

body{ color: #0000FF; font-family: cursive; font-size: 200%; }

B { }

Ensure that the cursor is in the curly brackets for B. Choose Edit: Reset. Change the colour to red and click Add. Your Style Sheet should look like this:

body{ color: #0000FF; font-family: cursive; font-size: 200%; }

B { color: #FF0000; }

Preview Style Sheet's effects and notice that most of the text is blue, except when it is bold! It is then red!

You can add the other properties in the row below in the same way as we did with the first row. If you enter values in all the properties in a row, then all these properties and values will be added in one go. Remember to reset before you add one property only, and if you wish to change the property, then either change it in the editor, or delete it in the editor and follow the above procedure.

Add a P selector to the editor. Now, enter 20 in the indent box, and ensuring that px is selected, add the indent. Add a size of 15px to the paragraph and Preview the results. The paragraph text is now smaller and the first line is indented.

The Style Sheet should look like this:

body{ color: #0000FF; font-family: cursive; font-size: 200%; }

B { color: #FF0000; }

P { text-indent: 20px; font-size: 15px; }

 

You have learned:

Next: The Images/Colours Tab


Style Sheets