How Do You Format a Formula with CSS in Google Sites?

How can I add the CSS stylized formula:

       <style type="text/css"> a.info {
       position:relative;
       z-index:24;
       background-color:#ddd;
       color:#000;
       text-decoration:none
   }
   a.info:hover {
       z-index:25;
       background-color:#ff0
   }
   a.info span {
       display: none
   }
   a.info:hover span {
       display:block;
       position:absolute;
       top:2em;
       left:2em;
       width:10em;
       border:2px solid #0cf;
       background-color:#555;
       color:#fff;
   }
   a:link {
       text-decoration:none;
   }
   </style><font face="times new roman, serif" size="5">
    <a class="info" href="http://www.bylau.com">
        SS<sub>T</sub><span>variable explanation</span>
    </a>&nbsp;=&nbsp;
    ∑ (<i>x</i><sub><i>i&nbsp;</i></sub>− <i>x̄</i><sub>grand</sub>)<sup>2</sup>
</font>

into Google Sites?

I've tried the HTML box tool https://support.google.com/sites/answer/2500646?hl=en&topic=1046075&ctx=topic

and the formatting still won't work in Google Sites.

Solution

If you want to include CSS in your Google Sites , you need to use the balise Just but this in the html Box and just save this.

I can show you an example :

    <object xmlns="http://www.w3.org/1999/xhtml">

<style type="text/css">

 .roll
{
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 10;
}

.roll a
{
padding: 10;
display: block;
color: #000000;
font-size: 18px;
width: 150px;
height: 18px;
display: block;
text-decoration: none;
}

a:hover
{
background-color: #ccc;
color: #eee;
}

.roll
{
cursor: pointer;
}

</style>


<div class="roll"><br />
<a href="#">Rollover Texte 01</a><br />
<a href="#">Rollover Texte 02</a>
</div>

</object>