h使用opencart中的css标记更改

Question

Im trying to implement a more accurate h tag structure on my opencart site for seo purposes. For those that are unfamiliar with the html in opencart, most pages are split with php calls being made to seperate header, main body and footer files. I want to have a h1 tag that is slightly different on the main page to the product page by writing internal css to change the font size to something slightly smaller.

I therefore added the code (below) to the top of the products page which seems to work but leaves a massive white space at the bottom of the page below the footer. Example at this link: http://www.imbued.co.uk/sleep/aborro-bed

How do i implement this using css correctly?

<style>
h1 {
font-size:2em !important;
margin:0 0 20px !important
}
</style>

Answer 1

Try this:

"h1" on main page:

#content-home h1 {
    font-size: 2em;
    color: red;
}

"h1" on product page:

.product-info h1 {
    font-size: 1em;
    color: green;
}