Make text smaller with HTML/CSS - html

Question

I'm trying to figure out how to emulate this image using HTML and CSS. It will be something that will be displayed below the avatar on a message board.
This is what I have so far: https://jsfiddle.net/J7VBV/220/
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple">RECENT WR<br /><strong>61%</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple">RECENT WN8<br /><strong>2469</strong></td>
<td bgcolor="teal">OVERALL<br /><strong>1737</strong></td>
</tr>
</table>
The main problem I'm having is decreasing the size of the text above the numbers. Nothing I've tried is making the text smaller.
Also, is there a better way of bolding the numbers?

Answer 1

Use this
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
td small{
font-size:7pt;
font-weight:bold;
}
td strong{
font-size:18pt;
font-weight:bold;
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><small>RECENT WR</small><br /><strong>61%</strong></td>
<td bgcolor="teal"><small>OVERALL</small><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><small>RECENT WN8</small><br /><strong>2469</strong></td>
<td bgcolor="teal"><dev font-size: 10pt;><small>OVERALL</small><br /><strong>1737</strong></td>
</tr>
</table>

Answer 2

You can use CSS to make the font smaller.
font-size: 10pt;
Just replace 10pt with whatever size you want to use.
I would use a CSS class like:
.small {
font-size: 10pt;
}
and add
class="small"
to the text you want to be small

Answer 3

You can do like this.
table.avatarStats {
border-spacing: 0;
border-collapse: collapse;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.cap{
font-size:8px;
font-weight:normal;
}
td{
font-weight:bold;
font-size:22px
}
<table class="avatarStats" width="200" border="0">
<tr>
<td bgcolor="purple"><span class="cap">RECENT WR</span><br /><strong>61%</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>55%</strong></td>
</tr>
<tr>
<td bgcolor="purple"><span class="cap">RECENT WN8</span><br /><strong>2469</strong></td>
<td bgcolor="teal"><span class="cap">OVERALL</span><br /><strong>1737</strong></td>
</tr>
</table>
Adjust the font-size accordingly as needed

Answer 4

try this https://jsfiddle.net/fd9x06jq/
table.avatarStats tr td strong{
font-size:9pt;
font-weight:bold;
color:black
}

Answer 5

Although I'd advise some changes to your markup, add this to you CSS:
table tr td:last-child{
font-size: 8pt;
}
EDIT:
My first code was off. Now it's correct. Here's a fiddle

Answer 6

Updated your code here: https://jsfiddle.net/70gtky65/1/
<table class="avatarStats">
<tr>
<td>RECENT WR<br/><span>61%</span></td>
<td>OVERALL<br/><span>55%</span></td>
</tr>
<tr>
<td>RECENT WN8<br/><span>2469</span></td>
<td>OVERALL<br/><span>1737</span></td>
</tr>
</table>
<style type="text/css">
table.avatarStats {
border-spacing: 0px;
text-align: center;
color: white;
font-family: Arial, Helvetica, sans-serif;
width: 108px;
}
table.avatarStats td {
font-size: 7px;
width: 50px;
padding: 2px;
}
table.avatarStats td span {
font-size: 16px;
}
table tr td:first-child {
background-color: #7842B3;
}
table tr td:last-child {
background-color: #459ABD;
}
</style>
You should try to avoid inline CSS and here is why