Stylesheets - assistance with css - h1 styling in two different div that are different

Author

assistance with css - h1 styling in two different div that are different

Helen Martin

2007-04-13, 3:24 am

I'm working on this website at

http://members.shaw.ca/sharethemusic/index.htm

I'm trying to figure out how to style headers so that I can have
different styles for different areas of my page..

I'm using one of those two column flowing layouts with a header, a
footer, a nav bar and a content section..

I want the h1 and h2 elements to be different if they are in the header
div/class than if they are in the content div/class however, when I try
to change the styling of the headers in the #top section, its changing
some of the headers in the #content section too..

I can't figure out how it works..

I tried doing something like this

#top h1,h1 {rules}

#content h1, h1, {rules}

that didn't work..

#top > h1,h2 {rules}

#content > h1, h2 {rules}

that didn't work either...

am I even in the right ballpark??

Els

2007-04-13, 3:24 am

Helen Martin wrote:

> http://members.shaw.ca/sharethemusic/index.htm
>
> I'm trying to figure out how to style headers so that I can have
> different styles for different areas of my page..

> I want the h1 and h2 elements to be different if they are in the header
> div/class than if they are in the content div/class however, when I try
> to change the styling of the headers in the #top section, its changing
> some of the headers in the #content section too..

> #top h1,h1 {rules}

That means any h1 that is inside #top, as well as any other h1.

> #content h1, h1, {rules}

That means any h1 that is inside #content, as well as any other h1,
except that the last comma will probably mean the rules don't get
applied.

> that didn't work..

True.

Try just this:
#top h1{rules}
#content h1{rules}

And if you ever doubt what a certain selector applies to, check with
the selectoracle:

http://gallery.theopalgroup.com/selectoracle/

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/