CSS Questions

FrontPage® 2000 FAQ

CSS Questions

What is CSS

CSS (Cascading Style Sheets) are sets of instructions, or external files holding instructions, to tell the browser how to format or position tagged elements in your pages.

There are two ways you can use CSS :

For formatting text and elements on your pages.
For dynamically positioning elements at absolute points on your pages.

It is not a good Idea to use CSS for positioning, or the FP2000 absolute positioning tool, if some of your audience will be using Netscape. Netscape is notoriously buggy where most CSS positioning is concerned, and absolute positioning is not supported at all.

Back to FAQ

Why Use CSS ?

It eliminates "Inline Styles" from your HTML. Inline styles are tags like , as well as some elements in the <body> or other tags, such as link & background colours.

It's reported to be a bad idea to use inline styles, as they can "choke" some earlier browser versions, especially earlier versions of Netscape. But one of the annoying things about FP (and other visual web editors), is that it creates these tags regardless.

CSS also uses less code than inline styles do, and although it requires extra hand coding, it makes HTML code easier to read and maintain.

If using external CSS files, you can alter the look of every page that uses the CSS file, just by altering the attribute in the CSS file itself. This can save a lot of time and effort, updating web pages.

External CSS files could be compared to FP themes, controlling the look and feel of your web, although themes are a little limited compared to "manual" CSS. Themes use CSS too, although if you choose not to use CSS with Themes, then the code is converted to plain HTML.

Please Note : I do not recommend you try using CSS and FP Themes in the same web, unless you know exactly what you are doing. Sometimes, CSS and Theme style commands can contradict each other, producing unpredictable results.

In case you were wondering, this site uses CSS, but no theme.

Back to FAQ

Differences Between Internal & External CSS

Internal CSS (CSS within the page that uses it)

Here's an example of some CSS, that sets links to Arial 12pt. This would be inserted in the <HEAD> of your HTML.

<HEAD>

</HEAD>

This is fine, providing you want this page only, to have "Arial 12pt " links. But if you wanted to use this again on another page, you would have to insert the code into that page too.

External CSS (Style-sheets within your web, called by the pages that use them).

Using the example above, we could create an external CSS file (let's call it mycss.css) and insert the command above (although slightly differently, without the need for the style, or other tags).

a {font-family:Arial; font-size:12pt}

We could then link our page, or the entire web, to this CSS file, by choosing Format | Style Sheet Links from the FP2000 menu, and specifying the file mycss.css there. Also notice here, that you have a choice of linking the CSS file to selected pages (usually the page you are editing, or the pages you have selected in navigation view), or all pages (for the entire Web).

Once you have linked the CSS file, a line of code at the top of the HTML will be added to each linked page. In this example the line would look like this

This is the command that tells the page to link to the CSS file, and use it's formatting commands.

If you used this for the entire web, and you wanted the links to be 10pt instead of 12pt, then all you would have to do is alter the point size in the CSS file. Then the links on every page linked to the CSS file, would alter accordingly, without the need to edit any other pages.

This is just a small example of what CSS formatting can do. You can also control all aspects of links, fonts, headings, page and cell background attributes, as well as bullet point colours and spacing.

See the small tutorial below for more details.

Back to FAQ

CSS Formatting - A Brief Tutorial

Let's look at this page for an example.

It has a white background colour
It uses a background image called "backfill.gif"
The text is Arial 12pt and black
The Headers are Arial Orange Bold 12pt
The Links are green, change to red when active, and change to purple when visited
Some of the example coding text is red, and some is blue
Bullets are Orange but the text is normal
Also some of the text within a line is bold

All this is done, without the use of any inline styles or a FP Theme, but how ?

This page, and indeed every page on this entire site, is linked to a style sheet called newbee.css. Here is what this file looks like (items enclosed in [ ] are descriptions, and are not included in the file).

body {background-color:#FFFFFF; background-image: url(images/backfill.gif)}
[This sets the background colour of the page - White, and sets the background image to "backfill.gif"]

A:link {color:#008000} [The colour of the links - Green]

A:visited {color:#800080} [The colour of the Visited Links - Purple]

A:active {color:#FF0000} [The colour of the Active Links - Red]

a {font-family:Arial; font-size:12pt} [The font and font size of the links]

p {font-family:Arial; font-size:12pt; color:#000000}
[The font settings used for the normal text on the page - EG: any text enclosed in tags]

ul {line-height:100%; margin-top:10px; margin-bottom:30px}
[The settings for the bulleted lists]

li {list-style-type:disc; color:#FF9900}
[The type and colour of the bullets]

Note : Bullet types with Netscape 4x are ignored, but the colours are OK. Also note, to get the bulleted text a different colour to the bullet, you need to use tags inside the <li></li> tags

For example :

<ul>
 <li>
 This is the bulleted text
 </li>
</ul>

em {font-weight:bold; font-style:normal}
[This means Emphasis and can be used to emphasize words, in the style you set here, within another CSS tag, provided the CSS tag does not override it. (Note the "font-style :normal". Without this, the would be italic too)]

For Example :This text is not bold but this text is and this text is not

.p1 {font-family:Arial; font-size:14pt; font-weight:bold; color:#000000; text-align:center}
.p2 {font-family:Arial; font-size:12pt; font-weight:bold; color:#000000; text-align:center}
.p3 {font-family:Arial; font-size:12pt; font-weight:bold; color:#FF9900; text-align:center}
.p4 {font-family:Arial; font-size:12pt; font-weight:bold; color:#FF9900}
.p5 {font-family:Arial; font-size:10pt; color:#000000}
.p6 {font-family:Arial; font-size:12pt; color:#000000; text-align:center}
.p7 {font-family:Arial; font-size:10pt; font-weight:bold; color:#000000}
.p8 {font-family:Arial; font-size:12pt; font-weight:bold; color:#000000}
.p9 {font-family:Arial; font-size:10pt; font-weight:bold; color:#000000; text-align:center}
.p10 {font-family:Arial; font-size:10pt; color:#000000; text-align:center}
.myBlue {font-family:Arial; font-size:10pt; color:#000080}
.myRed {font-family:Arial; font-size:10pt; color:#800000}

These are a little different. These are actually named font styles that can be called as needed, with the use of the  selector.

For Example : Blah Blah Blah in HTML View would look like

Blah Blah Blah

Notice that this is from the .p2 style, which is Arial 12pt bold black and centered. You can call them what you want, but remember the names are Case Sensitive.

I hope this give you some grasp of CSS formatting. In no way have I covered all the things you can do with CSS, but further examples and tutorials are available at http://www.mako4css.com/index.htm

Back to FAQ

CSS Positioning - A Brief Overview

You can use CSS within a style sheet, for positioning items too, although Netscape's support of CSS Positioning is somewhat shaky at best.

Viewing CSS Formatting in a non CSS browser, will still show the text, so the user can still see the content of the page, even though it is not formatted the way you intended it to look. This is assuming you have not placed the text on a background colour that will obscure it.

But with most CSS positioning, the results in some browsers can be unpredictable, so you have to be very careful how you implement it.

For CSS Positioning tutorials, see http://www.mako4css.com/index.htm

Back to FAQ

All products and company names mentioned herein are the trademarks of their respective owners.
Microsoft® and FrontPage® are registered trademarks of Microsoft® Corporation in the United States and/or other Countries.