GotFusion.com  Where your journey begins
Showcase your website at Fusion GalleriesNetObjects Fusion 7 Websites Portal

 


 

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

Select the tag you want to apply from the drop down boxWhen 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.

Select the tag you want to apply from the drop down boxFrom 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

Making a new CSS style that you can apply on any pageThis 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

Making a new CSS style that that will stand out on a pageWe 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.

Apply the class by highlighting text then selecting the class from the style drop down

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.



View the Previous Tutorial

Return to the TOP of this page

Did you find this tutorial useful?
Do you want to keep this resource online?
Make a donation to keep gotFusion alive


|  Fusion  |  Web Design  |  Hosting  |  Resources  |  gotFusion Store  | 

Problems with this page?  

All content copyright © 2001 - 2017 gotFusion LLC. The name gotFusion and the gotFusion ® logo are registered trademarks of gotFusion LLC
Copyright, legal notice & privacy statement