Hello,

I have 3 type of h2 headers on my web site:

1 - Post titles on a blog (Ex: <h2>New documents available for
download</h2>)

2 - Content section title (Ex: <h2>Contacts</h2>)

3 - Sidebar content section title (Ex: <h2>Publicity</h2>)

I am trying to build my CSS to style the 3 different headers but I am
having some problems. I could use:
h2.Post, h2.Content and h2.Sidebar

or:
h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar

or even:
h2 (for Post), h2.Content for content and then h2.Sidebar to change
Content class so it fits Sidebar.

So a section in sidebar would be:
<h2 class = "Content Sidebar">Publicity</h2>

Could someone help me in deciding how should I structure my classes?

Thank You,
Miguel

shapper wrote:
> Hello,
>
> I have 3 type of h2 headers on my web site:
>
> 1 - Post titles on a blog (Ex: <h2>New documents available for
> download</h2>)
>
> 2 - Content section title (Ex: <h2>Contacts</h2>)
>
> 3 - Sidebar content section title (Ex: <h2>Publicity</h2>)
>
> I am trying to build my CSS to style the 3 different headers but I am
> having some problems. I could use:
> h2.Post, h2.Content and h2.Sidebar
>
> or:
> h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar
>
> or even:
> h2 (for Post), h2.Content for content and then h2.Sidebar to change
> Content class so it fits Sidebar.
>
> So a section in sidebar would be:
> <h2 class = "Content Sidebar">Publicity</h2>
>
> Could someone help me in deciding how should I structure my classes?
>
>

Well if each of these "sections" are defined with containing block then
I would apply the class to the container and differentiate the headings
with the "descendant selector"

http://www.w3.org/TR/CSS21/selector....dant-selectors

..sidebar h2 { /* headings for sidebars */--

..content h2 { /* headings for content area */--


<div class="sidebar">
<h2>This will have sidebar styling</h2>
<p>...</p>
</div>

<div class="content">
<h2>This will have content styling</h2>
<p>Some content...</p>
</div>

You do not have to put a class on every element...

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

On Sep 22, 2:56-pm, "Jonathan N. Little" <lws4...@central.net> wrote:
> shapper wrote:
> > Hello,
>
> > I have 3 type of h2 headers on my web site:
>
> > 1 - Post titles on a blog (Ex: <h2>New documents available for
> > download</h2>)
>
> > 2 - Content section title (Ex: <h2>Contacts</h2>)
>
> > 3 - Sidebar content section title (Ex: <h2>Publicity</h2>)
>
> > I am trying to build my CSS to style the 3 different headers but I am
> > having some problems. I could use:
> > h2.Post, h2.Content and h2.Sidebar
>
> > or:
> > h2 (for maybe Post? This would be the base), h2.Content and h2.Sidebar
>
> > or even:
> > h2 (for Post), h2.Content for content and then h2.Sidebar to change
> > Content class so it fits Sidebar.
>
> > So a section in sidebar would be:
> > <h2 class = "Content Sidebar">Publicity</h2>
>
> > Could someone help me in deciding how should I structure my classes?
>
> Well if each of these "sections" are defined with containing block then
> I would apply the class to the container and differentiate the headings
> with the "descendant selector"
>
> http://www.w3.org/TR/CSS21/selector....dant-selectors
>
> .sidebar h2 { /* headings for sidebars */--
>
> .content h2 { /* headings for content area */--
>
> <div class="sidebar">
> <h2>This will have sidebar styling</h2>
> <p>...</p>
> </div>
>
> <div class="content">
> <h2>This will have content styling</h2>
> <p>Some content...</p>
> </div>
>
> You do not have to put a class on every element...
>
> --
> Take care,
>
> Jonathan
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

I see ... that is one approach ... I was also considering it.

Using your suggested approach I get my code more organized but longer
or not?

So you don't define default styles in your CSS (when I mean default I
don't mean the resulting from some Reset.css)

A side question: How do you organize your CSS? I usually use:

Typography, Layout, ...

So in Layout I would have:

div.Sidebar

and Typography I would have:

div.Sidebar h2

Or you put everything together?

Thanks,
Miguel

shapper wrote:
> On Sep 22, 2:56 pm, "Jonathan N. Little" <lws4...@central.net> wrote:

<snip>

>>> Could someone help me in deciding how should I structure my classes?
>> Well if each of these "sections" are defined with containing block then
>> I would apply the class to the container and differentiate the headings
>> with the "descendant selector"
>>
>> http://www.w3.org/TR/CSS21/selector....dant-selectors
>>
>> .sidebar h2 { /* headings for sidebars */--
>>
>> .content h2 { /* headings for content area */--
>>
>> <div class="sidebar">
>> <h2>This will have sidebar styling</h2>
>> <p>...</p>
>> </div>
>>
>> <div class="content">
>> <h2>This will have content styling</h2>
>> <p>Some content...</p>
>> </div>
>>
>> You do not have to put a class on every element...
>>

<you should snip my signature in replies>

> I see ... that is one approach ... I was also considering it.
>
> Using your suggested approach I get my code more organized but longer
> or not?

Not sure what you mean?

>
> So you don't define default styles in your CSS (when I mean default I
> don't mean the resulting from some Reset.css)
>

Still don't know what you mean. I only define what I which to change
from browser defaults or that is significant to my design. If it don't
matter whether or not my pages font is serif or not then I do not bother
defining it!

> A side question: How do you organize your CSS? I usually use:
>
> Typography, Layout, ...
>
> So in Layout I would have:
>
> div.Sidebar
>
> and Typography I would have:
>
> div.Sidebar h2
>
> Or you put everything together?



I organize is by the cascade. So generally the the broader more general
properties first and the more specific last.

p {
font: normal/110% "New Century Schoolbook", serif; text-indent: 3em;
--

p.shout {
font-size: x-large; font-weight: bold;
--

p#picayune {
font-size: x-small;
--

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com