Using external CSS stylesheets

Most of the time styling is done using the Styling dialogs provided as part of the Behavior Editor. These dialogs generate CSS stylesheets, tuned for different browsers, and they are used automatically without you needing to be even aware of their existence.

However sometimes it is useful to use a stylesheet that is separate from the automatic system. These we call 'external' stylesheets (even if they are hosted from within the site).

There are several reasons why you might want to do this:

• You want to reference a stylesheet hosted elsewhere (perhaps shared across multiple sites)
• You want to use - and style - specific tags (H1, H2, etc), for SEO purposes
• You want to leverage third-party styling tools

How to use an external stylesheet

There are two parts to using external stylesheets. If you are hosting the stylesheet elewhere, you can skip the first part.

1. Upload the stylesheet:

Add a Page to the site, that will not be visible to the public

On this page, enter some text. The exact text doesn't matter, but by convention it is useful to type in the name of the stylesheet, eg headings.css

Highlight this text, and use the link wizard to link it to a Document. Upload your css file as the document to link to.

Now right-click on the linked text, and you can see the URL of the CSS file. For example:

http://www.website.com/129/text/165/files/headings.css

We will need the relative version of this when we reference the CSS file (by using a relative url, rather than absolute, the link won't break if we later change the domain name).

2. Reference the CSS file:

In the Layout Manager, open the Behavior Editor for the page that needs to use the stylesheet.

Remember that Behavior Editor inheritance applies, so if you want to affect all of the site, select the globe object at the top of the tree.

In the Behavior Editor, select Settings / general Options / Head Tags , and in the Scripts text-area enter:

<link rel="stylesheet" type="text/css" href="../129/text/165/files/headings.css">

with the href value adjusted to match the url provided by the system when you uploaded the CSS file.

 

That will make the CSS available to the Page.

How to use

Edit the page, then change to Source in the Editor (there is a button on the menu bar).
In Source view enter your raw, hand crafted HTML with its mark-up.

You may be able to copy and paste from your existing webpage.

Then revert to Edit view, and Save the page.

The page will display reading the CSS mark-up specified in the referenced uploaded file.

To modify an external stylesheet

Edit the stylesheet locally using your chosen tools. Do not change the filename.

Upload the file to replace the file linked originally.