External CSS FrontPage Tutorial
Basic Step by Step Tutorial for External CSS
This CSS FrontPage tutorial was written to teach you how to use
external
CSS
with Microsoft FrontPage. This will help make it possible for you
to make global style changes to your website all from a single file.
For example, if later you decide to change the font for your website
you will only need to change the code in the CSS file. This automatically
changes the font on all pages linked to the external style sheet
Using external CSS also streamlines the amount of code needed
for your pages. This can help improve the download time of your
pages, and also make it easier for the search engines to find your
content within all the code, quickly and easily.
This CSS FrontPage Tutorial is a continuation of our
FrontPage Training Tutorial. Once you learn how to implement
these tutorials, I do not want you to feel as if you need to jump
into the deep end and learn everything there is to know about CSS
immediately. Getting overwhelmed and giving up is way too easy if
you try to learn to much at once. As with everything we teach, take
things one small step at a time.
Even if you only start with moving just the font tags from your
HTML code to an external style sheet you will be way ahead of the
game. You will immediately begin to improve your code and save yourself
a tremendous amount of time maintaining your website.
Some people are most comfortable studying the basics of CSS independently
by using online tutorials. Others may find it easier to join a structured
online class.
Many have found it most effective to first read a basic
Introduction to Cascading Style Sheets and then actually
learning CSS in our
Website Development Training class.
I WILL SEE YOU AT THE TOP!
Mississippi Web Designer and SEO Training Specialist
Owner GNC Web Creations and Mississippi Photo Gallery
Define CSS (Cascading Style Sheets):
CSS is used by both the authors and readers of web pages to
define colors, fonts, layout, and other aspects of document presentation.
It is designed primarily to enable the separation of document
content (written in HTML or a similar markup language) from document
presentation (written in CSS). This separation can improve content
accessibility, provide more flexibility and control in the specification
of presentational characteristics, and reduce complexity and repetition
in the structural content.
Definition by Wikipedia
External CSS FrontPage Tutorial Training Note:The linked
FrontPage 2003 Training screenshots throughout this tutorial open
in a new window. This makes it possible to be able to work through
the steps while referring to the screenshots at the same time. Simply
click the red x to close the screenshot.
STEP 1 - Create New CSS File Using FrontPage
Open Microsoft FrontPage
From the file menu, select: file > new
 view
screenshot
From the task pane, located on the right side of the window,
select More Page Templates, located under the new page
section.
view
screenshot
A new box will open. Select the Style Sheets tab. Then,
select Normal Style Sheet and click OK
view
screenshot
From the file menu, select: file > save as
view
screenshot
A new box will open. First, verify at the top of the box that
the new CSS page will be saved in the correct FrontPage Web where
your test 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, as we will be using
it again in the next step.
view
screenshot
STEP 2 - Add Code to New CSS File
Add the following code to your new CSS file:
body {background-color:#ffffff;
color:#000000;
font-family:arial,sans-serif;
font-size:14px;}
h1 {color:#3e6f69; font:18px verdana,arial,sans-serif; font-weight:bold;}
h2 {color:#3e6f69; font:16px verdana,arial,sans-serif; font-weight:bold;}
h3 {color:#3e6f69; font:14px verdana,arial,sans-serif; font-weight:bold;}
h4 {color:#3e6f69; font:12px verdana,arial,sans-serif; font-weight:bold;}
view
screenshot
From the file menu, select: file > save
Step 3 - Add Link to External CSS File
Open the index page of the template you are working with, in
FrontPage. Select the design tab to work from, located
at the bottom of the screen. (Although I found found this step
to work fine from any of the tabs, the FrontPage Help files teach
that this step is done from the design tab.)
view
screenshot
From the Format menu, click Style Sheet Links
view
screenshot
A new box will open, click Add.
For the purpose of this tutorial, we will be linking only to
the current page. If you were working with a full website, you
might elect to choose to add the link to all pages in the current
web.
view
screenshot
Again, a new box will open. Locate and click the .css file. Click
OK.
view
screenshot
Using the code tab view the code that has been added to
the page.
view
screenshot
From the file menu, select File > Save
Using the preview tab view the formatting changes on the
page.
view
screenshot
Alternative Method To Create CSS File Without FrontPage
As you know, I find it very important that website owners are
able to make needed changes to their website regardless of the program
they are using.
You should always know an alternative method of accomplishing
any task so that you never become dependent on any particular program.
Creating a CSS file without the use of FrontPage is every bit as
simple as creating one with FrontPage.
Within the directory (folder) where your test website is located,
right click on any empty spot and select new > text
document.
view
screenshot
Open the new text document file you just created.
view
screenshot
From the menu of the file, select file > save as
A new box will open. In the space next to file name,
enter styles. In the space next to save as type,
scroll down to change this to All Files.
view
screenshot
If for some reason you created the CSS file in another location,
such as the desktop, simply drag the new file into the proper
FrontPage Web Folder where your test page is located.
If your preferences are set correctly in FrontPage, clicking
to open the file now will result in the file automatically opening
with FrontPage as a CSS file. Or, as an alternative if needed,
you can right click on the file and select: Open With > Microsoft
Office FrontPage.
Alternative To Add External Link Without FrontPage
Add the following code directly above the closing head tag
in the HTML for your page. (In FP use the code view tab.)
<link rel="stylesheet" type="text/css" href="styles.css">
view
screenshot
From the file menu, select File > Save
External CSS FrontPage Tutorial Training Notes
This CSS FrontPage Tutorial was written specifically for Microsoft
FrontPage 2003, but is applicable to previous versions of the program.
Any exceptions to this would not be a huge concern as alternative
methods are provided within the tutorial.
Are You Looking for Free Online Website Training?
Free Website Training Classes Provided by GNC Web Creations
1and1 Web Hosting Review
Dependable Hosting You Can Count On
If you are tired of your website being limited by your web hosting
company, you might want to consider looking at a company that will
meet your small business needs both now and in the future. We personally
use and recommend
1&1 Hosting.
We found the
1&1 Linux Developer Package to be an absolutely excellent
choice for our business, and it allowed us room for future growth.
Making the decision to move our domains was not an easy one, but
it has been a decision we never regretted. We have since added a
managed dedicated server that we are very pleased with.
Read our
1and1 Hosting Review to find out more!
GNC Web Creations - 133 Depot Street - Post Office Box 8 - Water Valley, MS 38965 - (662) 473-0063
Copyright © 2003 - 2008 J. Walker of GNC Web Creations All Rights Reserved
|
