Already created custom.css containing also adjustments for home page only

Question

Is it possible to include in the already created custom.css adjustments that apply for the home page? It is about changing the style for H1 en H2 tags of the homepage. But i would not like that the H1 and H2 tags on other pages would be affected.

At the beginning i thought about creating a second custom.css and call it on the local.xml, but now i heard that i should try to make it on the already created custom.css (that has also adjustments for other pages of my webshop).

Any tips, suggestions, links?

Thanks for your collaborations.

Answer 1

You can use any CSS file for this, just target the homepage body class so other pages aren't affected. For example:

.cms-index-index h1 {
    color: red;
}

Answer 2

@Ben Crook's answer should work just fine, but there is an alternative method with a separate CSS file:

In [magento-root]/app/design/frontend/[your]/[theme]/layout/local.xml add the following:

<cms_page>
    <reference name="head">
        <action method="addItem">
            <type>skin_css</type>
            <name>css/homepage.css</name>
        </action>
    </reference>
</cms_page>

Then you can add the specific styles in the newly utilized file: [magento-root]/skin/frontend/[your]/[theme]/css/homepage.css

Note: This will be added to all of your cms_pages. If you want to avoid that, you can try working with different handles in place of the <cms_index_index>, but without a custom handle, it is far easier to save this in Magento admin.

Under Magento Admin->Cms->Pages->[Edit your Homepage], add the following snippet under Design->Layout Update XML:

<reference name="head">
    <action method="addItem">
        <type>skin_css</type>
        <name>css/homepage.css</name>
    </action>
</reference>