Go to /skin
You'll find there frontend/ and there default/ (for the "package name"), under which you'll find another default/
1 - Make a copy of this directory \skin\frontend\default\default to \skin\frontend\default\myskin
Go to the css directory there: open the styles.css: it gives you the structure of the css.
... however, it references a custom.css which in fact is not present where it should be...
2 - Go to \app\design\frontend\default\default\layout and edit the file page.xml
Replace there the 2 lines (around 55)
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
</block>
with
<action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
</block>
3 - Go back to the css directory. The most complete one is boxes.css.
My suggestions:
- print and study boxes.css
- add your changes to custom.css, any item that you redefine here will take your definition, not the one from the standard css
eg, change some colors, save.
4 - Go to Magento admin, and there select 'Configuration'
- select the site/ store to which you want to apply your skin; select "webdesign" and change the skin to 'myskin'.
- save
- IMPORTANT: go to cache management; unselect all boxes; update the cache options. (this will stop using the cache, so that you can check your changes.
5 - My 2cents of advice: since you are just working on 4 / 5 products, do not try to start with other changes than the ones I suggested above.......
WARNING WARNING WARNING be careful when working on files not to change their type (eg UTF-8 or not) otherwise your CSS files will crash and your site with them.... -->> that's why you add an extra skin instead of changing the existing one...
Good luck...