I have a simple local.xml
that attempts to include a custom wc_styles.css in my head block, to apply for all pages in my site.
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<action method="addItem">
<type>skin_css</type>
<file>css/wc_styles.css</file>
</action>
<action method="addCss"><stylesheet>css/wc_styles.css</stylesheet></action>
</reference>
</default>
</layout>
When viewing the source of my website, wc_styles.css is being included above all the parent themes css files (all within the HTML head tag), so my custom css rules get canceled out basically.
What is the proper way of getting a custom css to work?
Edit Note:
I'm merely trying to make look & feel changes to the Magento 1.9 RWD theme. I've created the folders for my subtheme at
\app\design\frontend\wc\default
\skin\frontend\wc\default
My local.xml is placed at:
\app\design\frontend\warecompare\default\layout
My wc_styles.css is placed at:
\skin\frontend\warecompare\default\css
This is what the source code of my site looks like where u see my wc_styles.css appearing above the parents styles.css
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home page</title>
<meta name="description" content="Default Description" />
<meta name="keywords" content="Magento, Varien, E-commerce" />
<meta name="robots" content="INDEX,FOLLOW" />
<link rel="icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://localhost/mg1/skin/frontend/base/default/favicon.ico" type="image/x-icon" />
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = 'http://localhost/mg1/js/blank.html';
var BLANK_IMG = 'http://localhost/mg1/js/spacer.gif';
//]]>
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/base/default/css/et_advancedcompare/noreload.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/wc/default/css/wc_styles.css" media="all" />
<!-- big heap of javascript includes here-->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Raleway:300,400,500,700,600" />
<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles-ie8.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland-ie8.css" media="all" />
<![endif]-->
<!--[if (gte IE 9) | (IEMobile)]><!-->
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://localhost/mg1/skin/frontend/rwd/default/css/madisonisland.css" media="all" />
<!--<![endif]-->
Note: I actually have this as a duplicate question on StackOverflow before realizing that there as a Magento subdomain of StackExchange to ask this question on. Not sure how to delete the original question https://stackoverflow.com/questions/25156808/magento-custom-css-overridden-by-parent-css-using-local-xml