Applying CSS Style font to text using FP

[laura]

I too am confused about how to use my external style sheet to apply a style
to a word or phrase. I have a class called
..normalblue {font-size: 10pt;
color : Navy;
font-weight: bold;}

but do not know how to apply the style except by opening the Code in HTML
and doing it manually. Why doesn't it work when I highlight my word, click
on Format/Style, add my .normalblue class to the list of user defined styles
and then apply it? Nothing happens - am I doing something wrong? I need to
apply a lot of styles throughout my website and it seems to defeat the
purpose of using FrontPage if I have to manually alter the HTML code for
each.

I also created a class font.normalblue with the same attributes, but could
not get that to work either. I would have thought the user defined styles
for a font might be visible and available when you click on Format/Font.

I am using FP 2000
Thanks
LauraTD

Hi Mary,

In FP select the text that you wish to apply the CSS Style to, switch to

Code/HTML view, enclose the text you wish to apply a CSS

style to with:
<span class="selectorName">The selected text</span> where "selectorName"

is the name of the CSS selector

 

[Steve Easton]

You don't add a class to by highlighting a word and applying it, you add a class to an
element in a page, such as a table, a cell, a div or a span etc. Right click the cell
that contains the text and then apply the class. Additionally, don't use the leading
period when applying the class just apply it as normalblue because the period is needed
when defining the class in the style sheet but not when applying it.

hth

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[laura]

Dear Steve,

While waiting for a reply, I have been looking more closely at FrontPage -
on the left of the toolbar, to the left of the font attributes it says
'Normal'. I looked down the list, I've never paid much attention to this
before, but found my .normalblue class in the list. The thing is, I need to
apply it, not always to a paragraph or table, but sometimes to a single word
or phrase within a paragraph of text. I keep trying, but as you said, it
affects the element, i.e., the whole paragraph. How therefore can I use it
for single words or phrases?

As I said, I am using an external style sheet and therefore wonder if I
should have been creating a class from the Format/Style menu in the first
place - surely that must be for "internal" styles? Anyway, even so, I still
could not get that to work either.

It's all so confusing!
LauraTD

 

[Steve Easton]

Considering that you just want to set a font style to a word or phrase, I would simply
highlight the word or phrase, right click and then select Font from the context menu and
do it that way.

The other option is to use span tags around the word or phrase and assign the class to the
span.

<span class="normalblue">the text here</span>

But, it is *much* more work.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[Peter Aitken]

Dear Steve,

While waiting for a reply, I have been looking more closely at FrontPage -
on the left of the toolbar, to the left of the font attributes it says
'Normal'. I looked down the list, I've never paid much attention to this
before, but found my .normalblue class in the list. The thing is, I need to
apply it, not always to a paragraph or table, but sometimes to a single word
or phrase within a paragraph of text. I keep trying, but as you said, it
affects the element, i.e., the whole paragraph. How therefore can I use it
for single words or phrases?

As I said, I am using an external style sheet and therefore wonder if I
should have been creating a class from the Format/Style menu in the first
place - surely that must be for "internal" styles? Anyway, even so, I still
could not get that to work either.

It's all so confusing!
LauraTD

It's quite easy - here are the steps. This is FP 2002.

1. Select Format|Style.
2. In the Style dialog select User Defined Styles in the List box.
3. Click New.
4. In the New Style dialog select Character in the Style Type list.
5. Enter a name for the style, for example blue (no period)
6. Click the Format button and set the desired font, color, etc.
7. Click OK to exit all dialogs.
8. In the document highlight the text to be formatted.
9. Open the style list in the FP toolbar. Your style will be listed with an
underlined "a" indicating that it is a character style. Select the style.

Voila! FP inserts a <span> tag around your text like this: <span
class="YourStyleName">The text</span>.

By the way, you are wise to do it this way rather than using <font> tags as
someone else suggested. You will be able to change the formatting through
the entie document with a simple style edit rather than having to go through
and edit all the individual fonts.

 

[Steve Easton]

Good catch Peter.
Guess the coffee hadn't taken effect yet this morning.

;-)

--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed............
........................with a computer

 

[laura]

Peter,

Thanks for the advice, everything I have read points towards using styles
instead of the <font> tag and that is why I was persevering.

I tried following your steps in FP2000 and got stuck atI don't have an option that says" Style Type list" or "Character". All I
have is
Name (selector)
Preview
Description.

I don't know what a character style is and presume this is what is going to
put the <span> tag in place?

LauraTD

 

[laura]

Just following on from this, and it's probably the same issue, but how do I
use <div> in FrontPage without actually going to the HTML code? I have spent
a long time learning about CSS and the external style sheet, linking it
etc., and understand how to do it all if I work directly in HTML, but really
would like to be able to do everything in FP also, partly because I am going
to pass on control of the website to people who understand FP, but not a lot
about HTML. I don't want to have to tell them that they have to keep dipping
into the HTML in order to make use of the styles.

Would I be right in assuming that everything can be done in FP without ever
looking at or amending the HTML? If so, I am not really too sure how all of
the classes I have set up in my stylesheet are going to be visible as only
some of them seem to appear - this could just be a bit of bad programming on
my part, but it would help if I understood the theory behind FP and CSS and
how to use them both.

As I understand it also, what you suggested below would be for me to create
an internal style. How would I use div and span otherwise?

As I said, am confused.
LauraTD

 

[Peter Aitken]

Peter,

Thanks for the advice, everything I have read points towards using styles
instead of the <font> tag and that is why I was persevering.

I tried following your steps in FP2000 and got stuck at list.<<
I don't have an option that says" Style Type list" or "Character". All I
have is
Name (selector)
Preview
Description.

I don't know what a character style is and presume this is what is going to
put the <span> tag in place?

LauraTD

I looked at someone else's copy of FP 2000 and you may be out of luck - it
appears to support only paragraph styles. Maybe someone with a lot of
experience using this version knows a workaround.

You are right about character styles - they apply to any sequence of 1 or
more characters without regard to paragraph breaks.

CSS and XHTML is definitely the way to go, IMO. I am currently trying to
learn CSS beyond the basics - it is quite amazing what you can do with it!
For example for one client I implemented a tabbed link interface using only
styles.

Good luck,

 

[Peter Aitken]

Just following on from this, and it's probably the same issue, but how do I
use <div> in FrontPage without actually going to the HTML code? I have spent
a long time learning about CSS and the external style sheet, linking it
etc., and understand how to do it all if I work directly in HTML, but really
would like to be able to do everything in FP also, partly because I am going
to pass on control of the website to people who understand FP, but not a lot
about HTML. I don't want to have to tell them that they have to keep dipping
into the HTML in order to make use of the styles.

Would I be right in assuming that everything can be done in FP without ever
looking at or amending the HTML? If so, I am not really too sure how all of
the classes I have set up in my stylesheet are going to be visible as only
some of them seem to appear - this could just be a bit of bad programming on
my part, but it would help if I understood the theory behind FP and CSS and
how to use them both.

As I understand it also, what you suggested below would be for me to create
an internal style. How would I use div and span otherwise?

As I said, am confused.
LauraTD

<div> is like <span> in that it is an arbitrary way to mark off sections of
your document. They differ in that <div> is a block tag - anything following
<div>...</div> will start on a new line. Thus you could not use <div> to
affect a single word in a sentence. These tags are useless by themselves,
AFAIK. They must have some attribute such as class="whatever" to tell the
browser what exactly to do with the content inside the tags, usually based
on a style sheet.

You most definitely CANNOT do everything in FP without working directly with
the HTML. This is true even of the latest FP version and even more so with
an older one such as 2000. If you really want to stay away from HTML I
suggest upgrading to the latest FP - you'll have a lot more flexibility. But
if you really want to become an expert at web design there is no getting
away from learning HTML and CSS. I have been using "Cascading Style Sheets:
The Definitive Guide" by Eric Meyer and can recommend it. HTML - or more
specifically XHTML is pretty easy to learn without all the formatting tags
that cluttered up HTML. In fact even tables are on the way out for most uses
because you can do the same thing with CSS (or so I am told - I haven't
figured this part out yet).

 

[laura]

Peter,

Many thanks for your comments, thoughts, input. I too have been working hard
to learn CSS and naturally started with HTML, even before I ever looked at
FP, so I have a good background and do not mind working that way although
there are obviously huge advantages to working in FP. If I am going to use
FP to do 'most' of the work, I need to know if it can handle the things I
have been asking about here. As far as I can see, therefore, if I want to
use <div> and <span>, I have to do it in the HTML code. I will certainly
consider upgrading my FrontPage also.

I have been concentrating recently on trying, using CSS to recreate a
website I did using tables for layout and found that after a bit of learning
and changing my mindset from tables to CSS, I was able to do so. I am not
quite sure if I understand correctly that it is advised that we do not use
tables for layout, but are we not supposed to use them for anything at all?
If you need to do a few columns of text figures, surely using a table makes
sense. Are we supposed to start to think in terms of doing without them all
together?

Once again, many thanks.
LauraTD