CSS <h1> Question

I have a header style defined in my css as follows:

h1 {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight:bold;
color: #FFFFFF;
margin: 5px 0px 3px 0px;
padding: 0px 0px 0px 5px;
background: #6DCF46;
background-repeat: repeat-x;
}

I also need to create 7-8 additional styles, the only difference being the bg
color. What is the best way to do that in css? In other words, it is too
inefficient to create 9 duplicate styles since the only difference is the bg
color; also, there are only <h1> - <h6> styles available and I need to
reference ~9. Any suggestions?

You will need separate styles, however, you can create one entry that addresses
all the attributes each would have in common - something like this:

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 13px;
}
h3 {
font-size: 12px;
}

There are only 6 heading taqs in html. you can create custom classes to
handle the others

h1,h2,h3,h4,h5,h6 {
font-weight: bold;
}
h1 {
font-size: 14px;
}
h2 {
font-size: 13px;
}
h3 {
font-size: 12px;
}

If the contents of these <h#> tags are not particularly semantically and
contextually meaningful to the page, then I wouldn't do it this way.

You can certainly do -

..style1, .style2, .style3, .style4, .style5, .style6, .style7, .style8 {
blah; }

and then follow on with -

..style1 { background-color:blue; }
..style2 { background-color:white; }
etc....

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"jip" <webforumsuser (AT) macromedia (DOT) com> wrote

I have a header style defined in my css as follows:

h1 {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight:bold;
color: #FFFFFF;
margin: 5px 0px 3px 0px;
padding: 0px 0px 0px 5px;
background: #6DCF46;
background-repeat: repeat-x;
}

I also need to create 7-8 additional styles, the only difference being
the bg
color. What is the best way to do that in css? In other words, it is too
inefficient to create 9 duplicate styles since the only difference is the
bg
color; also, there are only <h1> - <h6> styles available and I need to
reference ~9. Any suggestions?

jip follow darrel's example..

create one CSS style for the element, which I suggest you use <span> tags and
not headers,

then .classA through .classI your 9 different styles, differentiating the
background colors or font-size attributes as needed.

Anything out of the ordinary you can do in-line from the span tag ex: <span
class="classB" style="text-decoration:strikethough

get it ? cool

.oO(jip)

I also need to create 7-8 additional styles, the only difference being the bg
color. What is the best way to do that in css? In other words, it is too
inefficient to create 9 duplicate styles since the only difference is the bg
color; also, there are only <h1> - <h6> styles available and I need to
reference ~9. Any suggestions?

5.2.1 Grouping
http://www.w3.org/TR/CSS21/selector.html#grouping

Micha