External CSS for Xara

Xara templates use embedded CSS. This means all of the styles information is in the head of the document, between the opening and closing style tag. Converting the templates to external CSS is really very simple.

Once you have completed your style changes within Xara, you will find it easier to make additional changes later if you create an external style sheet for your website.

For example, if later you decide to change the font for your website you will only need to change the code on the external style sheet. This automatically changes the font on all pages.

If you have not yet downloaded the free trial version of Xara and are simply looking for additional information, we have a complete Xara Webstyle 4 Review with screenshots, on our main site.

This tutorial to convert Xara templates from embedded CSS to external CSS is written for Xara Webstyle 4 and FrontPage 2003. With minor adjustments, it could also easily be used for prior versions of FrontPage.

IMPORTANT NOTE:All screenshot links of the steps will open in a new window to make it easier for you to follow this tutorial step by step. These screenshots are large to show great detail. It may necessary for you to open your browser window “full screen” in order to view a clear image.

External CSS Tutorial for Xara and FrontPage

Step 1:
In FrontPage 2003, select file > New. View Screenshot

Step 2:
A new column will open to the right. Select “More Page templates” under the “New Page” section. View Screenshot

Step 3:
A new box will open. Select the “Style Sheets” tab. Select “Normal Style Sheet” and click “OK” View Screenshot

Step 4:
In the menu select File > Save As. A new box will open. First, verify at the top of the box that the new page will be saved in the correct web where your new template is located. At the bottom of the box, next to “File Name” enter the name “styles” and select “save”. Do not close the CSS document yet though, as we will be using it again in a few minutes. View Screenshot

Step 5:
Open the index page of the template you are working with, in FrontPage. Select the “code” tab to work from, located at the bottom of the screen. View Screenshot

Step 6:
Highlight ALL code between the opening and closing “style” tag, located in the head of the document. Right click on the highlighted code and select “copy”. View Screenshot.

Highlight all code between the opening and closing style tag.

Step 7:
Go to the CSS page that you just created. Right click at the top of the empty page and select paste. Now we need to remove the first line, which is the opening style tag, and the last line, which is the closing style tag. To do this, simply highlight the text and select delete. Select File Save > View Screenshot

Remove Style Opening and Closing Tags

IMPORTANT NOTE: There may also be an arrow or an arrow with an exclamation point at the beginning and end of the CSS document (following the opening style tag and prior to the closing tag) if so, remove them also.

Code Following Opening Style Tag and Prior to Closing Style Tag

Step 8:
Return to “code” view of the Xara template. Delete ALL of the code you highlighted previously, from the opening to the closing style tag. View Screenshot

Step 9:
Now we need to insert a line of code into the head of the document that will link to the new external style sheet (CSS). Insert the following code PRIOR to the closing head tag and save the document. View Screenshot

External CSS

If you found this tutorial to be helpful to you, please consider linking to our site to share our articles with others.

Leave a Reply