How do I add an additional class to the Add to Cart button on the products page?

[jus2sho]

First off, I'm a beginner when it comes to CSS, so please dummy down your reply.  Currently, the CSS for the Add to Cart button on the products page is linked to the Add to Cart button on the product details page.  How would I go about creating a separate class that only affects the Add to Cart button on the products page?  Specifically, I would like to change the position of the Add to Cart button on the products page without affecting it on the details page.  Which files will I need to modify to make this work?  Below are pages for reference.

1. http://bit.ly/1s34qpF

2. http://bit.ly/UVsc8m

[GJC Web Design]

css rules can be wriiten in any file that is loaded

so pick one and

products page :

.browse-view .addtocart-button {
do what you want
}

products detail page:

.productdetails-view .addtocart-button {
do what you want
}

[jus2sho]

Yes, but which file do I add the additional class to?  I want to add the additional rule to the Add to Cart button on the Products Page, but have it omitted on the Details Page. 

[GJC Web Design]

which is EXACTLY what the above will do.. you don't need any additional class - the ones above are already there!


think you had better read this ->

Descendant Selector

The descendant selector matches all element that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:
Example
div p {
    background-color: yellow;
}