That looks like CSS that you can add to your personal CSS template - no need to add it to Sigil.
I, on the other hand, would never create a class simply for color or font-size. I adhere to the Keep It Simple Silly methodology and would apply color/size only to a specific class.
Code:
CSS:
p {font-size:1em; color:black} /*not recommended to put a standardized font-size or color here - just an example*/
p.SpecialPara {font-size:1.8em; color:red}
HTML:
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p class="SpecialPara">This is a special paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
<p>This is a normal paragraph.</p>
instead of:
Code:
HTML:
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em80 color-red">This is a special paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
<p class="font-1em color-black">This is a normal paragraph.</p>
CSS:
/* font-size */
.font-0em50 { font-size: 0.50em; }
.font-0em60 { font-size: 0.60em; }
.font-0em70 { font-size: 0.70em; }
.font-0em75 { font-size: 0.75em; }
.font-0em80 { font-size: 0.80em; }
.font-0em85 { font-size: 0.85em; }
.font-0em90 { font-size: 0.90em; }
.font-1em { font-size: 1.00em; }
.font-1em10 { font-size: 1.10em; }
.font-1em15 { font-size: 1.15em; }
.font-1em20 { font-size: 1.20em; }
.font-1em30 { font-size: 1.30em; }
.font-1em40 { font-size: 1.40em; }
.font-1em50 { font-size: 1.50em; }
.font-1em60 { font-size: 1.60em; }
.font-1em70 { font-size: 1.70em; }
.font-1em80 { font-size: 1.80em; }
.font-1em90 { font-size: 1.90em; }
.font-2em { font-size: 2.00em; }
.font-2em50 { font-size: 2.50em; }
.font-3em { font-size: 3.00em; }
/* font-color*/
.color-black { color: #000000; }
.color-dimgray { color: #696969; }
.color-gray { color: #808080; }
.color-darkgray { color: #a9a9a9; }
.color-silver { color: #c0c0c0; }
.color-gainsboro { color: #dcdcdc; }
.color-white { color: #ffffff; }
.color-transparent { color: transparent; }
.color-red { color: #ff0000; }
.color-blue { color: #0000ff; }
.color-cyan { color: #00ffff; }
.color-magenta { color: #ff00ff; }
.color-orangered { color: #ff4500; }
.color-yellow { color: #ffff00; }
.color-green { color: #008000; }
.color-purple { color: #800080; }
By NOT giving a class to every paragraph, and only giving one to "special" paragraphs, you keep your code clean. It's MUCH easier to edit when it is clean...plus, if I wanted to change the style of the basic paragraph I only need to change it once, in the CSS, and not have to update the class on EVERY paragraph.
In your example you are using <span> tags, but the concept still applies: You don't need to have a list of all the possible font-sizes/colors in your CSS...just add the ones you need to a specific class for that specific <span>.
Cheers,