Real basic CSS in FP question

[tcarp]

I'm just starting to experiment with CSS and am working through some of the
very basic concepts. I've pulled in one of the FP Style Sheets and have
experimented with changing some of the entries in the Style Sheet with some
success. However, I'm confused about how the entries that start with a
period (e.g. .headline) are used. It appears that when I apply this style it
gets appended with one of the standard styles, like heading 1, normal, etc.
ending up with something like normal.headline. Does this mean that I get
normal plus headline? It appears that the style declaration I end up with is
whatever style the element currently has associated with it along with the
..headline. So, for example, if the element is heading 1 and I use the Style
selector to apply .headline I end up with heading 1.headline.

I'm assuming that I can't change the standard styles (heading 1, heading 2,
normal) or any of the default settings, so I don't understand the
relationship between the definition I have built-in and those in the Style
Sheet. For example, if I declare h1 in the style sheet do the properties I
include override the default ones?

Be gentle, I've been reading as much as I can, but most doesn't get down to
the very basic level in FrontPage.

Thanks

Tom

 

[Steve Easton]

..headline means it's a class.

You apply a class to a container, ( table, div, p tag ) like this.

<table class="headline">

Then everything that is designated in your style sheet in the .headline
class is applied to the table.

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

 

[Murray]

CSS is based on RULES which contain STYLES, and SELECTORS, e.g.,

p { color:blue; }

That whole line is a rule. The color:blue is a style. The "p" is a
selector.

Selectors can be of four different kinds -

1. a tag name
2. a custom class
3. an id selector
4. a descendent selector

The example above is using a tag name as a selector - all <p> tags on the
page will contain blue text.

A custom class would look something like this -

..special { color:green; }

So, all <p> tags containing that class specification would contain green
text instead of blue, e.g.,

<p class="special">this is green</p>

An id selector would look like this -

#reallySpecial { color:red; }

and you can apply it like this -

<p id="reallySpecial" class="special">this is red</p>

What you can see from this is that the id selector's rule has overridden the
class selector's rule, because the text is red. This illustrates one of the
fundamental differences between id selectors and custom classes - the former
have a 'greater specificity' and will 'trump' other rules that apply but
with a lower specificity, like custom classes.

Finally, a descendent selector will look like this -

..special span { color:black; }

It says to make any span tag's contents black when they occur inside a
container with a class of 'special', e.g.,

<p class="special">This text is blue except <span>for this, which is
black</span></p>

The selector specifies the 'descent' of the rule from container to content,
i.e., from 'ancestor' to 'child', where, in this case, the <p> tag is the
ancestor, and the <span> tag is the child.

One final thing. ID selectors must be unique, in that only a single element
on any given page can possess it, e.g.,

<p id="reallySpecial">whatever</p>
<p id="reallySpecial">whatever</p>

is an illegal instance of this, since there are two elements, each of which
has the id="reallySpecial" value.

A class selector can be used any number of times on a given page, e.g.,

<p class="special">This text is blue except <span>for this, which is
black</span></p>
<p class="special">This text is blue except <span>for this, which is
black</span></p>

would be perfectly valid.

Does that help?

 

[tcarp]

Thanks both Steve and Murray

It does help. I have a long way to go to get some of the basic concepts.

One thing that didn't get answered was the question on something like
heading 1. In the Style Sheet I have h1 is declared with font size, etc. It
appears that when I change that rule any text I have assigned to heading 1
changes. Pretty straight forward. What happens though if I have a rule for
h1 and the .headline rule and I assign the style heading 1.headline?

Maybe this is what you tried to explain with the difference between a tag
and a class. But in the Style Sheet, h1 is not preceeded with a # sign.

I really don't need to drag you through a tutorial on CSS. I think if you
could give me a good book to read or a good site that starts out very basic
with lots of examples that would be great. Remember that I will probably be
using the CSS with both FrontPage and with other, more basic html generators,
like Word and Publisher.

Thanks

Tom

 

[Trevor L.]

Thanks both Steve and Murray

It does help. I have a long way to go to get some of the basic
concepts.

One thing that didn't get answered was the question on something like
heading 1. In the Style Sheet I have h1 is declared with font size,
etc. It appears that when I change that rule any text I have
assigned to heading 1 changes. Pretty straight forward. What
happens though if I have a rule for h1 and the .headline rule and I
assign the style heading 1.headline?

I am not as knowledgeable as Steve and Murray.

But what does this statement mean:
"I assign the style heading 1.headline? "

You say that you have 2 rules
h1 {}
..headline {}

h1 will apply to all <h1> tags
But if you specify <p class="headline">, then the headline style will be
applied

I don't know what <h1 class="headline"> would do. You need a Steve or Murray
to answer this.
My guess is that the style in headline will override that in h1 where
conflicts occur.

As you have stated it, there is no style named 'heading' 'heading 1'
'1.headline' or 'heading 1.headline' (blanks are illegal in a name anyway)

Maybe this is what you tried to explain with the difference between a
tag and a class. But in the Style Sheet, h1 is not preceded with a
# sign.

I really don't need to drag you through a tutorial on CSS. I think
if you could give me a good book to read or a good site that starts
out very basic with lots of examples that would be great.

Try http://www.w3schools.com/

Remember
that I will probably be using the CSS with both FrontPage and with
other, more basic html generators, like Word and Publisher.

Don't try to create html with Word or Publisher. They are *not* "more basic
html generators".

FrontPage *is* an html generator. The other two may supply some facilities,
but avoid them. They will only lead you into strife.

If you post your CSS here, we (readers of this NG) could offer some further
suggestions

Good luck. It becomes easier after a while.

 

[Murray]

Trevor has done a good job explaining this.

My guess is that the style in headline will override that in h1 where
conflicts occur.

In the scheme of things, there are rules for calculating the specificity of
the styles. Here are some of the rules -

1. The style that is closest to the element being styled wins in the absence
of other mitigating factors. This is why you cannot trump font tags with
CSS, since the font styles are always closer.
2. A redefined tag has a specificity value of 1.
3. A custom class has a specificity of 10.
4. An id selector has a specificity of 100.

Thus, in this case, the green color would have a specificity of 1 and the
custom class of 10. The class wins.

h1 { color:green; }
..headline { color:red; }

Correct. h1 is a style applying to a specific tag namely <h1>

more basic html generators, like Word and Publisher.

<shudder> Avoid using either of these to write HTML</shudder>

 

[tcarp]

Thanks Trevor

I know it wil become easier. I'm just at the point where I'm working
through the basics.

The header1.headline comment is because of what I've observed in the Style
selector in FP. When you select .headline (a class (I hope I have that
right) defined in the Style Sheet I'm using), the style selector will display
the current style of the text being selected with the .headline suffix. In
other words, if the current selection has a style line heading 1 or normal or
whatever applied to it and you then select the class, the style is displayed
as heading 1.headline or normal.headline.

Based on what I think I know that means that the text has a style and a
class applied to it.

Thanks for helping my learning curve.

Tom

 

[tcarp]

Thanks again Murray. It is helping.

I think the basic question I now have is where do the "default" style
definitions come from and can they be modified? This includes styles like
heading 1, normal, etc. and the default fonts and default font size?
Assuming that the defaults and standard style definitions are not changable,
then, if you want control over them, do you create a rule for them to create
this know base from which to make additional changes?

With the help I'm getting here I have been successful in seeing changes I
make in Style Sheets actually show up on the pages (although I have noticed
that, in some cases, I have to back all the way out of FP and restart the app
to get the changes to "take".

Thanks again.

Tom

 

[Murray]

I think the basic question I now have is where do the "default" style

definitions come from and can they be modified? This includes styles like
heading 1, normal, etc. and the default fonts and default font size?

When you say heading1, I assume you mean <h1>, right?

Anyhow, each browser has a default stylesheet, e.g., FireFox is here (on a
PC) -

C:\Program Files\Mozilla Firefox\res\html.css

and you can change this, but only on YOUR PC, of course. I don't know where
IE's is.

For work on the web, though, you'd want to do these changes in your
stylesheet, and yes, you can change the definition of *every* HTML tag if
you want. I basically do that on every stylesheet (although not for every
tag - just for a critical few, like html, body, and maybe p and ul/ol/li).

 

[tcarp]

Just a note to let you know that learning is taking place.

One of the confusing things that got me to start this thread was that things
weren't reacting (what showed up on the web page) to changes to the rules in
the Style Sheet.

I've just discovered how unforgiving (no complaint) the syntax rules are in
the Style Sheet. Todays learnings: make certain that you spell the font
family Vernada not Veranda, watch out for missing semi-colons, and make sure
that you type font-size not font_size. I used to code in BAL in the early
days of mainframe computing so I understand the discipline needed to get the
sytax right. Another opportunity to learn the same lesson.

Things are not starting to react predictably to the Style Sheet changes.

Tom

 

[tcarp]

Wow, just did a search on *.css. I had no idea. Are the themes in FP just
style sheets?

I didn't see IE's but found Netscapes. So there's no "default" in FP, just
in the browsers(?)

Tom

 

[Murray]

Todays learnings: make certain that you spell the font

family Vernada not Veranda

V E R D A N A....

 

[Murray]

Are the themes in FP just

style sheets?

To some extent, yes.

I didn't see IE's but found Netscapes. So there's no "default" in FP,
just
in the browsers(?)

I am not sure about IE - the defaults could be hardwired. The lesson here -
if you worry about the defaults (and you should) then control them with your
stylesheet.

 

[tcarp]

I got your comment on FP vs Word or Publisher for html editing. But what
happens if you inherit a site that is built in using one of those apps? I
have one of those sites that I've been asked to maintain. I haven't tried it
yet, however, can the html be edited in FP without making it a FP web site?
(I assume you understand the question.) My understanding is that FP has all
sorts of context that it creates and, since some day I'll pass on the
maintenance of the site to someone else who may not have FP, this could
create a problem.

Tom

 

[tcarp]

Oops, I can't even type it right in a post.

Tom

V E R D A N A....

 

[tcarp]

Got it! But where do the defaults come from when being viewed in FP? At the
bottom of the page the views include Normal, html, and Preview. And, of
course, in the menu I can Preview in Browser (which I assume uses my default
browser and would pick up the defaults from that browser.)

But where are the defaults coming from in the Normal view and the Preview
view.

Murray, this is way more a curiousity question than relavant since I now
understand, from your post, that it's a good idea to use the Style Sheet to
create a known baseline of rules.

P.S. This thread has been REALLY helpful in getting me started. Thanks
again for taking the time to comment.

Tom

 

[Thomas A. Rowe]

When you use the Preview tab, FP is using the IE engine, which is not the complete browser.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[Murray]

But what

happens if you inherit a site that is built in using one of those apps?

The first thing you do is to rebuild the site. There's nothing worse than
maintaining a site where everything you touch breaks something else....

 

[tcarp]

Thanks

What about with the Normal tab?

Tom

When you use the Preview tab, FP is using the IE engine, which is not the complete browser.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

 

[tcarp]

Thomas, Murray, Trevor...

Do any of you know if there's an upgrade ($) to go from 2000 to 2003? I
suspect it's probably time for me to move ahead a little.

Tom