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.