Dreamweaver - CSS <h1> Question

Author

CSS <h1> Question

jip

2004-08-04, 7:15 pm

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?

Murray *TMM*

2004-08-04, 7:15 pm

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@macromedia.com> wrote in message
news:cerg2u$f24$1@forums.macromedia.com...
> 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?
>

darrel

2004-08-04, 7:15 pm

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

I'd do this:

h1 {
your main styles
}

..color1 {
background-color: whatever
}

..color2 {
background-color: whatever
}

etc...

Then your html would be:

<h# class="color1">title</h#>

> color; also, there are only <h1> - <h6> styles

h1 - h6 aren't different styles...they're different levels of headings. You
use them to establish a structure to your content (like an outline).

-Darrel

e2a

2004-08-04, 7:15 pm

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;
}

Michael Fesser

2004-08-04, 7:15 pm

.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

Adenocard

2004-08-04, 7:15 pm

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 ;)