Before you delve into this topic too far, you should refer to the World Wide Web Consortium (W3C) CSS Standards documentation. W3C's CSS document is at http://www.w3.org/TR/REC-CSS1.html
It's a big document, but you'll have to digest it if you want to understand how CSS really works. Using a tool like NetObjects Fusion is faster and easier than coding HTML and CSS formatting commands -- but you really should consider investing the time to understand what the code Fusion publishes is actually doing for you.
The bad news: some CSS formatting commands work in some browsers, and not others. That means you have to experiment and test your work in as many different browsers as you can.
W3C CSS version 1 does not work at all with pre-version-4 browsers.
Netscape 4.7x is only partly compatible with CSS. In fact, you should strongly encourage anyone who still uses Netscape 4.x to upgrade.
Opera 6, Netscape 6, 7, Mozilla 1.0, and Microsoft Internet Explorer 5.5 and 6, all render basic CSS very well.
CSS replaces the old, unreliable HTML tag. W3C now lists the tag as "deprecated."
CSS formatting offers many more options for text formatting than HTML ever did.
Fusion's text formatting dialog shows you the same options whether you have set CSS formatting or HTML formatting. You must realize that many Fusion text formatting commands require you to Turn On CSS
Here's a short list of things you get with CSS that you can't get with HTML formatting (the tag):
Borders around text,
Extra space (padding) around text,
Paragraph first-line indent (or if you use a negative value, you get hanging indent), and
You get leaner HTML.
Fusion stores your CSS formatting commands in external CSS files that are not part of your HTML page. That means all the formatting commands download separately from your page content. Because browsers multitask by downloading multiple files at once, CSS renders much faster than a single HTML file with many tags.
Other CSS Advantages:
Don't like the way your headings look? Change the style, and all your headings change.
Styles just flow.
Most of you will find Web Design (with NetObjects Fusion or any other popular tool) little different than using a Word Processor. Just as you should use styles in Microsoft Word, you should also use CSS in Fusion.
Direct formatting is hard to change in many places.
If you want a "EmphasizedNormalText" Style to change from just bold to bold, red and underlined, with CSS, all you do is change the style.
Styles just flow.
Would you really rather search out every single bolded word on a hundred-page-plus site and change them all manually to bold, red, underlined?
If you use a CSS style to format your bold text, you'll crush hours of mistake-prone manual labor into a few mouse clicks.
Your changes to the CSS style will just flow.
Make Fusion Use CSS
Fusion MX Menu
Fusion 7, 7.5, and 8 Menus
Tools, Site Settings
Click the Change button in the Browser Compatibility section.
On the Target Browsers and HTML Generation dialog, in the Text Settings section at the bottom, select Cascading Style Sheets (CSS).
Tools, Options, Current Site
On the Current Site Options dialog, in the Text Settings section in the middle, select Cascading Style Sheets (CSS).
The browser is the "boss" level. You as a designer can not override custom browser settings.
Picky viewers of your site might set up their browsers in ways that will prevent your site from displaying as you designed it. What can you do about this?
Nothing, really.
Ask a person who complains to return their browser to default settings.
Design really critical layouts in your site with Flash (or Swish, or KoolMoves).
These are styles you can setup only from Fusion's Page View. Fusion stores the Site CSS formatting commands the file SITE.CSS. The published HTML pages link to these CSS styles like this:
(In the portion of all the pages in your site)
TIP:
Don't "reinvent the wheel." Because you never know when you'll want to use them on a new page, define all your custom styles as Styles in site.
To add or edit styles that will be available throughout the site (besides those defined as Site Styles in Style View),
On the menu, click Text / Edit Text Styles
Set Scope to Styles in site.
Notice that you can define styles at the Styles in site level that change the standard HTML tag elements that you already set in Style View, like
or
.
You will not see the changes you made to these styles from Page View when you view the text tab in Style View
You will not see the styles from Styles View Text Tab rendered correctly in the Text Styles Preview in Page View. (That's one of the things the text on the dialog that says "This preview may not show the format you'll see on your page because the text might be influenced by an additional style..." is talking about!) and
It may be confusing both to you and your user's browsers if you change standard HTML tag style elements using the tools in Page View.
Spare yourself some grief. Unless you have a very good reason, don't edit the standard HTML elements from Page View.
You setup Page styles from Fusion's Page View. Fusion stores the formatting commands in the
portion of just the current page, like this:
To create a style that's only available on the current page, from Page View, do this:
On the menu, click Text / Edit Text Styles
Set Scope to Styles in Page.
TIP: If you really want a different look for a certain style only on one page, you can use a page style with the same name as one defined in the Site.css to override formatting set at the site-wide level. This works, but
It will probably confuse you, and
It's slower for the browser to render, because the browser must throw away any higher level style formatting before rendering the text.
Instead, create unique new custom styles, Scope set to Styles in Site. You can override a higher level site style of the same name. But, because it may cause confusion, or not render correctly in some browsers, don't do this.
Fusion and the W3C give us two ways to apply CSS styles only to selected text within a page.
It can be one of your existing styles from the site level or page level, or,
It can be a brand new custom style that you create and apply directly to the text.
Using Existing Styles
For a whole paragraph:
Place the cursor anywhere in the paragraph, and on the Text Properties dialog, select one of the available Custom Styles from the pull-down list.
Fusion stores the CSS formatting commands in one of the external CSS files. The commands appear embedded in the page as CLASS attributes inside the
tag like this:
Only for selected words / characters:
Select the words or characters, then click the Span Tool on the Web Toolbar.
On the New Span dialog, select one of the Custom Styles from the pull down list.
Fusion stores the CSS formatting commands in one of the external CSS files. The commands appear in the page as CLASS attributes inside the tag like this: some text
Using Direct Formatting Styles
You can apply direct CSS formatting to text like this:
For a whole paragraph:
With the cursor anywhere in the paragraph, click the Format button on the Text Properties dialog. Set the style as desired.
The CSS formatting commands appear inside the
tag in the page like this:
Only for selected words / characters.
Select the words or characters, then click the Span Tool on the Web Toolbar.
On the New Span dialog, click the Format button, and setup the style as desired.
The CSS formatting commands appear inside a tag, like this: some text
Which is better?
Notice how much less code you place in the page by calling styles from the external .CSS file style sheets.
A "CLASS=" call to an externally named and defined style is way fewer bytes than the extra stuff that must appear in a complex direct CSS style.
Because you might use a style many times across your site, you should always define a custom style.
Even if you know 100% for sure that a certain format will never appear elsewhere, you should still define a custom style.
Your published HTML will be leaner in both cases if you use a custom style.
For more information about the specifics of how to use CSS text formatting in Fusion, please see the NetObjects Fusion User's Guide. Specifically, you want to read the section titled Formating Text:
C:\NetObjects Fusion\Docs\UserGuide.pdf Chapter Title Formatting Text
The Fusion manual has a very good summary of the concepts behind CSS, including the different levels where you can define styles, and how those levels cause formatting to "cascade" from the highest (the user's browser) to the lowest (what the designer defines within an element on an individual page).
