Unable to change H1, H2, H3 font size
 

I'm stuck here trying to change my H1, H2 and H3 font sizes. I went into skin1.css and edited the lines:

}
H1 {
FONT-SIZE: 15px;
}
H2 {
FONT-SIZE: 13px;
}
H3 {
FONT-SIZE: 11px;

But it doesn't seem to change the font sizes at all...I know my website is using this CSS file because changing the body text size works, but just not the H1/h2/h3 tags.
By the way, I'm trying to edit the H1 tags when they are used in the product descriptions for SEO purposes. At the moment, when I use the H1 tags in the product descriptions, the font size is too big.

Re: Unable to change H1, H2, H3 font size
 

There may be other css involved - use Firefox with Firebug and it will tell you what css is in control.

--

Re: Unable to change H1, H2, H3 font size
 

Did that, but it seems that skin1.css is the only stylesheet in control....I was playing around with skin1.css earlier and it seems that changing the font size for H1, H2 and H3 works but only within the layout interface. It does not change the font size WITHIN the individual product description...does anyone know how to change the H1 font size within the product descriptions?

I was also thinking there's another CSS file being called, but firefox with firebug doesn't seem to show any other css file being called except skin1.css

Re: Unable to change H1, H2, H3 font size
 

It is possible that there is in-line css - not in the style sheets but directly added to the template/html. If so, you would see it in firebug as element.style.

Re: Unable to change H1, H2, H3 font size
 

I wasn't able to find the right place to change the H1 tags to be a different size within the product description but I did find a workaround. I found that if I used these lines, I can manually change the size to what I wish while still marking it as a H1 tag.

My question is that from a SEO perspective, will I get penalised in any way??
<h1><span style="FONT-SIZE: 10pt; TEXT-DECORATION: underline">Widgets</span></h1>

Re: Unable to change H1, H2, H3 font size
 

You won't get penalized, it's just not a good practice

Re: Unable to change H1, H2, H3 font size
 

You are also making it more difficult on yourself - now you have to add in-line css to every product description. If you want an alternative, you can post a link and someone will be able to advise you on why the css changes in skin1.css are not being applied to the tags in your product descriptions.

Re: Unable to change H1, H2, H3 font size
 

Well if you go here:
http://www.circuitcentral.com.au/sony-psp-slim-lite-battery-1200mah.html

You can see what I mean. The product title "Sony PSP Slim Lite Battery - 1200mAh" is H1 and so is the heading "Sony PSP Slim/Lite Battery Features" (also H1) but you can see how the 2nd title "Sony PSP Slim/Lite Battery Features" is too big.

Re: Unable to change H1, H2, H3 font size
 

The problem appears to be with how you are entering the product descriptions - most likely due to the WYSIWYG editor. (It is either from the WYSIWYG editor that you are using, or whatever you are cutting and pasting from into your product descriptions.)

For example:

In Firebug - if you inspect the element by mousing-over the title - you will see this:

element.style {
font-size:10pt;
text-decoration:underline;
}

h1 {
font-size:16px; <---- firebug shows this with a strike through, indicating the inline css has taken presidence
}

This is the in-line css that I was trying to warn you about - it is higher in the "cascade" of css - so it is taking control of how you have the H1 tag set inside your css file.

So - to use the css from the css file, the in-line css has to be stripped out:



This is a problem with using the WYSIWYG editor in the version that you have. Depending on what the process is for you entering/updating your product descriptions - there might be better advise from the forum for how to avoid the style issues that using the WYSIWYG causes.

If you can standardize on how you want all the tags to look all the time in your product descriptions - you could avoid the problem. You could edit the product.tpl template to put a div around your product description - something like:

Then - in your style sheet:

.my_product_description_styles h1 {font-size: 15px;text-decoration:underline}
.my_product_description_styles h2 {font-size: 13 px;text-decoration:underline}
... etc:

Then strip out all the <span></span> inline css that is in your descriptions.

Re: Unable to change H1, H2, H3 font size
 

Thank you very much for your assistance so far gb2world. I'm not very good with CSS and HTML but slowly getting my head around it.

I can now edit some parts using the codes you have posted, but I still can't seem to edit the H1 tag size. Cna you please verify that the following code is correct to put in the skin1.css ? And I can insert this code anywhere correct?

Not sure why its not updating properly or if I'm putting the <div> and </div> tags in the right place. I tried putting the </div> tag right on the last line of product.tpl to define the entire region but still no go...

.my_product_description_styles
H1 {font-size: 9px; text-decoration:underline}