Unique style via CSS inside the Template

I would like to ask how to create a unique style of the webpage elements.inside color section?

For example: I have an alternative section I have circle shaped pictures inside of it . Normally the overlay shape is the default box shape but I would like to set it to circle overlay effect.

My code is for this image overlay settings is:
.image-overlay{position: absolute; background: #194670; width: 240px; border-radius: 120px; -webkit-border-radius: 120px; -moz-border-radius: 120px; z-index: 500; height:100%; width:100%; opacity: 0; filter:alpha(opacity=0);}

If I set this it will appear gobally for everything on the webpage if I put this inside the custom.css
The question is, what is the syntax in the custom.css and on the actualy color section. What is the refference syntax on the color section inputtext for developers.

Basically after I made a custom.css for the circle overlay effect how can I link it in the color section inputbox to work correctly and see the effect on webpage?

Thank you for your help.