Applying CSS to Text
If you have not read the tutorial on creating default css settings for text you should go over that tutorial before beginning this tutorial
How to Use the Text Properties palette to Apply CSS
 When you draw a table or text box and start entering text, NetObjects Fusion automatically selects the paragraph tag and applies it to the text you type. When you hit your enter key Fusion writes a closing paragraph tag and starts the next block of text with an opening paragraph tag. This is all automatic so you never have to worry about applying paragraph tags.
If you want to select a Header tag H1 though H6 you must first highlight the text you wish to apply the tag to, then from the drop down at the lower left of the Text Properties palette click the arrow beside the paragraph tag tool and from the opened selection list you can select any of the predefined tags and it will be applied to the text you have highlighted.
Inline HTML Formatting
You do not want to use inline html formatting. When you select anything from the upper part of the Text Properties palette, you are using inline html formatting. If you have used these formatting tools on any page you should go over the gotFusion tutorial on removing inline HTML formatting.
You can use Bold, Italic, or Underlining on a word or two but if you have a block of text you wish to use these formatting features on you should make a CSS style and apply that style to the text block so that you have consistency across all pages of your web site. Using CSS promotes consistency in the way your text is presented on all pages.
Creating Custom CSS Classes That You Can Apply on All Pages
For this example tutorial we are going to be making a New style and we want to be able to use it on every page.
 From the menu bar select:
Text > Manage Styles
You can also find Manage Styles as the last choice on the Styles drop down on the Text properties palette
On the Manage Styles properties palette click the New button
 This will bring up the New Text Style dialog box. On this dialog box we can redefine any preexisting CSS style or create a new style. We can make that style available on the page we are working on or on all pages of the web site.
Select Create Custom Style and give it a name (important)
Select Site Wide to make it available to every page.
Click OK which will close this palette and open the Text Format palette for you to begin defining your custom class.
Defining Your Custom Style
 We want to use this new class to highlight words on our site that are important. We want it to stand out and catch the visitors eye when they scan a page of text.
In order to make a class that will stand out, we want to make the text a different font (Bookman)
We want to make it Bold
We want to make it a little taller (16 pixels)
We want it Red.
Make the selections as shown on the Text Format properties palette on the right for this class called important. The selections you make will show up in the Preview window so that you can see what the class will look like as you are creating it. When finished, press the OK button to save the class. If you need to edit this class later, you can pick it from the list in Manage Styles and choose Edit.
Applying Classes To Text:
To use this new class called important, highlight the text you wish to apply the class to, then from the Styles drop down box, select the important class and it will be applied to the text you highlighted. You can use this class on any page of your web site just by highlighting and applying it.
By highlighting and applying the custom css class you wrote, Fusion will write:
span class="important"
By contrast if you were to use inline html formating to get the same effect, Fusion would need to generate much more code in order to accomplish the same results.
span style="font-family: 'Bookman Old Style', serif; font-size: 16px; color: rgb(255,0,0);"
Multiply this times the number of uses of different formating and you will save pages of code. This will make your web site load faster. It will help the search engine spiders find your content easier. Using CSS formating is good programing technique and you should learn to use it.
|
Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive
This page was written by and is maintained by turtle
|
|
