How to add the own css style

I have a style sheet to want to use in K2 item artlcles.
like the following.
.console {
background-color: #000;
XXXXXXXXXXXXXXXXXXXXXXXXXX;
white-space: pre;
}
p.console-caption {
margin-top: 0em;
text-align:center;
}
I want to use it like this in the articles in order to show like the console box effect.
＜pre class="console"＞
XXXXXXXXXXXXXXXX
</pre>

I added the style into the editor.css and template.css file, but it does not work.
Please let me know where to add or modify the new css style file and how to use it.

I solved by myself.
I used Template->Advanced settings
Custom CSS code box.
No reply from Gavick yet.
Are you absent ?

Hi

A file for a custom css is /css/override.css, but field in template settings is also a good solution.

Thank you teitbite.
There is problem.
We can not use TinyMCE editor to edit the custom css since custom tag will be disappeared when editing.
CodeMirror or non editor should be used.

Hi

Custom CSS file doesn't have editor and if You are using override.css file instead than I would recommend to change it via ftp, so You will be able to use any editor. Joomla editors have a habit of removing some unrecognised code on save. It's a hacking attempt security.