CSS with Included Content

  • Thread starter Thread starter eclipsme
  • Start date Start date
E

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
 
I have attached a style sheet to index.html (styles.css) and have a line
(what is it called, an attribute???) thus:
Click to expand...

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?
Click to expand...

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 said:
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 */
Click to expand...

Thank you Murray.

Yes, that did it perfectly!

Thank you very much!
Harvey
 
Murray said:
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 */
Click to expand...

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 said:
You're welcome, Harvey. Descendent selectors like that can be used in a
very powerful way....
Click to expand...

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