...

View Full Version : Resolved Defining CSS in different div sections



ASVincent
05-09-2011, 01:58 PM
Hi,
I was wondering if it was possible to code different styles for heading under different div tags in one external css document?

So I have one external css, and I want h1 in the header division to be different from h1 in the content division, to be different from the h1 blog posts division etc.
I know I can use individual IDs, or internal styles, but was looking for a faster approach and thought that this might be a feature and that I didn't know the right syntax.

Thanks,
Alex

teedoff
05-09-2011, 02:07 PM
Have a look at Specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).

And btw, just so you know, there a 6 levels of heading tags. h1 through h6. You dont have to use h1 for every important heading or key title/phrase.

AndrewGSW
05-09-2011, 06:20 PM
Have a look at Specificity (http://www.htmldog.com/guides/cssadvanced/specificity/).

And btw, just so you know, there a 6 levels of heading tags. h1 through h6. You dont have to use h1 for every important heading or key title/phrase.
It is preferable to use h1 tags for your main headings, and h2 for sub-headings, etc. for:

Search Engine Optimization
Accessibility
Clarity

You can either give your various sections id numbers and target the headings within these:

#mainContent h1 { /* rules here */ }
or use class names for either the sections (preferred) or each heading:

.contentClass h1 { /* rules to apply to headings within sections with this class */ }
h1.headingClass { /* rules to apply to all heading 1's with this class */ }
To add a class to a div:

<div class="contentClass"><h1>My Main Heading</h1></div>

teedoff
05-09-2011, 06:24 PM
It is preferable to use h1 tags for your main headings, and h2 for sub-headings, etc. for:

Search Engine Optimization
Accessibility
Clarity

You can either give your various sections id numbers and target the headings within these:

#mainContent h1 { /* rules here */ }
or use class names for either the sections (preferred) or each heading:

.contentClass h1 { /* rules to apply to headings within sections with this class */ }
h1.headingClass { /* rules to apply to all heading 1's with this class */ }
To add a class to a div:

<div class="contentClass"><h1>My Main Heading</h1></div>

Yes I know, which is why I was pointing out there are lesser heading tags to be used for things like blog posts titles and such. Obviously, its good SEP practice to use heading 1 tags for page content headings, but less important sections dont have to be h1 tags.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum