I am building a web site, and finally doing a bit of experimenting with CSS.

The home page is at
http://www.eclipsme.com/rockledge/index.html

The menu on the left, the Header at the top, and the Footer at the
,uh... you know - the bottom, are all included pages. I do this to make
this content easy to update.

I have attached a style sheet to index.html (styles.css) and have a line
(what is it called, an attribute???) thus:

a { padding:2; text-decoration: none; color:#FFFFFF; font-size:10pt;
font-weight:bold}

This is all on one line. So far so good.

What I would like to do, though, is have the links on the menu be a
different color (or in this example, a different size) than those in the
main body of the page, that is, in those areas that are not the menu,
header, or footer.

I tried creating a style sheet called menu.css and attaching it to
menu.htm. The menu works perfectly as long as it is called independently:

http://www.eclipsme.com/rockledge/menu.htm

The text is extra large on the above page for this test. It will
normally be smaller, but you can see that as soon as you click on a link
and the menu becomes included, the menu.css is ignored, and the text in
the menu is small again.

Am I doing something wrong? Is there a better way - or perhaps I should
ask - any way to do this?

Thank you very much,
Harvey

> I have attached a style sheet to index.html (styles.css) and have a line
> (what is it called, an attribute???) thus:

That's called a CSS rule.

> Am I doing something wrong? Is there a better way - or perhaps I should
> ask - any way to do this?

There is a much better way -

Consider -

a { padding:2px; text-decoration: none; color:#FFFFFF; font-size:10pt;
font-weight:bold}

/* all values MUST have units, so your padding of 2 won't work. I assume
you mean 2px */
/* also, points are a print metric - it's much better to use something that
is for the web */
/* that would be something like pixels, ems, ens, exs, percents, or font
size names */
/* this rule will hit all links on the page, except for those that follow */


#menu a { padding:2px; text-decoration: none; color:#333;
font-size:10pt; font-weight:bold}

/* this rule will hit all links that are within <div id="menu"> but none of
the others on the page */


--
Murray
--------------
MVP FrontPage


"eclipsme" <(E-Mail Removed)> wrote in message
news:7KT3g.21858$(E-Mail Removed)...
>I am building a web site, and finally doing a bit of experimenting with
>CSS.
>
> The home page is at
> http://www.eclipsme.com/rockledge/index.html
>
> The menu on the left, the Header at the top, and the Footer at the ,uh...
> you know - the bottom, are all included pages. I do this to make this
> content easy to update.
>
> I have attached a style sheet to index.html (styles.css) and have a line
> (what is it called, an attribute???) thus:
>
> a { padding:2; text-decoration: none; color:#FFFFFF; font-size:10pt;
> font-weight:bold}
>
> This is all on one line. So far so good.
>
> What I would like to do, though, is have the links on the menu be a
> different color (or in this example, a different size) than those in the
> main body of the page, that is, in those areas that are not the menu,
> header, or footer.
>
> I tried creating a style sheet called menu.css and attaching it to
> menu.htm. The menu works perfectly as long as it is called independently:
>
> http://www.eclipsme.com/rockledge/menu.htm
>
> The text is extra large on the above page for this test. It will normally
> be smaller, but you can see that as soon as you click on a link and the
> menu becomes included, the menu.css is ignored, and the text in the menu
> is small again.
>
> Am I doing something wrong? Is there a better way - or perhaps I should
> ask - any way to do this?
>
> Thank you very much,
> Harvey

Murray wrote:
>> I have attached a style sheet to index.html (styles.css) and have a line
>> (what is it called, an attribute???) thus:
>
> That's called a CSS rule.
>
>> Am I doing something wrong? Is there a better way - or perhaps I should
>> ask - any way to do this?
>
> There is a much better way -
>
> Consider -
>
> a { padding:2px; text-decoration: none; color:#FFFFFF; font-size:10pt;
> font-weight:bold}
>
> /* all values MUST have units, so your padding of 2 won't work. I assume
> you mean 2px */
> /* also, points are a print metric - it's much better to use something that
> is for the web */
> /* that would be something like pixels, ems, ens, exs, percents, or font
> size names */
> /* this rule will hit all links on the page, except for those that follow */
>
>
> #menu a { padding:2px; text-decoration: none; color:#333;
> font-size:10pt; font-weight:bold}
>
> /* this rule will hit all links that are within <div id="menu"> but none of
> the others on the page */
>

Thank you Murray.

Yes, that did it perfectly!

Thank you very much!
Harvey

Murray wrote:
>> I have attached a style sheet to index.html (styles.css) and have a line
>> (what is it called, an attribute???) thus:
>
> That's called a CSS rule.
>
>> Am I doing something wrong? Is there a better way - or perhaps I should
>> ask - any way to do this?
>
> There is a much better way -
>
> Consider -
>
> a { padding:2px; text-decoration: none; color:#FFFFFF; font-size:10pt;
> font-weight:bold}
>
> /* all values MUST have units, so your padding of 2 won't work. I assume
> you mean 2px */
> /* also, points are a print metric - it's much better to use something that
> is for the web */
> /* that would be something like pixels, ems, ens, exs, percents, or font
> size names */
> /* this rule will hit all links on the page, except for those that follow */
>
>
> #menu a { padding:2px; text-decoration: none; color:#333;
> font-size:10pt; font-weight:bold}
>
> /* this rule will hit all links that are within <div id="menu"> but none of
> the others on the page */
>

Not only is it working, Murray, but I put the div in the menu.htm page,
and all pages that use the menu now see the formatting!

Thanks again,
Harvey

You're welcome, Harvey. Descendent selectors like that can be used in a
very powerful way....

--
Murray
--------------
MVP FrontPage


"eclipsme" <(E-Mail Removed)> wrote in message
news:NzV3g.22001$(E-Mail Removed)...
> Murray wrote:
>>> I have attached a style sheet to index.html (styles.css) and have a line
>>> (what is it called, an attribute???) thus:
>>
>> That's called a CSS rule.
>>
>>> Am I doing something wrong? Is there a better way - or perhaps I should
>>> ask - any way to do this?
>>
>> There is a much better way -
>>
>> Consider -
>>
>> a { padding:2px; text-decoration: none; color:#FFFFFF;
>> font-size:10pt; font-weight:bold}
>>
>> /* all values MUST have units, so your padding of 2 won't work. I assume
>> you mean 2px */
>> /* also, points are a print metric - it's much better to use something
>> that is for the web */
>> /* that would be something like pixels, ems, ens, exs, percents, or font
>> size names */
>> /* this rule will hit all links on the page, except for those that follow
>> */
>>
>>
>> #menu a { padding:2px; text-decoration: none; color:#333;
>> font-size:10pt; font-weight:bold}
>>
>> /* this rule will hit all links that are within <div id="menu"> but none
>> of the others on the page */
>>
>
> Not only is it working, Murray, but I put the div in the menu.htm page,
> and all pages that use the menu now see the formatting!
>
> Thanks again,
> Harvey

Murray wrote:
> You're welcome, Harvey. Descendent selectors like that can be used in a
> very powerful way....
>

Wow, I had to google that. Thanks for the terms.

Harvey

You're welcome. What you will find as you think about it, is that by using
descendent selectors, you can eliminate 90% of your custom classes, *and*
you will make your stylesheets easier to debug in the process....

--
Murray
--------------
MVP FrontPage


"eclipsme" <(E-Mail Removed)> wrote in message
news:mN14g.31386$(E-Mail Removed)...
> Murray wrote:
>> You're welcome, Harvey. Descendent selectors like that can be used in a
>> very powerful way....
>>
>
> Wow, I had to google that. Thanks for the terms.
>
> Harvey