How to add and edit custom CSS

This guide will help you to quickly find a element and edit it with CSS.

This Guide is for Google Chrome, but it could also work in Safari or Firefox.

1) Right Click a element and click " Inspect" to open the Web Console.

2)  Click the "Inspector" button and click the element you want to edit.

3) You can now copy the element "CSS" selector by right click the element in the "HTML" view and go to Copy > Copy selector

4) You will not get a long string like this that can be pasted anywhere: 

#main > div > div.col.large-9 > div > div > div.product-small.col.has-hover.post-328.product.type-product.status-publish.has-post-thumbnail.product_cat-bags.product_tag-bag.product_tag-green.product_tag-leather.product_tag-nypd.first.instock.shipping-taxable.product-type-external > div > div.product-small.box > div.box-text.box-text-products > div.title-wrapper > p.name.product-title > a

This is a CSS selector string.

5) You can remove most of the string and keep the last two targets. F.ex
p.name.product-title > a

6) You can now start adding custom CSS to this element.

Examples:

Hide the element:
p.name.product-title > a{ display:none }

Bigger font size:
p.name.product-title > a{ font-size: 200% }

Change color:
p.name.product-title > a{ color: #777 }

You can add the custom CSS to Advanced > Custom CSS.