Basic understanding and implementation of CSS-styles in NetObjects Fusion

Let me explain the basics first. Particularly, what is the difference between CSS and HTML?

HTML governs the structure of your website and is – simply speaking – a set of boxes placed next or within each other. HTML doesn’t basically design or style anything, it just provides the website with a functioning technical framework.

Every “box” in HTML (can be a textbox, a container, an image, a table cell etc.) draws its design from a class. The class is defined as a style. The class includes backgrounds, font types, margins, padding, whatever is necessary for the good looks of your boxes.

Classes are defined in style-sheets. All you need to do in HTML is to give the box a hint linking it to a certain class, e.g.: class=”mystyle”.

In addition, your website-HTML links to the style-sheet containing your class-definitions. In NOF these links are generated by default and typically look like this:
 

<link rel="stylesheet" type="text/css" href="./html/style.css"></link>
<link rel="stylesheet" type="text/css" href="./html/site.css"></link>


The style-sheet style.css contains the styles which are defined for the whole website. In NetObjects those will be defined by the user in style-view.

The style-sheet site.css contains the styles which have been set for singular containers. In NetObjects these will be defined in page view. These CSS-style have priority and override default-styles set in design view.
 

Why should one use CSS-classes?

Very simple: If you use a textbox 100 times in your website, you will not want to define the style of this box 100 times. You only need to do it once! Eventual changes will apply to all 100 boxes with just a few clicks.

Moreover, formats that are defined in classes do not show in the HTML-code of your site. All that shows there is: class="whatever-my-class-is-called".
 

How do I apply this understanding in NetObjects Fusion?

Now the good news: It is very easy to use CSS-Styles in NOF!.

 

Carry on reading here: Style view – Basic CSS-Settings for your website

 

Have fun with this tutorial and ask your questions at forums.netobjects!

Best regards
Barbara0701

www.nof-schule.de

Forum of NOF-Schule