CODEWITHSUNDEEP
htmlcss
Jerinos
Jerinos

Reputation: 349

Make text smaller with HTML/CSS

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.

stats

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?

Upvotes: 2

Views: 1500

Answers (6)

alebruck
alebruck

Reputation: 434

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

Upvotes: 0

Bibek Adhikari
Bibek Adhikari

Reputation: 81

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>

Upvotes: 2

Kishan
Kishan

Reputation: 1190

try this https://jsfiddle.net/fd9x06jq/

table.avatarStats tr td strong{
  font-size:9pt;    
  font-weight:bold;
  color:black
}

Upvotes: 1

Tushar Gupta
Tushar Gupta

Reputation: 15913

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

Upvotes: 1

Caio Felipe Pereira
Caio Felipe Pereira

Reputation: 835

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

Upvotes: 0

NendoTaka
NendoTaka

Reputation: 1224

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

Upvotes: 1

Related Questions