GotFusion.com Where your journey begins
Full Service Web HostingNetObjects Fusion 7 Websites Portal

 


 

Tutorial Sections:

About Cascading StyleSheets (CSS)

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.

Top of Page

Why Use CSS?

  • 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

  1. Tools, Site Settings
  2. Click the Change button in the Browser Compatibility section.
  3. On the Target Browsers and HTML Generation dialog, in the Text Settings section at the bottom, select Cascading Style Sheets (CSS).
  1. Tools, Options, Current Site
  2. On the Current Site Options dialog, in the Text Settings section in the middle, select Cascading Style Sheets (CSS).

Top of Page

The Cascade

One of the real powers -- and traps -- of CSS is the way lower levels "inherit" formatting commands from any higher level. This is the cascade.

The cascade is an important concept to understand, because:

  • You can avoid many common problems by knowing how this works.
  • When unexpected results happen, you know where to look for the source of the problem: higher level formatting.

Understanding Fusion's Automatic CSS Setting

In Fusion CSS dialogs, the setting Automatic means, "Format this text the way higher levels in the cascade format this text."

The Cascade is a little complex. A picture is worth a few hundred, if not a thousand, words.

The diagram below from the NetObjects Fusion User's Guide does a good job explaining how the cascade works.

The CascadeBrowserSyte StylePageSelected Text

This graphic is an image map linked to specifics about the different CSS Cascade levels, and what they each do.

If your browser does not display graphics, or you don't like using image maps, here are text links: Browser level, Site Style level, Site level, Page level, Selected Text level.

The Browser

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).

Back to CSS Level image map
Top of Page

Styles in Site Style

Site Styles are the common page elements that you setup in Fusion's Style View, Text tab.

Fusion stores the Site Style CSS formatting commands in the external CSS file STYLE.CSS.

  • Don't mess with these styles at a lower level in the cascade unless you know exactly what you are doing.

Published HTML pages link to these CSS styles like this:

  • (In the portion of all pages in your site)
     

Some tips:

  • Define all your Site Style font sizes with PX sizing, except:
  • Don't define font sizes for the Link Text items. (Leave that size setting as "Automatic." For more information, read this.)

Back to CSS Level image map
Top of Page

Site

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),

  1. On the menu, click Text / Edit Text Styles
  2. Set Scope to Styles in site.

Text Styles Dialog with Styles In Site selected

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.

    Back to CSS Level image map
    Top of Page

    Page

    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:

    1. On the menu, click Text / Edit Text Styles
    2. 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.

    Back to CSS Level image map
    Top of Page

    Selected Text

    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:

    1. 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:


       

    2. 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.

    Back to CSS Level image map
    Top of Page

    More CSS Resources

    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).

    Other resources:



    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