Convert a Template to a Website

I have two html templates. I would like the css removed, being referred to by "class" in the html template, to two separate and matching class/style templates. 1. <style> span[data-content=""] { display:none; } .google-visualization-table-tr-head { display:none; } </style> <div style="padding:0px"> <div style="cursor:pointer;padding-bottom:0px" data-toggle-visibility="controller"><div style="font-size:15px;color:#666;padding: 0px;padding-bottom: 0px;"> <img src="//[login to view URL]"/> <b>Location: </b>${"Location"}, <span data-content="${"Monthly Salary"}"><b>Monthly Salary: </b>${"Monthly Salary"}</span> <span data-content="${"Hourly Pay"}"><b>Hourly Pay: </b>${"Hourly Pay"}</span>, <b>Date Available: </b>${"Start Date"} </div></div> <div data-toggle-visibility="target"> <img src="${"School Image"}" style="float:left; height:200px;margin-top: 10px; margin-right: 15px; border-style: solid; border-color: rgb(102, 102, 102);" /> <div style=""margin:10px ;font-size: 15pt;padding:15px""> <br><br> <b>Description: </b>${"Description"}</span> <br><br> <b>Degree Required: </b>${"Degree Required"}</span>, <b>Position Type: </b>${"Position Type"}</span>, <b>Substitute Position: </b>${"Substitute Position"}</span> <br><br> <b>Student Ages: </b>${"Student Ages"}</span>, <b>Schedule: </b>${"Schedule"}</span> <br><br> <b>Contact: </b>${"Contact"}</span>, <b>Email: </b>${"Email"}</span> <span data-content="${"Phone"}"><b>Phone: </b>${"Phone"}</span> <br><br> <div style="display:inline-block;float: right;"> <a target="blank" href="[login to view URL]${"Location"}+${"Email"}+${"Contact"}" style=";color:white!important;background-color: rgb(56, 118, 25);border-radius:2px;display:inline-block;font-size:14px;font-weight:bold;padding:8px;text-align:center;text-decoration:none;float: right;"> Search More </a> </div> </div> </div> 2. <div> <div style="cursor:pointer;padding-bottom:0px" data-toggle-visibility="controller"> <img style='display:block;margin-right:auto;margin-left:auto;width:100%;max-width:200px;max-height:200px;image;margin-bottom:15px;' src='${"Image"}'/> <div class="container"> <h1 style="display:inline-block";> ${"Title"} </h1> </div> </div> <div data-toggle-visibility="target"> <div class="datas"> <p class="specdatas"> <b> Expertise: </b> ${"Expertise"} </p> <p class="specdatas"> <b> Age: </b> ${"Age"} </p> <p class="specdatas" data-name="${"Name"}"><b>Name: </b>${"Name"}</p> </div> <p class="description"> ${"Introduction"} <div style="display:inline-block;float:right;"> <a target="blank" href="${"Google+"}" style=";color:white!important;background-color: rgb(56, 118, 25);border-radius:2px;display:inline-block;font-size:14px;font-weight:bold;padding:8px;text-align:center;text-decoration:none;float: right"> Google+ Profile Page </a> </p> </p> </div> </div>