Style view – Basic CSS-Settings for your website

Let’s open style view.

In Style View you can set all standard style formats that are to be used for the whole website.

Following please find the most important CSS-Styles settings. Please consider that all automatic settings are likely to be interpreted by various browsers at their own default settings. Therefore it is important to define them yourself actively.

There are several ways to set styles in design view. I recommend using the comfortable menu as shown below:

manage-styles

Click on “manage styles” and open the menu. You will find all site-styles on the left hand side. You can edit each one of them according to your needs.

Standard text <p> </p>

Set the standard font/character for your website here:

manage-styles-p

At this stage, you will typically only take a decision on the font type and color. I don’t add padding, because I always have additional style settings in page view. We will see that later in this tutorial.

Edit the settings here:

text-format

Title format - H Tags H1, H2, H3 etc.

Now you should find the right fonts and colors, underlines and padding for your titles. You will find six different title formats that you can use. Here as an example the main title format H1:

manage-styles-H1

When you set titles tags make sure you define the margins. Otherwise browsers will interpret the margins differently and your website will not display consistently on different browsers:

manage-style-H1-margins

Now set your CSS-formats for links, lists and bullets.

Graphic background for the whole website - Body

You now need a graphic background for your website. Stay in the “manage styles” menu and click on “body”:

manage-styles-body

In this dialogue box you can ignore text-settings. Use the tab “background” to insert your background image and color:

manage-styles-body-2

You will have fun with this. You can choose almost any type of background style you want.

Typically, your graphics will be sliced to small snippets that can be repeated endlessly to display on any screen size. If you use a vertical gradient, your slice will be a vertical bit (min 10 px width) and will repeat horizontally endlessly. The rest of the screen on the lower end will be filled by the last gradient color, which you also set as background color here. Just try various settings. You will see the results when you go to page view.

This will be explained on this page.

Whatever you set here will apply to the whole website. These styles can only be overruled by other backgrounds on page view > F9 > layout HTML > background.

How do I set up classes or CSS-Styles for objects on my website?

We have now defined all we need for our style.css. All changes here will automatically be inserted in the style sheet.

Let’s continue our little workshop by setting styles for objects on our singular web pages.

 

Carry on reading here: Page view - Using CSS-Style for content.

 

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

Best regards
Barbara0701

www.nof-schule.de

Forum of NOF-Schule