Override span in html css and use TD

Issue

I have a span tag inside a <td>. In <td>, I am setting the font by using the class. However, the span has its own font style. I want to override the font styling in the span tag and force the font set in the tag. I am not sure how to do it, hence please advise.

.set_font
{
    font-size:12px;
}
<table>
    <tr>
        <td class="set_font">
           <span style:"font-size:8px;"> This is a test </span>
        </td>
    </tr>
</table>

Solution

Edit: For a better explanation of the issue and solutions for different scenarios, please see Jukka's answer below.

Original Answer:

In CSS selectors, the one that is the closest to the actual element is applied. So you should be more specific when using selectors to override the style.

In your example the span element has an inline style which is of the highest specificity.

To gain higher specificity then inline style in an outer element you should use [style] and important.
You can force the one set on td like this:

td.set_font [style] {font-size:120px !important;}

Here is working JSFiddle

Answered By - tozlu