Help with editor style

Hi,

I am new to using ckeditor and have only used fckeditor a little. I am trying to get the ckeditor to display the styles outlined below when I press the bold button for instance or select Heading 1 or if I have text as Paragraph and select first from the styles list so that we can see what it will look like live. Not sure how to get these styles working though.

I only want it to display like this in the editor and to put the style/class name in the textarea, not the complete style, as on the front end, our website has a bigger stylesheet which includes these styles.

eg. in the textarea source it should be <p class="first">Text here </p> rather than <p style="font-family:"adventBold1"; font-size:26px; color:#cccccc; padding: 0px 0px 5px 0px; margin: 0px 0px 5px 0px; line-height:26px; text-align:left;">Text here</p>

Here is the styles
-------------------------------------------------------
@charset "utf-8";
/* CSS Document */

@font-face {
font-family: 'adventBold3';
src: url('../webfonts/advent-bd3-webfont.eot');
src: local('☺'), url('../webfonts/advent-bd3-webfont.woff') format('woff'), url('../webfonts/advent-bd3-webfont.ttf') format('truetype'), url('../webfonts/advent-bd3-webfont.svg#webfontcc4vnVow') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'adventBold1';
src: url('../webfonts/advent-bd1-webfont.eot');
src: local('☺'), url('../webfonts/advent-bd1-webfont.woff') format('woff'), url('../webfonts/advent-bd1-webfont.ttf') format('truetype'), url('../webfonts/advent-bd1-webfont.svg#webfont9TaERuJU') format('svg');
font-weight: normal;
font-style: normal;
}

H1 {
font-size:44px;
color:#0199d5;
padding: 0px 0px 6px 0px;
margin: 0px 0px 6px 0px;
font-family:"adventBold1";
line-height:44px;
}
A, A:active, A:visited, A:link {
color:#0199d5;
text-decoration:none;
font-family:"adventBold1";
}
A:hover {
color:#004e9d;
text-decoration:none;
font-family:"adventBold1";
}
EM {
font-weight:bold;
color:#0199d5;
font-style:normal;
font-family:"adventBold3";
}
P {
font-family:"adventBold1";
font-size:15px;
color:#666666;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
text-align:justify;
}
P.first {
font-family:"adventBold1";
font-size:26px;
color:#cccccc;
padding: 0px 0px 5px 0px;
margin: 0px 0px 5px 0px;
line-height:26px;
text-align:left;
}
B, STRONG {
font-family:"adventBold3";
font-size:15px;
color:#0199d5;
}