Hello
Is it possible to write some CSS code that affects the <h1>, <h2>, <h3>, etc tags?
I have a huge amount of styles in my website. I also want to use the <H1> tags etc, but I dont want them to do ANYTHING. No fontsize change, no linebreak, no nothing. Just a non-functional <H1> in the sourcecode for search engines etc.
I've tried giving the <hx> tags specific values, but that will amount to me having to rewrite a huge amount of my css code.
h1 { font-size: smalll; color: #000000; }
Problem there is that I have about 20 different places that need the 'header' tag, for which I'd have to make 20 new specific H1 tags. not to mention the h2 and h3 tags.... (I'll skip the h4-h7 tags...
)
I'd rather just have something like:
h1, h2, h3, h4, h5, h6, h7 { style: null; }
(yeah I know that won't work)
Does someone know how to unset a 'default' style?
Thanks!It's easily done,but why would you want to feed search engines false information? You'll just end up with a bunch of angry visitors.h7 does not exist. Using multiple h1 elements may cause search engines to disregard your site.It's easily done,but why would you want to feed search engines false information? You'll just end up with a bunch of angry visitors.
I'm not trying to send false info. The things I'm selecting ARE the headings, but I used custom styles to make them stand out.
Using the default <h1> tags pretty much destroys my layout.
As for the multiple <h1> tags, there's only 1 per page, but the pages are dynamic, and thus a lot of combinations of styles are possible. Writing that many different H1 styles is a pain in the ... :S
Thanks for the quick responses
I don't think I understood your question at all...
You have lots of H1 ( and followig) tags, and you set classes for those. Right.
So, what is the problem ?
I'm lost.
You want to have defined in the stylesheet without assigning it any style ?
You could do that :
h1 {}
But I imagine that's not what you are after.,..
Edit : after rereading your post... you have 20 different headers, and you don't want to give them classes because it would be too many classes to define ? Don't the H1 have anything in common ?
When I have a very big site, and lots of styles on them, what I usually do is define some "basic" classes.
And then, combine them...
I'm sure you already now that, but if any newbie comes by, he might learn something, so I'll go on.
in the style sheet, you could do :
h1 { } ( nothing defined here, but just to know that you defined nothing.. good to have, if your stylesheet is really a BIG one )
.large {
font-size: 16px;
}
.medium {
font-size: 12px;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
.blue {
color: blue;
}
.border {
border: 2px solid black;
}
etc....
and then : <h1 class="large red bold">My Title is Big, Red and Bold</h1>
<h1 class="medium blue border">I'm a medium sized blue title with a 2px solid black border</h1>
Ok, I feel very stupid writting this. Maybe it's totally irrelevant. In case, a mod can just delete this...
But, I'd like to have a better idea of what you're really trying to do. It's not the clearest thing...At the moment I don't have any <Hx> tags in my code. I used the Table, div, body etc styles to set the font styles.
I want to add the <h1> tags into the sourcecode, but: simply put, dont want them to do anything.
<td>This is the Title</td> becomes <td><h1>This is the Title</h1></td>
But I want both to look the same.
I can write a custom H1 style for each instance in the website, but the pages are dynamic which means there are almost (I believe 200+ possible styles. (Color size, weight combinations)). Just turning the <Hx> tags off would save both bandwidth and a lot of my time..
Ok, I think I finally understand what you want..
But sorry, I don't know how I could help you. As far as I know, it's not possible to inactivate the default browser styles for the basic tags. If you don't define them, the browser will just give them the default value, but that you already know.
Maybe some more experienced user will have an answer...
*hides in a corner, full of shame after her lame style course... * lol ! <-- but as i said, a newbie could step on that, and find it usefull...Thanks for your attempt at helping me Ness.
Charles, you said there was a simple solution, would you mind sharing it? To be honest it's not really a lot of help to say its really simple, and then not tell how to do it. Just really frustrating I can't figure it out...
Thanks.</style type="text/css">
h1,h2,h3,h4 {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-variant: inherit;
}
</style>Thanks, I'll try that and get back to you. Don't have access to the files atm.Me again...
I changed it to:
h1,h2,h3,h4,h5,h6 {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-variant: inherit;
display: inline;
} And it works great in both Opera and Firefox. IE however is still making the text bigger/bolder/heavier.
<!-- m --><a class="postlink" href="http://www.cartopack.nl/index.php?p=page">http://www.cartopack.nl/index.php?p=page</a><!-- m -->
The word WELKOM should appear the same in all 3 browsers.
In Opera and FF its about 8 mm high. (1/3 inch). In IE its almost 12 mm (1/2 inch).
I want it to be like FF and Opera are rendering it.
Does anyone know why IE is rendering differently?
Another nonrelated question about that site: Why is the menu not floating to the correct location in Mac's IE?
Thanks!Move the class="style12" to the h1 element and remove all that inherit stuff for headers.
You have a lot of repeated and inefficiently written rules.
Is it possible to write some CSS code that affects the <h1>, <h2>, <h3>, etc tags?
I have a huge amount of styles in my website. I also want to use the <H1> tags etc, but I dont want them to do ANYTHING. No fontsize change, no linebreak, no nothing. Just a non-functional <H1> in the sourcecode for search engines etc.
I've tried giving the <hx> tags specific values, but that will amount to me having to rewrite a huge amount of my css code.
h1 { font-size: smalll; color: #000000; }
Problem there is that I have about 20 different places that need the 'header' tag, for which I'd have to make 20 new specific H1 tags. not to mention the h2 and h3 tags.... (I'll skip the h4-h7 tags...
)I'd rather just have something like:
h1, h2, h3, h4, h5, h6, h7 { style: null; }
(yeah I know that won't work)
Does someone know how to unset a 'default' style?
Thanks!It's easily done,but why would you want to feed search engines false information? You'll just end up with a bunch of angry visitors.h7 does not exist. Using multiple h1 elements may cause search engines to disregard your site.It's easily done,but why would you want to feed search engines false information? You'll just end up with a bunch of angry visitors.
I'm not trying to send false info. The things I'm selecting ARE the headings, but I used custom styles to make them stand out.
Using the default <h1> tags pretty much destroys my layout.
As for the multiple <h1> tags, there's only 1 per page, but the pages are dynamic, and thus a lot of combinations of styles are possible. Writing that many different H1 styles is a pain in the ... :S
Thanks for the quick responses
I don't think I understood your question at all...You have lots of H1 ( and followig) tags, and you set classes for those. Right.
So, what is the problem ?
I'm lost.
You want to have defined in the stylesheet without assigning it any style ?
You could do that :
h1 {}
But I imagine that's not what you are after.,..
Edit : after rereading your post... you have 20 different headers, and you don't want to give them classes because it would be too many classes to define ? Don't the H1 have anything in common ?
When I have a very big site, and lots of styles on them, what I usually do is define some "basic" classes.
And then, combine them...
I'm sure you already now that, but if any newbie comes by, he might learn something, so I'll go on.
in the style sheet, you could do :
h1 { } ( nothing defined here, but just to know that you defined nothing.. good to have, if your stylesheet is really a BIG one )
.large {
font-size: 16px;
}
.medium {
font-size: 12px;
}
.bold {
font-weight: bold;
}
.red {
color: red;
}
.blue {
color: blue;
}
.border {
border: 2px solid black;
}
etc....
and then : <h1 class="large red bold">My Title is Big, Red and Bold</h1>
<h1 class="medium blue border">I'm a medium sized blue title with a 2px solid black border</h1>
Ok, I feel very stupid writting this. Maybe it's totally irrelevant. In case, a mod can just delete this...
But, I'd like to have a better idea of what you're really trying to do. It's not the clearest thing...
At the moment I don't have any <Hx> tags in my code. I used the Table, div, body etc styles to set the font styles.I want to add the <h1> tags into the sourcecode, but: simply put, dont want them to do anything.
<td>This is the Title</td> becomes <td><h1>This is the Title</h1></td>
But I want both to look the same.
I can write a custom H1 style for each instance in the website, but the pages are dynamic which means there are almost (I believe 200+ possible styles. (Color size, weight combinations)). Just turning the <Hx> tags off would save both bandwidth and a lot of my time..
Ok, I think I finally understand what you want..But sorry, I don't know how I could help you. As far as I know, it's not possible to inactivate the default browser styles for the basic tags. If you don't define them, the browser will just give them the default value, but that you already know.
Maybe some more experienced user will have an answer...
*hides in a corner, full of shame after her lame style course... * lol ! <-- but as i said, a newbie could step on that, and find it usefull...Thanks for your attempt at helping me Ness.
Charles, you said there was a simple solution, would you mind sharing it? To be honest it's not really a lot of help to say its really simple, and then not tell how to do it. Just really frustrating I can't figure it out...
Thanks.</style type="text/css">
h1,h2,h3,h4 {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-variant: inherit;
}
</style>Thanks, I'll try that and get back to you. Don't have access to the files atm.Me again...
I changed it to:
h1,h2,h3,h4,h5,h6 {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
font-variant: inherit;
display: inline;
} And it works great in both Opera and Firefox. IE however is still making the text bigger/bolder/heavier.
<!-- m --><a class="postlink" href="http://www.cartopack.nl/index.php?p=page">http://www.cartopack.nl/index.php?p=page</a><!-- m -->
The word WELKOM should appear the same in all 3 browsers.
In Opera and FF its about 8 mm high. (1/3 inch). In IE its almost 12 mm (1/2 inch).
I want it to be like FF and Opera are rendering it.
Does anyone know why IE is rendering differently?
Another nonrelated question about that site: Why is the menu not floating to the correct location in Mac's IE?
Thanks!Move the class="style12" to the h1 element and remove all that inherit stuff for headers.
You have a lot of repeated and inefficiently written rules.