CSS with Included Content

[eclipsme]

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]

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 */

 

[eclipsme]

That's called a CSS rule.


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

 

[eclipsme]

That's called a CSS rule.


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]

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

 

[eclipsme]

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

 

[Murray]

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....