Currently I am trying to add a custom.css to make minor adjustments in the default theme appearance. But, whenever I try to add a custom.css, changes that I made for front end, also takes place in AdminCP (backend). What is proper way to add a custom.css so that only front end theme is effected by that custom.css?

I have also tried adding new CSS File > Front > System with no success.

Make sure you target the body class: ipsApp_front

You can do this by adding that class so that it is the first one in whatever you're editing, so that: 

.ipsApp_front .some_class #some_id some_element {
    some-attribute: #fff;
}

of course replace the some_* with the actual elements.

Thanks. It worked well...